基于nodeJS从0到1实现一个CMS全栈项目（上）

项目背景

由于本人对前端领域非常感兴趣，接触到前端的时间也比较早，所以平时会用前端技术做一些有趣的东西，包括H5游戏，一些简单框架的封装，脚手架的设计等等，在我之前的文章中也有比较详细的介绍。近由于希望对node服务端技术，vue，react hooks这些技术实践做一次总结，也希望自己能做出一些比较实用的项目，把它开源出来可以一起完善，优化，迭代。

所以基于这样的想法，我想到了CMS，我们是不是可以做一个这样的系统，通过一些配置，生成自己的博客网站呢？虽然目前也有很多比较好的博客系统可以使用，比如hexo等，大家也可以参考这些开源的源码，也会收获满满。

技术架构

我采用前后端分离的方式开发，具体技术栈有：

react我们会用到新的react-hooks基础，也会教一些基本的用法。技术架构图：

实现效果和关键技术点介绍

1.node服务端搭建

这里我们采用node社区比较轻量的服务端框架Koa，然后服务端中间键有：

上面就是我们web服务端主要使用的中间键，对于每一块如何去组织和架构，包括自己实现错误校验中间件，我会在后面一一介绍，由于写服务端的过程中也查阅了很多资料，如有不足或需要优化的地方，欢迎交流。

服务端大致分为如下几层：

主要分为数据层，服务层和底层框架层等。

2.后台管理系统

后台管理系统主要采用vue相关生态，我会采用*cript和vuex来组织管理代码及项目状态，主要模块有登录模块，权限控制，博客配置页面，文章编写修改页面，数据统计页面等，第三方UI采用antd，效果如下：

登录模块：

然后关键点在于如何去维护配置的数据和config的数据结构的设计，因为考虑到预览功能和编辑设计到的状态既有同步状态也有异步，所以我们80%的业务是在vuex里做的。文章编辑这块用的wangeditor，你也可以采用其他更的富文本编辑器实现很强大的功能。效果图如下：

总体来说，vue做的后台管理系统主要用到了vuex，vue-router，antd，axios，wangeditor这几个核心库，类型检验主要用的*cript，主要涉及到接口类型的定义，版不会涉及更多诸如范型的知识，不过会涉及到一点接口的继承。页面中的组件的使用，自定义组件的封装也会在后期详细介绍，如果有更好的思考，经验，可以多多交流。

3.CMS前台实现

前台实现我主要采用react相关生态去实现，这块用vue也是可以的，主要是本人想复习和进一步使用react hooks去实现一些有趣的东西。用到的技术主要有：react-router-dom，antd，axios，react-hooks，如果大家想尝试使用redux，也可以使用，后期我也会总结相关的文章和技术技巧。

理论上这块是要涉及到服务端渲染的，因为C端产品一个重要的点就是seo，所以后面也会增加ssr相关的技术实现。目前是采用骨架屏来实现伪ssr技术。

然后项目的脚手架我们有采用create-react-app，而是自己总结开发的基于webpack的脚手架，如果对webpack有兴趣的，可以一起探索一下webpack的奥妙。因为每个人配置的页面都不一样，这里我展示一个通过我们管理系统配置的一个博客网站：

后

由于近空闲时间都在做项目代码优化和调整，nginx服务器配置和服务器性能优化的工作，所以希望感兴趣的朋友可以一起参与进来，打造一个更完美的CMS。后期将更详细的介绍系统的具体实现过程和细节以及服务器相关的配置，包括项目的开源地址我会在十一之前告诉大家，欢迎在公众号《趣谈前端》加入我们一起讨论。