这篇文章给大家分享的是有关express+mockjs如何实现模拟后台数据发送功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
js有什么特点
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
模拟数据方法
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,引入相关模块
let express = require('express'); //引入express模块
let Mock = require('mockjs'); //引入mock模块
let app = express(); //实例化express
4.配置接口路由,设置监听端口
/**
* 配置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,
"value|0-500": 20
}]
}));
});
此时我们再访问页面数据,我们就可以得到一份随机的json数据
6.创建模拟数据文件夹testData,创建模拟数据json文件(注意:json文件中不能使用正则,且对象属性必须为双引号字符串)
7.遍历模拟数据文件,生成对应路由
/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
if(err) {
console.log(err);
} else {
/*成功读取文件,取得文件名,拼接生成对应action,监听对应接口并返回对应文件数据*/
files.forEach(function(v, i) {
app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
if(err) {
console.log(err);
} else {
res.json(Mock.mock(JSON.parse(data)));
}
})
})
})
}
})
至此,我们的node服务器已经搭建成功,使用node server.js运行服务器,我们就可以直接在前端访问接口,但是如果只是单纯的生成后台,前端页面不通过后台进行访问的话,存在跨域问题,如果需要解决,可以在后台添加跨域请求
/*为app添加中间件处理跨域请求*/
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();
});
感谢各位的阅读!关于“express+mockjs如何实现模拟后台数据发送功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!