关于vue.js:在Vuecli中使用mockjs

31次阅读

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

正文完
 0