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

前端之家收集整理的这篇文章主要介绍了实战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上完成的。

项目实现步骤系列博客

交流

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

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


欢迎兄弟们加入:

Node.js技术交流群:209530601

React技术栈:398240621

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

原文链接:https://www.f2er.com/react/302634.html

猜你在找的React相关文章