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

引言

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

须要用到的

前端：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;
}
```
复制代码

tips: 若是react前端部署上去是一片白的话多是路径的问题，要注意是相对路径仍是绝对路径。

最后

• 源码点我
• 由于只写了三天，因此目前只实现了登录注册，发帖的基本功能，后续能够慢慢完善
• 部署在我网站上，能够体验一下 newbeeforum.newbeelity.cn（注册验证码乱填就行）
• 码字不易，欢迎star
• 有大佬招前端吗，目前大四
• over