实战react技术栈+express前后端博客项目3-- 后端路由、代理以及静态资源托管等配置说明

项目地址：https://github.com/Nealyang/R...

本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的，
如果能做到集思广益，那岂不是更美。我们的口号是：坚决不会烂尾

本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！

后端说明

因为react中使用了react-router，也就是说前端是一个单页面应用。所以我们后端几乎就可以不去考虑前端路由的配置了。也就是说浏览器的url地址请求的页面我们是不做任何处理的。
但是倘若不做忽略处理的话，当然是不实行的。因为当你刷新的时候，会报404.

server.js

import path from 'path'
import Express from 'express'
import connectHistoryApiFallback from 'connect-history-api-fallback'
const app = new Express();
const port = config.port;
app.use('/',Express.static(path.join(__dirname,"..",'build')));
app.use('/',connectHistoryApiFallback());

connect-history-api-fallback 即可完全处理完了前端的路由。然后Express.static就是我们项目中需要托管的静态资源文件。

API代理

这样的话，后段部分不需要怎么关心前端页面的路由了，而可以集中精力去处理前端的API请求。所以这里，我想把前端页面服务器和处理API请求的服务器分开。也就是说，所有关系到
API请求的部分，我再另起一个服务器，在页面服务中做一个代理，转发到另一个API server 上。
代码如下：

import httpProxy from 'http-proxy'
import config from '../config/config'

const app = new Express();
const port = config.port;

app.use('/api',(req,res)=>{
    proxy.web(req,res,{target:targetUrl})
});

const targetUrl = `http://${config.apiHost}:${config.apiPort}`;
const proxy = httpProxy.createProxyServer({
    target:targetUrl
});

如上代码，就可以做到当我访问/api的时候，HTTPProxy会将我的请求代理到targetUrl上，也就是api服务器。在API server 上我们做一些关于数据库的操作以及对前端传过来数据的操作。

api server

import Express from 'express'
import config from '../../config/config'
import bodyParser from 'body-parser'
import mongoose from 'mongoose'
import cookieParser from 'cookie-parser'
import session from 'express-session'

const port = config.apiPort;

const app = new Express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser('express_react_cookie'));
app.use(session({
    secret:'express_react_cookie',resave: true,saveUninitialized:true,cookie: {maxAge: 60 * 1000 * 30}//过期时间
}));


//展示页面路由
app.use('/',require('./main'));
//管理页面路由
app.use('/admin',require('./admin'));

mongoose.Promise = require('bluebird');
mongoose.connect(`mongodb://${config.dbHost}:${config.dbPort}/blog`,function (err) {
    if (err) {
        console.log(err,"数据库连接失败");
        return;
    }
    console.log('数据库连接成功');

    app.listen(port,function (err) {
        if (err) {
            console.error('err:',err);
        } else {
            console.info(`===> api server is running at ${config.apiHost}:${config.apiPort}`)
        }
    });
});

如代码所示，API server 我们做了如下几件事

• 新起一个http server
• 使用express.router来路由API请求的路由
• 使用 mongoose 来连接 MongoDB 数据库
• 使用 bodyParse 中间件来解析post请求的请求体数据。

关于express-session和cookie-parser这个后面关于免登陆的博客会介绍到。

api server 路由

express的路由非常的简单，其实和react思想都是差不多的。就相当于对你请求路径的一层层筛选过滤。

比如我们上面的

//展示页面路由
app.use('/',require('./main'));
    //管理页面路由
app.use('/admin',require('./admin'));

那么现在让我们看看admin 和 main 中到底写了些什么

admin.js

import Express from 'express'
const router = Express.Router();
import User from '../../models/user'
import {responseClient,md5,MD5_SUFFIX} from '../util'

router.get('/getUsers',res)=>{
    let skip =(req.query.pageNum-1)<0?0:(req.query.pageNum-1)*10;
    let responseData = {
        total:0,list:[]
    };
    User.count()
        .then(count=>{
            responseData.total = count;
            User.find(null,'_id username type password',{skip:skip,limit:10})
                .then((result)=>{
                responseData.list = result;
                    responseClient(res,200,'',responseData)
                })
                .catch(err=>{
                    responseClient(res);
                })
        });
});

module.exports = router;

如上代码，我们使用express.Router来产生一个router对象，别迷糊，我们完全可以理解为这个router就是一个express的实例。跟前面的/a启动app server没有任何两样。同样的监听一个请求参数，然后回调函数。

注意这个router.get('/getUsers')真正匹配的完整请求路径是：/api/admin/getUsers

上面代码中的对数据库的操作我们可以暂时不要理会。后续会介绍。这里重点关注在后端路由的配置上。

总结

关于后端的路由，也就是/api/xxx请求后面的xxx我们该如何设计，这个因人而异。自己怎么舒服怎么来。当然，工作中得遵守一些团队约束是当然，这个demo，我就随意来了。

然后该demo的后端服务起的两个服务。一个是前端页面服务。一个是API服务。所有的请求统一到页面 server 中。约束api请求的写法。当为/api请求发来时，我们则通过HTTPProxy来代理到API server上。

数据库的连接、/api 请求后的后端路由控制，都是在api server上完成的。

项目实现步骤系列博客

• 实战react技术栈+express前后端博客项目（0）-- 预热一波
• 实战react技术栈+express前后端博客项目（1）-- 整体项目结构搭建、state状态树设计
• 实战react技术栈+express前后端博客项目（2）-- 前端react-xxx、路由配置
• 实战react技术栈+express前后端博客项目（3）-- 后端路由、代理以及静态资源托管等其他配置说明
• 实战react技术栈+express前后端博客项目（4）-- 博客首页代码编写以及redux-saga组织
• 实战react技术栈+express前后端博客项目（5）-- 前后端实现登录功能
• 实战react技术栈+express前后端博客项目（6）-- 使用session实现免登陆+管理后台权限验证
• 实战react技术栈+express前后端博客项目（7）-- 前端管理界面用户查看功能+后端对应接口开发
• 实战react技术栈+express前后端博客项目（8）-- 前端管理界面标签管理功能+后端对应接口开发
• 实战react技术栈+express前后端博客项目（9）-- 前端管理界面标签管理功能+后端对应接口开发
• 实战react技术栈+express前后端博客项目（10）-- 前端管理界面发表文章功能
• 实战react技术栈+express前后端博客项目（11）-- 后端接口对应文章部分的增删改查
• 实战react技术栈+express前后端博客项目（12）-- 前端对于发文部分的完善（增删改查、分页等）
• 实战react技术栈+express前后端博客项目（13）-- 前端对于发文部分的完善（增删改查等）
• 实战react技术栈+express前后端博客项目（14）-- 内容详情页以及阅读数的展示
• 实战react技术栈+express前后端博客项目（15）-- 博客添加评论功能以及对应后端实现
• 实战react技术栈+express前后端博客项目（16）-- pm2 的使用说明
• 实战react技术栈+express前后端博客项目（17）-- 收工

交流

倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~

扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习，一起进步

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

前端技术杂谈：604953717 (新建)