|
当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据？ 这时可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库 特点：前后端分离，增加了单元测试的真实性，用法简单，方便扩展 示例：在jquery中使用mock 1.新建文件，引入jquery.js和mock.js <script src="https://cdn./jquery/2.2.4/jquery.min.js"></script> 2.新建mock文件，里面新建index.js文件并且引入。 Mock.mock('/user/userinfo','get',{
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
description: "@paragraph()",//描述
ip: "@ip()",//IP地址
email: "@email()"//email
})3.使用jquery发送ajax请求 $.ajax({
url: '/user/userinfo',
dataType: 'json',
success: (data)=>{
console.log(data)
}
})4.移除mock 4.1直接移除就可以了。注释。 4.2通过添加全局变量 index.html页面添加<script>MOCK = 'true'</script> 然后index.js文件里面进行判断。 if(window.ENV == 'true'){
Mock.mock('/user/userinfo','get',{
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
description: "@paragraph()",//描述
ip: "@ip()",//IP地址
email: "@email()"//email
})
}案例1：todolist,这里只写mock代码 if(MOCK == 'true'){
Mock.mock('/todo/task','get', function(options){
let a = []
for (let i = 0; i < 5; i ) {
let o = Mock.mock({
_id: "@id()",
title: '@string("lower", 5)',
completed: "@boolean"
})
a.push(o)
}
return a
})
Mock.mock('/todo/addTask','post', function(options){
return Mock.mock({
_id: "@id()",
title: o.title,
complete: false
})
})
Mock.mock(/^\/todo\/deleteTask/,'get', function(options){
let o = JSON.parse(options.body)
return o
})
Mock.mock('/todo/modifyTask','post', function(options){
let o = JSON.parse(options.body)
return o
})
}vue中如何使用mock呢？ 1.创建项目，安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev 2.mock基础语法，新建mock文件夹,新建testMockjs.js const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)
var obj = Mock.mock({
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
description: "@paragraph()",//描述
ip: "@ip()",//IP地址
email: "@email()"//email
})
console.log(obj)3.使用json5,vscode有json5的扩展插件哦。（json文件,中如果说存在 const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)
var obj = Mock.mock({
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
description: "@paragraph()",//描述
ip: "@ip()",//IP地址
email: "@email()"//email
})
console.log(obj)4.引入json5库来解析json5格式，在mock文件夹下,新建testJSON5.js const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
//读取指定json文件
var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
//解析并返回
return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json)5.mock和vue-cli结合，在mock文件夹下,新建index.js const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
//读取指定json文件
var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
//解析并返回
return JSON5.parse(json);
}
//返回一个函数
module.exports = function(app){
//监听http请求
app.get('/user/userinfo', function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile('./userInfo.json5');
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}6.在项目根目录下新建vue.config.js module.exports = {
devServer: {
before: require('./mock/index.js')//引入mock/index.js
}
}7.发送ajax,在 export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
axios.get('/user/userinfo')
.then(res => {
console.log(res)
})
.catch(err => {
console.error(err);
})
}
}8.如果调用真实数据的时候如何移除mock. 在项目根路径新建 module.exports = function(app){
if(process.env.MOCK == 'true'){
//监听http请求
app.get('/user/userinfo', function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile('./userInfo.json5');
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
}来源：https://www./content-4-593001.html
|
|
|
