基于React+Mobx类知乎文章方面的单页应用

前言

前几个月学完React官方文档教程后准备写一个博客项目来实践学习成果，写完时总以为博客项目太简单又烂大街，决定把原来的博客项目改造升级成类知乎文章方面功能的项目。

项目详细架构和源码地址：github.com/manyuewuxin…

实现功能

• [x] 登陆注册
• [x] 建立文章
• [x] 关注标签
• [x] 文章过滤
• [x] 文章排序
• [x] 文章搜索
• [x] 用户设置
• [x] 用户消息
• [x] 用户动态
• [x] 关注用户
• [x] 收藏文章
• [x] 评论文章
• [x] 我的主页
• [x] 后台管理系统等

部分效果预览

我的主页、用户设置和标签展现UI设计是模仿掘金社区UI的

后台管理系统

项目说明

项目比较杂，只挑重点的说。

前端项目

1. 登陆接口有两种，一种是用react-router路由驱动，好比/login跳转至登陆页，另外一种是在Mobx全局建立一个可观察的login对象，若是是没有登陆状态在首页点赞、收藏、回复评论等向后端请求会返回一个403状态码触发可观察login对象弹出登陆模态框。

2. 用户的消息系统实现思路其实很简单，当向一个用户回复文章、回复评论、关注时获取这个被回复的用户user_id向后端mongodb的关联message集合插入一个消息文档，被回复的用户在首次登陆状态或跳转路由就会刷新消息请求，没有使用任何高大上的消息队列库，缓存数据库redis等。用户的动态设计思路大体和用户消息同样，只不过不须要像用户消息插入被回复用户的关联message集合，而是进入这个用户我的主页时向关联dynamic集合获取动态数据。

3. 建立文章富文本编辑器使用了国人开发的wangeditor轻量级富文本编辑器，只要不是要求企业级别的标准，这个富文本编辑器基本能够知足平常编写文章。

4. 首页的文章排序没有使用任何算法，纯粹只使用了mongodb的索引排序，根据点击阅读量和喜欢次数多键索引排序，若是是登陆状态那么就使用关注标签+点击量+建立日期排序。

5. 前端项目的状态管理是使用Mobx和局部state混合管理，由于有些组件的状态是一个区域闭环，每次从新打开须要初始化某个状态，因此不所有写入到Mobx。

6. 整个axios请求配置和统一处理请求错误写在request中间件模块，省去了一个请求写一个错误处理。

后端项目

1. 后端router模块不是经常使用那种多个一二级路由组成一个路由模块写法，而是利用fs模块在编译运行阶段扫描controller目录控制器模块所有导入express-router加载路由，实现路由自动化加载，详细实现思路能够看知乎方正这个Nodejs：摆脱黑工坊发展出一款基础企业级框架文章。

2. mongodb驱动库是原生nodejs驱动库，不是mongoose，由于刚写后端时并不知道有这个超集框架，加上原生驱动库也有models API，且大部分实现逻辑都是CRUD，索性直接用原生驱动库。

3. mongodb的用户数据建模都是标准化数据模型一对多，使用$lookup操做符关联查询，这样设计集合方便查询和分离文档储存空间，如上用户消息关联集合所示。

后台管理系统项目

后台管理系统使用了蚂蚁金服的antd UI组件和chartjs图表库，目先后台管理系统是一个半成品，只实现了审核文章，图表，注册，标签管理组件，其余路由组件待扩展更改。

后话

这个项目是我第一次写全栈开发，可能由于经验不足有些实现思路不是好的解决思路，若是有怎么建议能够在评论回复或issue。

本项目仅我的开发练习，不做为任何商业用途