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

·  阅读 2917

引言

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

需要用到的

前端: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
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改