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

前言

在前端开发的时候，在某些情况下后端接口没有准备好，但页面需要数据渲染来查看效果，此时可以使用 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(),// 随机生成邮箱
})

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

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>

效果展示

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