共计 1454 个字符，预计需要花费 4 分钟才能阅读完成。
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… 不胜感激！