基于 CNode 的二次开发 在线地址
-
前端
- React
- React-Router
- Redux
- antd
-
后端
- express
- mongodb
- nginx
请到 https://github.com/Maxlasting/project-CNode/tree/dev 查看
个人时间和精力有限,所以只实现了大部分功能
- 后台数据接口代理
- 登陆注册接口配合session存储mongodb
- 登陆拦截
- 首页话题列表展示和类别切换
- 话题详情页的数据渲染
- 话题收藏和回复功能
- 发表新话题,使用md格式
- 话题回复数据渲染
- 登陆和注册功能
- 个人中心信息展示和跳转详情页面
- 404页面
- 回到顶部
- 话题编辑
- 话题删除
- 评论点赞
- 服务端渲染
1 CNode 不提供登陆注册接口,只有对应的accesstoken,所以无法直接开发注册登陆页面。
解决办法:
现在自己开发一套登陆注册接口,然后将数据存储到mongodb中,但是注册的时候,需要用户自行填写CNode官网注册时候提供的 accesstoken,这样就最大化模拟了注册登陆功能。同时在用户登陆的时候将用户信息存储到 session 中,并链接数据库,保存登陆状态,在退出登陆的时候 删除对应的 session 数据就可以。
期间遇到了很多问题,比如 session 如何使用,如何链接 mongodb,经过一些列的百度搜索得到解决。
2 在代理CNode的接口的时候,有一部分接口需要登陆状态,所以无法统一处理。
解决办法:
自定义一个查询参数 needtoken, 然后通过判断 req.body 里面的这个属性的值,来使用不同的逻辑进行处理。
3 在处理复杂的数据操作的时候,mongoose 使用的是 Promise,会存在大量的回调函数,不容易维护。
解决办法:
使用 async/await 来改造 Promise,部分代码:点击查看
4 React 并没有比较好用的 markdown 组件。
解决办法:
通过在npmjs.com上查找了大量的组件,分别进行测试,期间也想过自己开发过,不过经过一天的研究最终还是放弃了,成本过高,最终选用了mditor,不过这个东东并没有react版本的,并且引入到组件中的是服务端渲染的函数。而且其中的样式有一部分被eslint报错。最后通过手动引入mditor包和样式,同时修改了部分样式和代码,然后挂载到window对象下,之后通过refs进行使用的。
5 redux 状态管理的一些问题。
在使用redux管理各个页面的状态的时候,开始把每个页面的状态都放到redux中了,后来发现其实这样做并不好。其实只需要把很多页面都用到的公共状态进行管理就ok了。并不需要每个组件都使用redux,同时也发现随着需求的增加,那么 reducer 会越来越复杂,而且每次dispatch一个action的时候都会触发所有子组件的更新。考虑过换换口味,比如mobx,可能性能会更好。以后有机会吧...
6 使用nginx代理nodejs服务和针对react项目的配置。
解决办法:
经过百度一些文章和博客,其实配置挺简单的,在涉及到路由的时候,无论用户请求什么地址都返回 index.html 就可以了。 主要使用 try_files 。 对于nodejs服务代理,使用 proxy_pass 就可以搞定。
不过对于react打包的时候,要做一些处理,更改路由的 basename 为项目在服务器上的路径名称。
还有很多问题,但是很容易解决,不一一列出了。
经过前前后后大半个月的业余时间终于完成了这个稍微有些复杂的项目,虽然只是出于教学案例目的,不过感受有很多。
比如对react的使用更加熟悉了、更加了解了redux的实际使用、加强了自己对一些问题的解决效率。在处理后台程序的时候,可以明显发现自己nodejs的基础不足,虽然对常用的api都很熟悉,但是缺乏实际使用的经验。也感受到了express所带来的方便快捷的体验,不过个人内心还是很清楚的,express不是一直用的来的,最好可以用原生的node去写自己的服务才是硬道理,不过在之后打算先看看koa。
有一些收获是文字无法表达的,只有你实际经历过才能深刻体会。记得努力!