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

时间 2019-11-05

标签基于 nodejs 实现一个 cms 项目栏目 CMS 繁體版

原文原文链接

做为一名前端开发工程师，咱们平时除了对javascript，css，html的积累以外，还须要对http，浏览器渲染原理甚至后端的一些知识有所了解，这样对本身职业发展才会更有帮助。javascript

项目背景

因为本人对前端领域很是感兴趣，接触到前端的时间也比较早，因此平时会用前端技术作一些有趣的东西，包括H5游戏，一些简单框架的封装，脚手架的设计等等，在我以前的文章中也有比较详细的介绍。最近因为但愿对node服务端技术，vue，react hooks这些技术实践作一次总结，也但愿本身能作出一些比较实用的项目，把它开源出来能够一块儿完善，优化，迭代。css

因此基于这样的想法，我想到了CMS，咱们是否是能够作一个这样的系统，经过一些配置，生成本身的博客网站呢？虽然目前也有不少比较好的博客系统可使用，好比hexo等，你们也能够参考这些优秀开源的源码，也会收获满满。html

技术架构

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

服务端：NodeJs + Koa + redis + Json-Schema
管理后台：Vue-cli3 + vue + vuex + typescript + axios + antd
前台页面：WP（本身基于webpack开发的脚手架） + React + axios + antd
部署上线：pm2 + nginx
代码管理： git

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

（本图使用adobeXD绘制，更多技巧多交流哈）

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

1.node服务端搭建

这里咱们采用node社区比较轻量的服务端框架Koa，而后服务端中间件有：java

ramda 函数式库，提供优雅的调用方式来实现业务逻辑，地址ramda
koa-static 提供静态资源访问，具体用途在项目实现细节里面会详细介绍
koa-logger 控制台输出请求日志，方便开发中进行调试
koa-body 处理请求报文，让koa能够方便的拿到post/put的数据
koa-session 处理session相关操做
koa2-cors 本地联调时经过cors方式处理跨域问题
ioredis 基于nodejs的redis客户端，性能和操做方式都很是优秀
jsonschema 校验json数据格式，这里我用来封装redis形式的schema
multer 用来处理文件上传
koa-router 用来编写服务端路由和api
bcrypt 对用户密码进行加密

上面就是咱们web服务端主要使用的中间件，对于每一块如何去组织和架构，包括本身实现错误校验中间件，我会在后面一一介绍，因为写服务端的过程当中也查阅了不少资料，若有不足或须要优化的地方，欢迎交流。node

服务端大体分为以下几层：react

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

2.后台管理系统

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

登陆模块： ios

主页模块：

预览页面：支持pc端移动端预览

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

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

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。后期将更详细的介绍系统的具体实现过程和细节以及服务器相关的配置，包括项目的开源地址我会在十一以前告诉你们，欢迎在公众号《趣谈前端》加入咱们一块儿讨论。