1.传统的web开发方法这种方法开发和配置有点复杂。这里先说说从零开始的配置方式：1.从零开始配置//引入expressconstexpress=require('express');constapp=express();//定义一个路由app.get('/',(req,res)=>{//发送响应消息for/routeres.send('HelloWorld!');})//打开http服务，监听8080app.listen(8080);这是官方的标准示例，从头开始看起来很简单，但也是最没用的，因为你不能用这些代码做任何事。我们缺少一件事，那就是HTML。这是怎么发生的？有两种方法。第一个：res.send('

我是h1标签

');因为html也是一个字符串，所以我们可以在响应报文中写上html，这样也可以开发一个网站。但是我们不会这样做，因为开发起来太不方便了，所以我们有第二种方法：使用模板引擎。模板引擎是一种将您编写的类html代码转换为标准html代码的工具。模板引擎有很多种，目的相同，写法不同。唯一不变的是，每个作者都认为自己开发的模板引擎是最好的。作为一个吃瓜群众，不懂，也不敢问。不用翻看，这个链接就是14个js模板引擎介绍：js模板引擎介绍使用模板引擎也很简单，有两种方法，一种是使用官方提供的框架生成工具通过ExpressJs：express-生成器。安装express-generator$yarnglobaladdexpress-generator//或$npmi-gexpress-generatoruse#使用默认模板$expressmy-app#使用帮助命令查看支持哪些模板$express-h#使用pug模板$express-vpugmy-app执行后会生成一个包含模板引擎配置的框架。另一种是express-generator工具中没有集成的模板引擎，需要看说明书自己配置。比如我要用React模板，只能看文档配置。前后端分离开发习惯的改变如果你长期从事前后端分离开发，回到最初的web开发可能会有些不适应。例如：//pugtemplatesyntaxbutton(class='div-class',onclick='play()')button如果要执行onclick中的play函数，public目录下必须有一个js文件，可以在浏览器中运行，然后导入：script(src='/javascripts/index.js')因为模板引擎只是帮你把模板转换成html字符串发送给浏览器。传统开发方式总结自从接触了前后端分离的开发方式，再看看这种传统的web开发，感觉开发起来很费力，因为你要用一个模板引擎，使您的工作看起来更轻松。我想随着时间的推移这种开发方式会逐渐被淘汰。2、前后端分离的开发方式。研究了express传统的开发方式后，放弃了。还是要回到前后端分离的开发方式。开发方式还是有点区别的。1、完全分离：纯前端+纯后端express作为后端服务，提供api接口。前端负责html页面的开发和界面调整。所以就会有两个服务：前端服务和后端服务。这是目前最主流的开发方式，就不过多介绍了。2、不完全分离是指前端依赖后端服务express作为后端服务，同时负责渲染前端页面作为静态服务。我觉得这样更有趣。前端页面开发完成后，打包生成前端资源（html、js、css等），放到后端express的static目录下，假设是公共目录：public/js/css/index.htmlapp.jsinapp.js:constexpress=require('express');constapp=express();//使用express.static中间件处理静态资源app.use(express.static(path.join(__dirname,'public')));app.listen(8080);就是这样，如果你的前端页面是用React、Vue或Angular开发的，那么你就不需要设置任何路由。这个方法有点像nginx静态服务。如果需要api，需要设置路由。假设我们把/api/开头的路径当作接口服务：//使用专用的api路由来处理api请求app.use('/api/',require('./routes/api.js'));api.js文件:varexpress=require('express');varrouter=express.Router();///api/user-listinterfacerouter.post('/user-list',function(req,res,next){//接口逻辑res.send('user');});module.exports=路由器；在启动前端服务的时候，可以请求你自定义的接口，这是典型的前端依赖后端服务的开发方式。接下来，让我们拓展一下思路。在开发前端页面时，我们通常会启动一个前端开发服务，比如使用webpack-dev-server。那么在启动这个服务的时候，如果想使用一些mock库来模拟接口生成一些模拟数据怎么办呢？有一种方法。因为webpack-dev-server也使用了express，所以可以使用中间件来完成。仍然有两种方法。第一种比较简单，适用于接口不多的情况：//使用app.postdevServer:{before:function(app,server){//请求/api/mock返回自定义数据app.post('/api/mock',function(req,res){res.json({custom:'response'});});}}第二种稍微高级一些，适合接口比较多的情况：constmockMiddleware=require('./mock-middleware');//使用app.usedevServer:{before:function(app,server){//拦截所有以/api开头的请求，并转发给mockMiddleware进一步处理app.use('/api',mockMiddleware);}}//mock-middleware.jsconstexpress=require('express');constrouter=express.Router();//响应/api/mock请求router.post('/mock',function(req,res,next){res.json({data:{name:123,sex:1,}})})module.exports=路由器;在启用前端服务的同时，您还可以请求模拟数据。我们也可以让它更高级一点，比如我们只需要编写mock配置，其他工具会完成剩下的工作：//mock配置文件module.exports={'POST/api/user-list':[{name:'张三',age:13,},{name:'李四',age:12,}],'POST/api/user/123':{//...}}我们只需要在专门存放mock的地方配置mock数据。其他工具会先对这些数据进行预解析，最后生成app.post等配置。目前网上有这样的工具，比如：强大看了上面UmiJS的介绍，你是不是已经了解并选择express开发web的方式了？如果我的文章中有任何描述不清楚的地方，请指出，我会继续优化，在此先感谢您。