CMS全栈开发之路总结

企业级CMS全栈开发之路总结

本项目是学习B站Up主“你单排吧”、前端讲师赵文贤的，如果想学习的朋友，可以去b站看看。

通过这个项目，我掌握前端全栈技能。由于自己由后端从node.js开始接触前端不多，希望通过这次总结，对自己本来node服务端技术进行巩固，再深入了解前端技术，增长自身能力，最好可以逐渐将项目完善，优化。

技术架构

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

• 服务端：Node、Koa2、MySQL (v5.7)、Git、Linux、Nginx、云服务器购买与部署
• 管理后台：React (17)、react-router-dom (v6)、React Redux、React Hook、TypeScript、Ant Design、Git
• 前台页面：Nuxt、SEO、ElementUI、Git
• 部署上线：pm2 + nginx
• 代码管理： git

技术架构图：

1.CMS后台管理系统创建

本项目采用React+Ant Design+TypeScript开发，React主要使用Function Component的形式做开发，结合路由与请求实现。

主要模块有登录模块，注册模块，文章编写修改模块，修改资料模块，管理员权限模块等，第三方UI采用antd，效果如下：

登录模块：

注册模块：

主页模块：

文章编写修改模块：

修改资料模块：

管理员权限模块：

文章编辑这块用的wangeditor，你也可以采用其他更优秀的富文本编辑器实现跟强大的功能。效果图如下：

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

2.node服务端搭建

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

• “jsonwebtoken”: Json web token (JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。注册必然要产生token，这是用户的登录凭证。

• “koa-bodyparser”:Koa获取请求体的方式处理请求报文，让koa可以方便的拿到post/put的数据

• “koa-router”:用来编写服务端路由和api

• “koa-static”: 提供静态资源访问

• “koa2-cors”: 本地联调时通过cors方式处理跨域问题

• “moment”: 格式化时间

• “mysql”: 连接数据库

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

3.CMS前台实现

前台实现我主要采用vue相关生态去实现，Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发**服务端渲染（SSR）**的应用所需要的各种配置。

流程图

SSR的优点

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。

用到的技术主要有：vue，nuxt，element-ui，antd，axios，moment，vue-server-renderer，vue-template-compiler。

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

Nuxt可以在asyncData和created中做axios请求。但在created中做请求，渲染出来的数据不会出现在html中，导致无法实现SEO优化，而使用asyncData做请求，则html会被渲染出来，从而实现SSR。

页面

首页：

文章列表页：

文章内容页

4.服务器选配、Linux与Nginx

1.服务器选配

直接上 aliyun.com (opens new window)购买一台服务器

2.SSH 上传/下载文件

SSH 可以通过 scp 命令来上传文件，是 Linux 系统下基于 SSH 登陆进行安全的远程文件拷贝命令，scp 是 secure copy 的简写，可以使用它上传本地文件夹到远程服务器，也可以从远程服务器上下载文件夹到本地：

3.FTP上传

你也可以使用ftp工具上传，如 File Zilla (opens new window)。点击即可下载。

4.ssh长连接

ssh连接服务器每隔一小段时间没响应就会自动断开，这是因为sshd_config的配置影响了。

5.Nginx

Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。

6.反向代理解决跨域

反向代理是工作中最常用的服务器功能，经常被用来解决跨域问题

5.SSR渲染与线上部署

1、上传与安装依赖

上传项目并安装项目依赖

先将你的项目（除了 node_modules）放到服务器指定的位置

2、pm2部署

先解释一下什么是pm2：

简单点说就是让你不需要像执行 node app.js 一样，必须一直保持终端开启，而是可以在你退出命令行界面时，依然将你的项目运行着。

3、MySQL线上配置

目前我们只能访问根路径，因为其他路径基本都需要请求并访问数据库读取数据。因此我们需要把电脑本机的数据库搬运到服务器上。

最后

本文只作大概的介绍与开发流程的介绍，具体技术后续在补充。