express mockjs实现了模拟后台数据传输的功能

前言：

很多时候，前端和后端会同时开发，也就是当我们开发完页面后，很可能无法马上进入联调阶段。这时，为了保证我们接口的有效性和代码的完整性，我们可能需要模拟数据。

模拟数据法

1.通过js变量模拟背景数据

优点：不需要服务器

缺点：我们需要创建大量的变量，同时，我们需要使用我们有效代码中的变量，最后我们不得不删除它们

2.通过ajax请求json文件

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

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

3.使用nodejs编写一个专门用于发送请求的服务，它不包含业务逻辑

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

缺点：我得写背景

1、2两种模拟数据的方式适合演示，但如果是线上项目，建议自己搭建节点后台

1.准备节点环境，npm/cnpm

2.安装express和mockjs

3.创建服务器文件server.js并介绍相关模块

let express=require(' express ')；//引入express模块让Mock=require(' Mock js ')；//引入模拟模块让app=express()；//实例化express4。配置接口路由并设置监听端口

/* * *配置test.action路由* @ param {[type]} req[客户端发送的请求带来的数据]* @ param {[type]} RES[服务器的对应对象，可以使用res.send返回数据，res.json返回json数据。Res.down返回下载文件] */app.all ('/test.action '，function (req，RES){ RES . send(' hello world ')；});/* * *监听端口8090 */app . listen(' 8090 ')；此时我们可以直接访问http://localhost :8090/test . action，在界面上可以直接看到“hello world”这个词。

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

在app.all ('/test.action '，function (req，RES) {/* * * mockjs中，属性名“|”符号后面的属性是随机属性，数组对象后面的随机属性是随机数组的个数，正则表达式代表随机规则。1代表自加*/RES . JSON(mock . mock({ ' status ' : 200，' data | 1-9 ' :[{ ' name | 5-8 ' :/[a-za-z]/，' id | 1 ' : 1)})；此时，当我们再次访问页面数据时，我们可以得到一个随机的json数据

6.创建仿真数据文件夹testData，创建仿真数据json文件(注意：在json文件中不能使用正则性，对象属性必须是双引号字符串)

7.遍历模拟数据文件以生成相应的路线

/*readdir读取目录*/fs.readdir('中的所有文件。/testdata '，函数(err，files){ if(err){ console . log(err)；} else {/*成功读取文件，获取文件名，拼接生成相应的动作，监控相应的接口并返回相应的文件数据*/files.foreach (function (v，I){ app . all(`/$ { v . replace(//JSON/，' action')} `)，function (req，res) { fs.readFile(`)。/testData/${v} `，' utf-8 '，函数(err，data){ if(err){ console . log(err)；} else { RES . JSON(Mock . mock(JSON . parse(data)))；}})})}})至此，我们的节点服务器已经搭建成功，使用node server.js运行服务器，可以直接访问前端的接口。但是，如果只是简单地生成后台，而不通过后台访问前端页面，就会出现跨域的问题。如果需要解决，可以在后台添加跨域请求。

/*为app添加中间件处理跨域请求*/app.use (function (req，RES，next){ RES . header(' access-control-allow-origin '，' * ')；res.header('访问控制-允许-方法'，' PUT，GET，POST，DELETE，OPTIONS ')；res.header('访问控制-允许-头'，' X-请求-与')；res.header('访问控制-允许-头'，'内容类型')；next()；});Ps:如果mock需要使用规律性，请单独配置路由进行处理。有关express和mockjs的更多说明，请参考官方网站api

摘要

以上就是边肖介绍的express mockjs实现模拟后台数据传输的功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！