1、mock.js 拦挡ajax申请，生成随机数据
新学到的货色，以我的形式分享一下，咱们在开发中，须要后端提供api接口，而后拿到接口去遍历生成数据，渲染到页面上显示。在有的时候，还没拿到后端提供的接口时，前端能够本人模仿后盾制作简略的json格局数据进行开发工作
mock.js 应用：可参考mock.js官网
1、前提在有搭建Vue-cli 我的项目后，下载axios和mock.js
装置：npm install mockjs axios
2、模仿数据，在我的项目src目录中新建mock文件夹，再建xxx.json的json格局数据文件
3、在mock文件夹中建设mockServer.js文件，引入mock，测试mock，可参考下图
4、批改ajax申请的mock门路（baseURL: '/api' 改成为 '/mock'，其实就是原来的api）
5、在api文件夹 index.js中引入mockAjax.js文件，进行测试
6、这是我的测试后果
2、mock.js 模仿数据疾速上手，最简略用法
1、还是先在脚手架中，下载axios和mock.js // npm install mockjs axios
2、而后在src目录中别离创立mock文件夹和index.js文件，并在main.js中引入 require('./mock/index');
3、开始模仿数据 （目录提醒 --> 在src目录下的mock文件夹index.js文件中书写以下代码）
// 1、引入mockjs
const Mock = require('mockjs');
// 2、获取 mock.Random 对象
const random = Mock.Random;
console.log(random); // 简略应用就不操作了，须要操作的能够去看文档
// 3、根本用法 Mock.mock(url, type, data) // 参数文档 https://github.com/nuysoft/Mo...
Mock.mock('/user/list', 'get', {
code: 200,
message: '胜利',
data: {
// 生成十个如下格局的数据'list|10': [ { 'id|+1': 1, // 数字从以后数开始顺次 +1 'age|18-40': 20, // 年龄为18-40之间的随机数字 'sex|1': ['男', '女'], // 性别是数组中随机的一个 name: '@cname', // 名字为随机中文名字 email: '@email', // 随机邮箱 isShow: '@boolean', // 随机获取boolean值 },],},
});
4、在app.vue中申请数据，引入axios发送申请即可
<template>
<div>app</div>
</template>
<script>
import axios from 'axios'; // 引入axios
export default {
name: 'App',
data() {
return {};},
mounted() {
axios.get('/user/list').then((res) => { console.log(res);});},
};
</script>
<style scoped></style>
复制代码
申请后果如下图：
最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑
如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKe...不胜感激 ！