在 vue 框架中使用 Mock 模拟后台数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在前端开发的时候，在某些情况下后端接口没有准备好，但页面需要数据渲染来查看效果，此时可以使用 Mock 这个包来生成随机数据，方面前端获取数据渲染页面。

---

一、Mock 是什么？

生成随机数据，拦截 Ajax 请求。不需要改变现有代码，就可以拦截 Ajax 请求，返回随机数，让前端脱离了后端，可进行独立开发，；可生成的数据类型十分丰富，涵盖了随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等，模拟各种场景。

二、Mock 使用

1.Mock 基本使用

使用 npm install mockjs下载包

import Mock from 'mockjs' // es6 语法

在 node 环境下可以使用下面代码
const Mock = require('mockjs')

1.1生成模拟数据的两种方法

方法一：数据模板 生成随机数

// 调用 Mock.mock() 方法生成随机数据
let data = Mock.mock({
	'username|1-10': 'w',  // 随机生成 1-10 次 w 字符串
		'num|1-30': 0   // 随机生成 1-30 之间的数字
	})
console.log(data)  // { username: 'wwwwwwww', num: 3 }

方法二：数据占位符 生成随机数

数据占位符使用
let data = Mock.mock(   {
  id: '@id()', // @id() 随机生成 id
  name: '@cname', // @cname 随机生成中文名字
  date: '@date(yyyy-MM-dd)', //@date(yyyy-MM-dd) 随机生成日期
  content: '@paragraph()', // 随机生成描述
  email: '@email()',// 随机生成邮箱
})

以上对常用的随机数据做了一个简单的介绍，更详细、更具体的方法建议查看链接: Mock.js 官网.

2.在 vue 中使用 Mock

2.1创建项目并导包

首先创建 vue 项目：Vue create demo，清空默认模板
安装 axios和mockjs两个包：npm install axios mockjs

2.2创建 mock 文件

src/mock/index.js 写入

import Mock from 'mockjs'
// 监听对应的端口 api/userinfo
Mock.mock('api/userinfo', {
  id: '@id()', // @id() 随机生成 id
  name: '@cname', // @cname 随机生成中文名字
  date: '@date(yyyy-MM-dd)', //@date(yyyy-MM-dd) 随机生成日期
  content: '@paragraph()', // 随机生成描述
  email: '@email()',// 随机生成邮箱
})

在main.js文件代码如下

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import './mock' // 一定要在 mian.js 导入 mock 文件

axios.baseURL = 'http://localhost:9000'  // 本项目的 localhost 和对应的端口号
Vue.prototype.$http = axios // 设置全局的 axios 方法

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

在 App.vue中代码如下

<template>
  <div id="app">
    <button @click="getRandomData">随机生成数据</button>
   <h3>id：{{ userinfo.id }}</h3>
    <div>姓名：{{ userinfo.name }}</div>
    <br>
    <div>生日：{{ userinfo.date }}</div>
    <br>
    <div>邮箱：{{ userinfo.email }}</div>
    <br>
    <div>描述：{{ userinfo.content }}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      userinfo : {}
    }
  },
  methods: {
    getRandomData() {
      this.$http.get('api/userinfo').then(({data}) => {
      this.userinfo = data
    })
    }
  }
}
</script>

---

效果展示

点击按钮前。
点击按钮后，生成随机数据，每点击一次就可以生成新的随机数据。