实战react技术栈+express前后端博客项目（3）-- 后端路由、代理
|
项目地址：https://github.com/Nealyang/R...
本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！ 后端说明因为react中使用了react-router，也就是说前端是一个单页面应用。所以我们后端几乎就可以不去考虑前端路由的配置了。也就是说浏览器的url地址请求的页面我们是不做任何处理的。 server.jsimport 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请求的服务器分开。也就是说，所有关系到 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 serverimport 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 我们做了如下几件事
关于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 (新建) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |