基于 vue.js 搭建 Mock.JS
Mock.JS 官方文档
Mock.JS 是一款前端开发中拦截 Ajax 请求再生成随机数据响应的工具. 可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.
在我们的生产实际中, 后端的接口往往是较晚才会出来, 并且还要写接口文档, 于是我们的前端的许多开发都要等到接口给我们才能进行, 这样对于我们前端来说显得十分的被动, 于是有没有可以制造假数据来模拟后端接口呢, 答案是肯定的. 应该有人通过编写 JSON 文件来模拟后台数据, 但是很局限, 比如增删改查这些接口怎么实现呢, 于是今天我们来介绍一款非常强大的插件 Mock.JS, 可以非常方便的模拟后端的数据, 也可以轻松的实现增删改查这些操作.
第一步
使用脚手架 vue.cli 搭建简单项目
第二步
一. 安装 mock.JS 和 axios
- NPM install mock.JS -save
- NPM install axios --save
二. 配置 mock 和 axios
1. 在 main.JS 中引入 mock.JS
2. 在 main.JS 中引入 axios
配置
第三步: 项目目录
目录
第四步 文件代码
API.JS
- import axios from 'axios'
- axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
- // 请求拦截器
- axios.interceptors.request.use(function(config) {
- return config;
- }, function(error) {
- return Promise.reject(error);
- })
- // 响应拦截器
- axios.interceptors.response.use(function(response) {
- return response;
- }, function(error) {
- return Promise.reject(error);
- })
- // 封装 axios 的 post 请求
- export function fetch(url, params) {
- return new Promise((resolve, reject) => {
- axios.post(url, params)
- .then(response => {
- resolve(response.data);
- })
- .catch((error) => {
- reject(error);
- })
- })
- }
- export default {
- mockdata(url, params) {
- return fetch(url, params);
- }
- }
mock.JS
- import Mock from 'mockjs' // 引入 mockjs
- const Random = Mock.Random // Mock.Random 是一个工具类, 用于生成各种随机数据
- let data = [] // 用于接受生成数据的数组
- let size = [
- '300x250', '250x250', '240x400', '336x280',
- '180x150', '720x300', '468x60', '234x60',
- '88x31', '120x90', '120x60', '120x240',
- '125x125', '728x90', '160x600', '120x600',
- '300x600'
- ] // 定义随机值
- for(let i = 0; i <10; i ++) {
- // 可自定义生成的个数
- let template = {
- 'Float': Random.float(0, 100, 0, 5), // 生成 0 到 100 之间的浮点数, 小数点后尾数为 0 到 5 位
- 'Date': Random.date(), // 生成一个随机日期, 可加参数定义日期格式
- 'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size 表示将从 size 数据中任选一个数据
- 'Color': Random.color(), // 生成一个颜色随机值
- 'Paragraph':Random.paragraph(2, 5), // 生成 2 至 5 个句子的文本
- 'Name': Random.name(), // 生成姓名
- 'Url': Random.url(), // 生成 web 地址
- 'Address': Random.province() // 生成地址
- }
- data.push(template)
- }
- Mock.mock('/data/index', 'post', data) // 根据数据模板生成模拟数据
App.vue
- <template>
- <div id="app">
- </div>
- </template>
- <script>
- import API from "./axios/api.js";
- export
- default {
- name:
- "app",
- data() {
- return {
- dataShow: []
- };
- },
- created() {
- this.getdata();
- },
- methods: {
- getdata: function() {
- API.mockdata("/data/index").then(res = >{
- console.log(res);
- this.dataShow = res.data;
- });
- }
- }
- };
- </script>
最后就是浏览器的后台显示了
显示
本文章参考: https://blog.csdn.net/xiaoxiaojie12321/article/details/81301399
如有异议, 请留言.
来源: http://www.jianshu.com/p/3074a50d099a