前端开发如何做好本地界面模拟我之前写过一篇文章本地化界面模拟，前后端并行开发，讲了局部界面模拟，但是讲得不是很详细。这次详细说一下本地界面模拟。1.有什么好处？本地接口模拟最大的好处就是可以将前后端工程解耦。前端可以更专注于开发，减少在线调试，从而提高开发效率。2、途径有哪些？本地界面模拟一般分为工具级和代码级。3、工具级别就工具级别而言，一般是项目的构建工具所提供的功能。比如我们在使用webpack-dev-server、webpack-dev-middleware+browser-sync等工具时，可以在工具中添加本地界面模拟功能。注意：这里不解释webpack-dev-server、webpack-dev-middleware+browser-sync等工具的用法，有需要的可以自行了解。下面以webpack-dev-server为例进行说明，其他工具类似。3.1静态文件最简单，我们可以使用静态json文件作为本地接口模拟函数。|--/#项目根目录|--mock/#模拟数据目录（可自定义）|--1.json|--2.json|--...|--...#然后是其他文件使用webpack-dev-server以项目根目录为基址开始本地开发调试，在页面中可以这样访问：fetch('/mock/1.json');//访问1.jsonfetch('/mock/2.json');//访问2.json#fetch可以换成其他请求方式。该方法可以访问项目中的所有文件，不仅是json文件，其他文本如html、js、css文件，图片等二进制文件也可以访问。另外，只要文件有更新，刷新浏览器页面即可再次获取新文件，无需缓存。因为本地接口模拟函数主要针对返回值为json格式的异步请求，所以该方法主要使用json文件。这种方法最简单，最快，使用起来也最简单。3.2动态注册界面使用静态文件作为本地界面模拟功能。主要有以下问题：静态文件只能通过get方法访问。输入数据是静态的，不能进行计算、循环、判断等，不能根据请求参数做差异。响应的本地接口名和服务器上的接口名不一样，比较麻烦。每次上线服务器，都要改接口名。因此，在大多数情况下，动态注册接口将用于本地接口模拟功能。.这种方式就是用js文件写一系列路由=>响应映射，然后将定义好的接口动态注册到工具实例中。目录结构：|--/#项目根目录|--mock/#模拟数据目录（可自定义）|--user.js|--home.js|--...|--...#其他文件示例mock文件写法（可以自定义规范，以下只是演示）：#mock/user.jsmodule.exports={'GET/user/profile':{...},//直接返回一个object'POST/user/update':(req,res)=>{...},//根据`req,res`自定义响应...};#mock/home.jsconstmockjs=require('mockjs');module.exports={'GET/home/list':mockjs.mock({//使用mockjs帮助生成假数据'list|1-10':[{'id|+1':1}],}),};注意：上面的写法只是一个例子，你可以自定义规范，写法等，可以使用mockjs库来帮助生成假数据。webpack-dev-server的相关配置：#webpack.config.jsconstbeforeDevServer=app=>{//读取这里mock目录下的所有文件，并按照一定的规范和格式加载动态接口//例如：app.get('/user/profile',function(req,res){res.json({...});//返回文件中定义的`GET/user/profile`的值});app.post('/user/update',function(req,res){handle(req,res);//句柄：文件中定义的`POST/user/update`自定义处理函数});...};module.exports={//...devServer:{before:beforeDevServer,}};然后使用webpack-dev-server开启本地开发调试，在页面中可以这样访问：fetch('/user/profile');//访问/user/profilefetch('/user/update',{method:'post',body:{...}});//访问/user/updatefetch('/home/list');//访问/home/list#可以用其他请求方式代替fetch一般来说，我们也会使用chokidar来监听mock目录下的文件变化，更新路由及其响应，这样每次都能访问到最新的资源时间（因为节点只会加载某个模块一次）constchokidar=require('chokidar');constwatcher=chokidar.watch('./mock');watcher.on('change',path=>{//先清空模块缓存，确保加载最新资源...});这种方法比较复杂，特别是对于项目构建者。您需要对相关工具有深入的了解。幸运的是，社区已经有了一个打包工具：roadhog。但这种方式对用户来说非常棒，因为它可以完全模拟服务器接口，包括接口名称、HTTP方法、参数、返回值等，所以同样的代码既可以在本地运行，也可以在服务器端运行。因此，这也是推荐的方式。注意：以上代码只是演示构建过程，不保证一定能运行。3.3使用Proxy这种方法是将本地的仿真文件写在另一个单独的工程中，然后使用代理的方法访问仿真界面。Mock项目（以koa为例）：constKoa=require('koa');constRouter=require('koa-router');constapp=newKoa();constrouter=newRouter();router.get('/api/user/profile',(ctx,next)=>{ctx.body={...};});router.post('/api/user/update',(ctx,next)=>{//...});app.use(router.routes()).use(router.allowedMethods());app.listen(3000);app应用项目：webpack-dev-server的相关配置：#webpack.config.jsmodule.exports={//...devServer:{proxy:{'/api':'http://localhost:3000'//将所有以`/api`开头的接口代理到`Inthemock`project}}};然后使用webpack-dev-server开始本地开发调试，在页面中可以这样访问：fetch('/api/user/profile');//访问模拟项目的/api/user/profilefetch('/api/user/update',{method:'post',body:{...}});//访问mock项目的/api/user/update#fetch可以换成其他请求一般情况下，我们也会使用nodemon来监控mock项目中的文件变化，自动重启mock应用，这样我们就可以每次访问最新的资源（因为点头e对某个模块只会加载一次）nodemonapp.js可以统一管理多个项目的数据模拟文件，多个项目可以共享一些模拟数据。3.4在线界面模拟有时候，我们在生产环境（线上）的时候，可能还想使用模拟数据（比如APP、微信小程序、演示的web应用等），或者需要一个在线的地方来当仿真数据统一管理，需要在线接口仿真。线上界面模拟有完整的UI操作界面，可以添加多个用户、多个团队、多个仓库，可以为每个请求参数生成和添加类型限制和描述，为响应数据字段添加描述等。因为它是在线仿真数据，无论是本地开发，在线调试，还是演示，随处可用。比较著名的在线界面模拟工具有：easy-mock：在线演示地址https://easy-mock.com/RAP/rap2-delos+rap2-dolores：阿里出品，在线演示地址http://rap2.taobao.org/3.4.1easy-mock环境要求：Node.js(>=v8.9)&MongoDB(>=v3.4)&Redis(>=v4.0)安装步骤请参考easy-官方文档mock#quick-starteasy-mock主要提供以下功能：支持接口代理支持快捷键操作支持协同编辑支持团队项目支持RESTful支持Swagger|OpenAPISpecification(1.2&2.0&3.0)基于Swagger快速创建项目支持展示接口入口参与返回值支持展示实体类支持响应式数据开发，具有更高的灵活性和扩展性支持自定义响应配置（eg：status/headers/cookies）支持Mock.js语法支持restc接口预览3.4.2RAP/rap2-delos+rap2-dolores环境要求：Node.js(>=v8.9)&MySQL(>=v5.7)&Redis(>=v4.0)RAP目前有两个版本，第一个版本的RAP已经正式弃用，推荐使用第二个版本。RAP2分为两个包：rap2-delos：后端数据API服务器rap2-dolores：前端静态资源RAP2的安装步骤比较麻烦，rap2-delos可以参考官方文档rap2-delos#deployment，非官方的rap2-delosdeploymentDocumentation，rap2-dolores可以参考官方文档rap2-dolores#deployment-deployment。RAP2提供了和easy-mock类似的功能，但是比easy-mock更强大，当然也更复杂，比如：对请求参数的支持更完善，比如headers，queryparams，bodyparamsformore完整支持响应数据，例如可以为每个字段添加描述、限制类型等。3.4.3两者比较。RAP2比easy-mock更强大，但也更复杂，所以功能齐全可以用RAP2，简单快速可以用easy-mock。4.代码层面从上面可以看出，除了第二种动态注册接口的方法外，其他方法都不能完全模拟服务器环境。至少服务器接口的地址和本地模拟地址不一样。这样有个问题：每次上线前都要改成服务器地址。另外，在前后端对接的过程中，总是难免会遇到一些问题：前端传递的参数和后端需要的参数很难保持一致：比如分页，前端设置的page，从1开始，而后端设置的pageNum从0开始。前端需要的数据和后端返回的数据有很大的不同。需要对返回的数据进行处理。后端可能会更改字段名称或数据类型，导致前端搜索并更新相应的代码。解决这些问题最好的办法就是对应用进行分层，对异步请求进行隔离和封装。我一般使用see-fetch和see-ajax来隔离封装异步请求。注意：see-fetch是对window.fetch的封装，see-ajax是对XMLHttpRequest对象的封装。4.1以see-fetch为例：可以在代码中设置多个内部环境，然后针对不同的外部环境（如：本地环境、线上环境等）设置不同的内部环境，这样就可以不改代码,只改变一个环境值。如果和define-plugin一起使用，连环境值都不用改，在运行过程中直接由define-plugin指定。从'see-fetch'导入seeFetch;seeFetch.setEnv(0/1/2/3);seeFetch.setEnv(__SEE_ENV__);//__SEE_ENV__运行时由define-plugin指定配置异步请求：seeFetch.config(name,{//定义一个名为name的异步请求（以下配置可以多环境，每个环境可以设置不同的值）方法，//当前请求使用什么http方法stringify,settings,url,//当前请求url地址req,//请求参数键名的映射，如`page=>pageNum`pre,//操作请求参数,比如将page从1改成0refactor,//重构响应数据，比如字段重命名，类型转换等，例如后端返回模板字符串而不是接口});发起访问：seeFetch(name,params).then(result=>{//这里的result就是最终的格式化数据});从上面可以看出，一个请求的不确定性被封装到配置中，无论接口地址更新，前端请求参数与后端不一致，后端响应数据与前端需求等，都可以在配置中操作，无需更改其他地方的代码。这样，如果后台接口有变化，只需要找到配置文件更新即可，而不用去找这个接口在项目中哪里用到。这样既可以很好地使用本地数据模拟，又可以从容应对后台界面的变化，做到事半功倍。更多后续博客，查看https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（CreativeCommons3.0许可）
