专栏首页趣谈前端基于nodeJS从0到1实现一个CMS全栈项目(上)

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

作为一名前端开发工程师,我们平时除了对javascript,css,html的积累之外,还需要对http,浏览器渲染原理甚至后端的一些知识有所了解,这样对自己职业发展才会更有帮助。

项目背景

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

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

技术架构

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

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

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

(本图使用adobeXD绘制,更多技巧多交流哈)

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

1.node服务端搭建

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

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

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

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

2.后台管理系统

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

登录模块:

主页模块:

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

趣谈前端

Vue、React、小程序、Node

前端 算法|性能|架构|安全

本文分享自微信公众号 - 趣谈前端(beautifulFront),作者:徐小夕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《前端5分钟》之使用纯css实现网站换肤和焦点图切换动画

    今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站.

    徐小夕
  • 《前端5分钟》之使用pace.js美化你的网站加载进度条

    最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结。

    徐小夕
  • 基于create-react-app打包编译自己的第三方UI组件库

    这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件,并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快...

    徐小夕
  • 小程序示例 - 不同页面间的消息传递

    场景 假设有两个页面:用户列表页、信息编辑页 在列表中点击后某条信息后,进入编辑页面 ? 修改了用户信息后,返回到列表页,列表中需要显示修改后的信息 例如把 “...

    dys
  • TypeError: can only concatenate list (not "int") to list

    于小勇
  • Python编程常见出错信息及原因分析(2)

    (1)缩进错误 演示代码: >>> if 5>3: print('5>3') SyntaxError: expected an indented block >...

    Python小屋屋主
  • 钱云攀:一个街舞男孩的编程梦!

    今天为大家介绍的是一位老朋友,小编与他相识两年多了,2年,可能是一个不算太奢侈的数字。风风雨雨,时间与距离依旧没有把我们吹散。今天,跟着小编一起走进他的故事,也...

    企鹅号小编
  • MyBatis源码解读(1)——SqlSessionFactory

    在前面对MyBatis稍微有点了解过后,现在来对MyBatis的源码试着解读一下,并不是解析,暂时定为解读。所有对MyBatis解读均是基于MyBatis-3....

    用户1148394
  • 年度最热!好看到颤抖!腾讯设计周重磅来袭

    ? ? ? ? ? ? ? ? ? ? ---- ♥ TDW  X  腾讯大讲堂 有礼♥ 点击阅读原文跳转活动页 留言点赞数最高的4位小伙伴 将获得将分别获得...

    腾讯大讲堂
  • 令人激动的silverlight 3行为(behavior)效果

    令人激动的silverlight 3行为(behaviors)效果 Mix09大会带来了很多的惊喜。 看完了http://videos.visitmix.com...

    用户1172164

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动