项目地址：https://github.com/Nealyang/R...我想等项目完成后，连载一系列的博客。随着开发的进行，确实遇到了很多坑，请教了很多人。然后我想，为什么不在记录陷阱的同时分享收获。分享固然好，但如果能集思广益岂不更美。我们的口号是：坚决不做不完。本博客将为连载代码博客同步更新博客。以后随着项目的发展，可能会遇到之前写的不合适的地方，回去修改。如有不妥之处~欢迎兄弟们指教。谢谢！后端说明是因为react中使用了react-router，也就是说前端是一个单页面应用。所以我们后端几乎可以忽略前端路由的配置。也就是说，我们不对浏览器的url地址所请求的页面做任何处理。但是你不去理会，当然不行。因为刷新的时候会报404.server.jsimportpathfrom'path'importExpressfrom'express'importconnectHistoryApiFallbackfrom'connect-history-api-fallback'constapp=newExpress();constport=config。port;app.use('/',Express.static(path.join(__dirname,"..",'build')));app.use('/',connectHistoryApiFallback());connect-history-api-fallback可以完全处理前端路由。那么Express.static就是我们项目中需要托管的静态资源文件。在API代理的情况下，后期不需要过多关心前端页面的路由，可以专心处理前端API请求。所以在这里，我想把前端页面服务器和处理API请求的服务器分开。也就是说，所有与API请求相关的部分，我都会另外架设一个服务器，在页面服务中充当代理，转发给另外一个API服务器。代码如下：importhttpProxyfrom'http-proxy'importconfigfrom'../config/config'constapp=newExpress();常量端口=配置端口；app.use('/api',(req,res)=>{proxy.web(req,res,{target:targetUrl})});consttargetUrl=`http://${config.apiHost}:${config.apiPort}`;constproxy=httpProxy.createProxyServer({target:targetUrl});通过上面的代码，当我访问/api时，HTTPProxy会将我的请求代理到targetUrl，也就是api服务器。在API服务器上，我们对数据库进行一些操作，对前端传来的数据进行操作。apiserverimportExpressfrom'express'importconfigfrom'../../config/config'importbodyParserfrom'body-parser'importmongoosefrom'mongoose'importcookieParserfrom'cookie-parser'importsessionfrom'express-session'constport=config.apiPort;constapp=newExpress();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('Database连接成功');app.listen(port,function(err){if(err){console.error('err:',err);}else{console.info(`===>api服务器运行在${config.apiHost}:${config.apiPort}`)}});});如代码所示，API服务器我们做了以下事情来使用express创建一个新的http服务器。路由器用于路由API请求。Mongoose用于连接到MongoDB数据库。bodyParse中间件用于解析post请求的请求体数据。关于express-session和cookie-parser，这篇免登录的博客后面会介绍。apiserverroutingexpress的路由很简单，其实和react的思想差不多。相当于对你的请求路径逐层过滤。比如我们上面的//显示页面路由app.use('/',require('./main'));//管理页面路由app.use('/admin',require('./admin'));那么现在我们看看admin和mainadmin.jsimportExpressfrom'express'constrouter=Express.Router();从'../../models/user'导入用户从'../util'router.get('/getUsers',(req,res)=>{跳过=(req.query.pageNum-1)<0?0:(req.query.pageNum-1)*10;让responseData={total:0,list:[]};User.count().then(count=>{responseData.total=count;User.find(null,'_id用户名类型密码',{skip:skip,limit:10}).then((result)=>{responseData.list=result;responseClient(res,200,0,'',responseData)}).catch(err=>{responseClient(res);})});});module.exports=路由器；上面代码中，我们使用express.Router生成了一个router对象，不要混淆，我们可以理解为这个router是一个express的实例和之前的/a没什么区别，用来启动appserver。同样监听一个请求参数，然后回调该函数。注意这个router.get('/getUsers')真正匹配到的完整请求路径是：/api/admin/getUsers上面代码中对数据库的操作我们暂时可以忽略。稍后会介绍。这里重点介绍后端路由的配置。总结一下后端的路由，就是我们应该如何设计/api/xxx请求后面的xxx，这个因人而异。怎么舒服怎么来。当然，在工作中必须要遵守一些团队约束，当然，这个demo，我只是随便来的。然后演示的后端提供两个服务。一种是前端页面服务。一个是API服务。所有的请求都统一到页面服务器。约束API请求的写入。当/api请求发送时，我们使用HTTPProxy代理到API服务器。/api请求后的数据库连接和后端路由控制都是在api服务器上完成的。项目实现步骤系列博客实战React技术栈+快递前端博客项目（0）——预热一波实战React技术栈+快递前端博客项目（一）——整体项目结构搭建、状态状态树设计实战react技术栈+快递前后端博客项目（二）——前端react-xxx、路由配置实战react技术栈+快递前后端博客项目（3）——后端路由、代理、静态资源托管等配置说明实战react技术栈+快递前后端博客项目（4）——博客首页代码编写及redux-saga组织实战react技术栈+快递前后端博客项目（5）——登录功能前后端实现实战react技术栈+快递前后端博客项目（6）——使用session实现免登录+管理后台权限验证实战react技术栈+速递前后端博客项目（七）——前端管理界面用户查看功能+后端对应界面开发实战react技术栈+express前后端博客项目（8）——前端管理接口标签管理功能+后端对应接口开发实践react技术栈+express前后端博客项目（9）——前端管理接口标签管理功能+后端对应接口开发实践react技术栈+速递前后端博客项目（10）——前端管理接口发布文章功能实战react技术栈+express前后端博客项目（11）——增删改查后台界面对应文章部分实战react技术栈+express前后端博客项目（12）)--发帖部分的前端改进（增删改查、分页等）实用react技术栈+express前后端博客项目（14）--内容详情页和页数的展示读物实战react技术栈+express前后端博客项目（15）——给博客添加评论功能及后端对应实现实战react技术栈+express前后端博客项目(16)--pm2说明实战react技术栈+快递前后端博客项目(17)--收工交流欢迎提issue。或者加群联系我~扫码关注我的个人微信公众号，直接回复，必有回复。分享更多原创文章。点击交流学习加我微信和qq群。一起学习，一起进步欢迎兄弟们加入：Node.js技术交流群：209530601React技术栈：398240621前端技术聊：604953717（新）
