react+koa实现登陆、聊天、留言板功能后台

最新推荐文章于 2024-11-24 17:52:36 发布

原创

最新推荐文章于 2024-11-24 17:52:36 发布 · 置顶 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

自己一直想做个包括前后端的项目，了解和熟悉一个网站从构建到部署整个流程。正好以前做过一个react的后台模板（纯前端）。另外在慕课网找了一个node项目学习后，开始自己做一个前后台项目。

所有权限都在后台做，比如非管理员不能添加和删除作品，如果仅靠前台禁用按钮，用户可以直在浏览器修改dom属性绕过禁用功能，所以前台只是起对不同权限用户展示不同UI的功能，而不是通过前台做权限功能。

想测试多个账号在线，请用不同的浏览器登陆

项目地址：github地址
预览地址：预览地址

在这里插入图片描述

前端使用的技术栈：react、react-router、redux、canvas、fetch、antd、websocket、es6

使用create-react-app脚手架搭建了前端项目并扩展了webpack的配置（配置可以参考这里）。
新增修饰器语法，这是ES7的一个新语法，作用就是修改组件的一些属性。比如路由的withRouter将组件包裹，可以在组件的props上传递history对象等等。

//不使用修饰器语法
withRouter(Test)

//使用修饰器语法
@withRouter
class Test extends React.Component{
   
   
	...
}

当有一个组件需要多个高阶组件包裹时，这种写法就很有优势

withRouter(Form.create()(Test))

@withRouter @Form.create() ...
class Test extends React.Component{
	...
}

当然包裹的顺序也很重要

自己根据需求封装了一个fetch来进行前后台通信，使用简单。

const res = await get('/test')
console.log(res)

公用组件应该完全隔离业务逻辑，我通过事件分发和props传递编写了以下组件，这些组件完全隔离了业务逻辑，所以在其它项目中也可以使用。

组件	组件的作用	组件接收的props
AnimatedBooks	展示翻书动画效果的组件	content(内容) 、cover(封面)
Bac

200万优质内容无限畅学