实战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',(req,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,0,'',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 (新建)