前端使用mockjs模拟接口返回数据
程序员文章站
2022-07-10 10:47:26
...
这里开始都是通过mockjs模拟请求返回数据,返回方式这里说自己遇到的两种,一是mock模拟产生随机数据返回,二是读取本地json文件返回。
一、初始化好vue项目之后,执行命令安装依赖包。
初始化项目 vue init webpack mockjs
安装依赖包 npm install mockjs --save-dev
安装依赖包 npm install axios --save
二、封装axios,文件为request.js,根据自己的需要去修改里面的代码。
import axios from 'axios';
import Vue from 'vue';
// 环境的切换
if (process.env.NODE_ENV === 'development') { // 开发环境
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV === 'debug') { // debug
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV === 'production') { // 线上
axios.defaults.baseURL = '/main';
}
// 请求超时时间
axios.defaults.timeout = 300000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// 请求拦截器
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.error(error);
});
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
if (response.data.returnCode < 0) {
Vue.prototype.$message({
message: response.data.returnMsg,
type: 'warning'
});
return Promise.reject(response);
} else {
return Promise.resolve(response);
}
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 404请求不存在
case 404:
Vue.prototype.$message({
message: '网络请求不存在',
type: 'warning'
});
break;
default:
Vue.prototype.$message({
message: error.response.data.returnMsg,
type: 'warning'
});
}
} else {
Vue.prototype.$message({
message: '网络请求超时!',
type: 'warning'
});
}
return Promise.reject(error);
}
);
export default {
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
* @param {Boolean} loadingFlag [是否需要显示遮罩层]
* @param {Object} headers 请求相关参数设置
*/
get(url, params, loadingFlag, headers) {
headers = headers || {};
let loadingInstance = '';
/* 如果 loadingFlag 为对象将赋值给 requestObj */
if (typeof loadingFlag == 'object') {
headers = loadingFlag;
loadingFlag = false;
}
if (loadingFlag) {
loadingInstance = Vue.prototype.$loading({
lock: true,
text: '请求处理中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
headers: headers
})
.then(res => {
if (loadingInstance != '') {
loadingInstance.close();
}
resolve(res.data);
})
.catch(err => {
if (loadingInstance != '') {
loadingInstance.close();
}
reject(err.data);
});
});
},
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
* @param {Boolean} loadingFlag [是否需要显示遮罩层]
* @param {Object} headers 请求相关参数设置
*/
post(url, params, loadingFlag, headers) {
headers = headers || {};
let loadingInstance = '';
/* 如果 loadingFlag 为对象将赋值给 requestObj */
if (typeof loadingFlag == 'object') {
headers = loadingFlag;
loadingFlag = false;
}
if (loadingFlag) {
loadingInstance = Vue.prototype.$loading({
lock: true,
text: '请求处理中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
return new Promise((resolve, reject) => {
axios.post(url, params, {
headers: headers
})
.then(res => {
if (loadingInstance != '') {
loadingInstance.close();
}
resolve(res.data);
})
.catch(err => {
if (loadingInstance != '') {
loadingInstance.close();
}
reject(err.data);
});
});
}
};
三、前面步骤都是一样的,后面开始mock数据并使用。
3.1 先说第一种直接mock产生随机数据并使用。
① 生成mock.js文件,具体的mock使用请参照官方文档https://github.com/nuysoft/Mock/wiki/Getting-Started,代码如下:
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// 获取 mock.Random 对象
const data = Mock.mock({
"success": true,
"message": "操作成功!",
"code": 0,
"result|10": [{ // 生成10条数据
"id|+1": 1, // id递增1
"roleName|1": ["测试角色1", "测试角色2", "测试角色3", "测试角色4", "测试角色5"], // 数组内随机一个值
"roleCode": "100010",
"description": null,
"createBy": "jeecg",
"createTime": "2019-10-30 19:50:56",
"updateBy": null,
"updateTime": null
}],
"timestamp": 1573456699794
});
// Mock.mock( url, post/get , 返回的数据);
/** 登录 */
Mock.mock('/api/data', 'post', data)
② 在main.js内加入以下代码引入mock.js,路径根据自己的文件目录调整:
require('./mock.js')
③ 在组件中引用并发出请求:
- 在组件中引用
import api from '@/axios/request';
- 在组件中发出请求
api.post('/api/data', {}).then(data => {
console.log(data);
}).catch(data => {
});
至此已经可以成功打印你mock产生的数据。
3.2 第二种模拟数据读取json文件作为返回数据。
① 准备json文件,data.json。
{
"returnCode": 0,
"returnMsg": "操作成功",
"data": [{
"name": "一一",
"id": 1
}]
}
② 模拟接口并读取数据。
文件mock.js:
const Mock = require('mockjs'); // mockjs 导入依赖模块
const util = require('./util'); // 自定义工具模块
// 返回一个函数
module.exports = function (app) {
// 监听http请求
app.post('/api/data', function (rep, res) {
console.log('-----');
// 每次响应请求时读取mock data的json文件
// util.getJsonFile方法定义了如何读取json文件并解析成数据对象
let json = util.getJsonFile('./data/data.json');
// 将json传入 Mock.mock 方法中,生成的数据返回给浏览器
res.json(Mock.mock(json));
});
};
文件util.js:
const fs = require('fs'); // 引入文件系统模块
const path = require('path'); // 引入path模块
module.exports = {
// 读取json文件
getJsonFile: function (filePath) {
// 读取指定json文件
let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
// 解析并返回
return JSON.parse(json);
}
};
③ 在**webpack.dev.conf.js
**文件中中加入代码,路径根据自己目录作调整。
④ 在组件中引用并请求。
- 在组件中引用
import api from '@/axios/request';
- 在组件中发出请求
api.post('/api/data', {}).then(data => {
console.log(data);
}).catch(data => {
});
至此已经可以成功打印data.json中数据。
上一篇: Spring 解决循环依赖
推荐阅读
-
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
-
vue中如何使用mockjs摸拟接口的各种数据
-
使用RAP2和Mock.JS实现Web API接口的数据模拟和测试
-
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
-
mockjs,json-server一起搭建前端通用的数据模拟框架教程
-
Vue之使用mockjs生成模拟数据案例详解
-
前端使用mockjs模拟接口返回数据
-
前端使用 easyMock 和 Mock.js 实现模拟数据
-
使用mockjs 随机生成模拟接口数据
-
vue学习-使用mockjs模拟发送数据