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