共计 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… 不胜感激!