react博客项目（二）—— 连接数据库、实现跨域

目标效果

1.前后端分离

2.跨域问题使用nginx反代处理，不使用其他方案

3.数据库使用mongo，正确处理表之间的关系

4.功能包含： 1）博客CURD，正文支持富文本 2）评论CURD，评论无需注册，提交评论时同时提交邮箱即可 3）分类CURD，与文章为1对多的关系 4）标签CURD，与文章为多对多的关系 5）源站上的各类统计数据及标签云 6）以上所涉及写操作须管理员登入后执行

5.尽最大可能考虑安全性问题，可涉及开发与运维2个方面

实际工作

1.该部分需要连接数据库，发送PSOT请求传递参数时不再使用类组件，改为函数式组件，快速生成的方式为: rrf。此外：路由组件一般放在pages下面页面组件放在components中。

2.数据库设计采用mongodb, 可视化软件为Robo3T。后端采用的是egg框架进行搭建，先建好文件夹，在文件夹中使用命令，创建好项目。

npm i egg-init -g
egg-init --type=simple
npm run dev

3.前端部分多出一个后端管理员界面。登录处利用登录时获取的时间戳作为唯一验证，采用session进行缓存确保后续操作保持登录状态。在后端中设置路由守卫，在router部分进行引入，此处借鉴了技术胖的教程（B站视频和技术胖博客）。路由守卫以及和接口相关的代码如下。

module.exports = options => {
    return async function adminauth(ctx, next) {
        console.log(ctx.session.openId)
        if (ctx.session.openId) {
            await next()
        } else {
            ctx.body = { data: '没有登录' }
        }
    }
}

    var adminauth = app.middleware.adminauth()  //设置路由守卫

    //接口命名规范
    router.get('/admin/index', adminauth, controller.admin.main.index)
    router.post('/admin/checkLogin', controller.admin.main.checkLogin)
    router.get('/admin/getTypeInfo', adminauth, controller.admin.main.getTypeInfo)
    router.post('/admin/addArticle', adminauth, controller.admin.main.addArticle)

4.整体上采用nginx跨域，开设了80和81两个端口，后面default为普通用户所有请求路径，admin下为管理员所有的请求路径。以下为具体跨域配置以及nginx启动常用命令。

server {
        listen       81;
        server_name  111;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            proxy_pass http://127.0.0.1:3001;
       }

        location /admin/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:7001/admin/;
        }
}

server {
        listen       80;
        server_name  11;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://127.0.0.1:3000;
       }
      location /default/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:7001/default/;
        }
}

 查看Nginx的版本号：nginx -V
 启动Nginx：start nginx
 快速停止或关闭Nginx：nginx -s stop
 正常停止或关闭Nginx：nginx -s quit
 配置文件修改重装载命令：nginx -s reload

5.前端所有数据均从数据库中获取，管理员能够在登录后对博客进行增删改查。以下为连接数据库和查询文章内容列表的部分代码，其后为管理员界面具体效果图。

  // react_blog 为 mongodb 数据库
  config.mongoose = {
    url: 'mongodb://127.0.0.1:27017/react_blog'
  };

  //得到所有文章列表
    async getArticleList() {
        const resList = await this.ctx.model.Article.find().sort({ addTime: -1 });
        this.ctx.body = resList;
    }

 

 

存在的问题

1.富文本的展示效果不好

2.数据库的处理 （类似于外键的操作、表与表之间的关系、模糊查询），只实现了博客的增删改查，且是查询所有内容。评论、标签云等内容没有实现。

3.页面组件的合理拆分、路由。部分页面设计不够合理，例如Life和Skill对应的页面有大量重复代码，需要用路由合理解决。管理部分做到了优化，但借鉴的是技术胖的代码，此处的router为v5版本，与v6版本仍有部分出入。