express+mockjs实现模拟后台数据发送功能

前言：

　　大多数时候，前端会和后端同时进行开发，即在我们开发完页面的时候，很可能还不能立马进入联调阶段，这个时候，为了保证我们接口的有效性和代码的功能完整，我们可能需要模拟数据。

模拟数据方法

1.通过js变量模拟后台数据

　　优点：不需要服务器

　　缺点：需要造很多变量，同时还要将变量在我们的有效代码中使用，最后还得删除

2.通过ajax请求json文件

　　优点：只需要配置路径，就可以访问，进入联调阶段不用修改大量的js代码

　　缺点：ajax存在跨域问题，通常无法请求本地文件，即使火狐也存在不能访问不同文件目录下的json文件，通常需要通过ide或者自己手动启动服务

3.用nodejs自己写一个专门用来发送请求的服务，不包含业务逻辑

　　优点：前端的代码进入联调阶段只需要修改一个basePath，所有的接口名字都可以和约定好的路径保持一致，可以测试post请求，模拟网络环境

　　缺点：自己要写一个后台

1、2两种模拟数据的方式适合用来做demo，但是如果做得是上线项目，我们还是推荐使用自己搭建一个node后台

1.准备node环境、npm/cnpm

2.安装express、mockjs

3.创建服务端文件server.js，引入相关模块

4.配置接口路由，设置监听端口

文件] */ app.all('/test.action',function(req,res) { res.send('hello world'); }); /** * 监听8090端口 */ app.listen('8090');

　　此时我们直接访问nofollow" href="http://localhost:8090/test.action">http://localhost:8090/test.action，就可以直接在界面看到'hello world'文字

5.使用mockjs返回格式化json数据

属性名‘|'符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增 */ res.json(Mock.mock({ "status": 200,"data|1-9": [{ "name|5-8": /[a-zA-Z]/,"id|+1": 1,"value|0-500": 20 }] })); });

　　此时我们再访问页面数据，我们就可以得到一份随机的json数据

6.创建模拟数据文件夹testData，创建模拟数据json文件（注意：json文件中不能使用正则，且对象属性必须为双引号字符串）

7.遍历模拟数据文件，生成对应路由

文件*/ fs.readdir('./testData',function(err,files) { if(err) { console.log(err); } else { /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/ files.forEach(function(v,i) { app.all(`/${v.replace(/json/,'action')}`,res) { fs.readFile(`./testData/${v}`,'utf-8',data) { if(err) { console.log(err); } else { res.json(Mock.mock(JSON.parse(data))); } }) }) }) } })

至此，我们的node服务器已经搭建成功，使用node server.js运行服务器，我们就可以直接在前端访问接口，但是如果只是单纯的生成后台，前端页面不通过后台进行访问的话，存在跨域问题，如果需要解决，可以在后台添加跨域请求

添加中间件处理跨域请求*/ app.use(function(req,res,next) { res.header("Access-Control-Allow-Origin","*"); res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS'); res.header("Access-Control-Allow-Headers","X-Requested-With"); res.header('Access-Control-Allow-Headers','Content-Type'); next(); });

ps:如果mock需要使用正则，请单独配置路由进行处理，express和mockjs更多指令，请查阅官网api

总结

以上是小编给大家介绍的express+mockjs实现模拟后台数据发送功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

原文链接：https://www.f2er.com/express/34298.html

express+mockjs实现模拟后台数据发送功能

前言：

模拟数据方法

总结

猜你在找的Express 相关文章