教你用三天时间撸个论坛（react+egg.js包括上线）-CSDN博客

引言

论坛系统也是一个很经典的系统了，很多人大学的时候估计也写过，但是三天就能从开写到部署上线这是以前怎么也不敢想的，得益于现代前端工作流和一些优秀开源框架，让这成为可能。能很快看到自己写的东西部署在网上，相信带来的成就感也是推动很多人持续学习的动力吧。

需要用到的

前端：react、react-redux、antd、axios、stylus

后端：egg.js

数据库相关：mysql、sequelize

其他：postman、jwt、Nginx、七牛云等...

目录结构

client + service ，前端主要看src下，后端主要看app下

前端

样式部分

我这里前端部分没有采用create-react-app脚手架搭建，是自己用webpack搭建的，对webpack不熟的同学建议直接用官方脚手架。因为这个项目只用了三天，所以样式大部分使用antd，种类多，啥组件都有，又好看（强势安利一波）。

数据管理

数据管理用的是redux，目前来说主要是用户登录后的个人信息管理。建立了store文件夹来放置actions和reducers。建立一个全局的store树，以后哪个组件需要用户信息只需要connect一下就可以直接从store里面拿数据了。但是修改的话就需要dispatch一个action，这样就保证了数据的统一性。

数据请求

请求数据用的是axios，先axios.create()创建一个实例，然后在实例上配置了interceptors拦截器，对返回的结果进行拦截处理。

  const instance = axios.create({
  xsrfCookieName: 'xsrf-name',
  baseURL: baseDomain
});

instance.interceptors.response.use(function(response) {
  if (response.data.success) {
    return Promise.resolve(response.data)
  } else {
    notification['error']({
      message: response.data.message
    });
    return Promise.reject({
      message: response.data.message
    })
  }
}, function(error) {
  try {
    notification['error']({
      message: error.response.data.message || '系统异常'
    })
    console.log(error.response.status)
    if (error.response.status === 401) {
      setTimeout(() => {
        window.location.href = '/login';
      }, 2000);
    }
  } catch(e) {
    notification['error']({
      message: '系统异常, 请稍后再试！'
    })
  }
  return Promise.reject({
    messageCode: 'sysError'
  })
})
复制代码

tips: 开发时跨域是通过devserver 转发请求实现的。

后端

项目搭建直接用官方脚手架egg-init egg-example --type=simple。一般在实际应用中，Controller 一般不会自己产出数据，也不会包含复杂的逻辑，复杂的过程应抽象为业务逻辑层Service，所以我们主要的业务逻辑还是在service里面完成，然后把结果返回给controller就可以了。详细的CRUD就不具体说了，这里说几个关键点。

context的拓展

框架会把 app/extend/context.js中定义的对象与Context的prototype对象进行合并，在处理请求时会基于扩展后的 prototype 生成 ctx 对象。我们可以在这里获得一些数据，比如说在这里获取token里解析出的userId，这样就只需获取一次，之后可以用缓存，提升了性能。或者还可已在这里封装一些函数，比如把原生的this.staus,this.body一起封装成一个returnBody。

  returnBody (status, message, data = {}) {
    this.status = status;
    this.body = {
      data,
      message,
      success: true
    }
  }
复制代码

中间件

可以在middleware里面写一些自定义的中间件，比如我这个项目中用到的鉴权中间件。然后在app/config.default.js里加上一行config.middleware = [ 'authorization' ];就可以使用了，是不是十分方便呢？

数据库

数据库的话我们可以采用一些ORM工具来操作。比如sequelize,一款优秀的异步ORM框架，让我们可以用OOP的方式操作数据库，优雅的生成安全、可维护的SQL代码。使用的话也是非常的简单，值得注意的是我们最好在初始化之前配置一下，让自动生成的文件都在database目录下，便于管理。

sequelize开发环境配置：

  "development": {
  "username": "root",// mysql账户
  "password": "yourpassword",// mysql密码
  "database": "newbeeForum",// 数据库名字
  "port": 3306,
  "host": "127.0.0.1",
  "dialect": "mysql"
}
复制代码

发帖

发帖的图片是先上传到七牛云，然后返回链接，数据库里只保存了链接。具体操作可以参见七牛云开发者文档。

JavaScript SDK: developer.qiniu.com/kodo/sdk/12… Node.js SDK: developer.qiniu.com/kodo/sdk/12…

jwt

登录的话我们采用jwt来进行跨域身份验证，登录成功后会签发一个token,并把这个token种到cookie里面，鉴权中间件就是通过这个token来鉴别用户是否有权限访问页面。

签发token： const token = jwt.sign({ userId: existUser.userId }, this.app.config.jwtSecret, { expiresIn: '7d' });

密码保存

明文保存用户密码是不道德的，所以我采用了crypto来加密保存用户密码，登录的时候也是先将明文密码加密再与数据库中比对，相同才允许登录。

加密保存用户密码：user.password = crypto.createHmac('sha256', this.app.config.password_secret) .update(user.password) .digest('hex');

部署上线

部署条件：服务器安装node 8.0以上版本，安装mysql，安装Nginx

我的是腾讯云的服务器，系统是centos7。前端npm run bulid，把打包后的项目放到服务器上，比如/home/newbeeforum下，然后后端项目npm install --production,这样就只安装dependencies的依赖，然后tar -zcvf ../release.tgz,放到服务器上解压缩后npm start，就可以运行了。最后在配置一下Nginx的转发请求就可以实现跨域了。

转发请求：

``` 
    //如果只是host、端口转换
    location /project {
    proxy_pass   http://127.0.0.1:8080/project;
}
    //如果路径也变化了，则需要设置cookie的路径转换,否则cookie会丢失  
    location /proxy_path {
    proxy_pass   http://127.0.0.1:8080/project;
}
```
复制代码