图解使用mock.js获取四位数验证码

Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。

一、安装

npm install mockjs -D

二、全局引入mock.js文件

在引入之前还要安装axios插件，在此不做过多解释，如不会请翻看学渣笔记2.0

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { Form, Field, CellGroup, Button } from "vant";

//引入axios组件
import axios from "axios";
import VueAxios from "vue-axios";
//引入mockjs组件
import Mock from "@/mock";

const app = createApp(App);
app
// app这里要有与之对应的use
  .use(Mock)
  .use(VueAxios, axios)
  .use(Button)
  .use(Form)
  .use(CellGroup)
  .use(Field)
  .use(store)
  .use(router)
  .mount("#app");

三、新建mock.js文件

可以在src目录下新建mock文件夹，新建index.js文件。在index.js文件中建立虚拟数据。

index.js代码如下

import Mock from "mockjs"; 
// 引入mockjs
const Random = Mock.mock('@string("number", 4)'); 
// Mock.mock 是一个工具类，用于生成各种随机数据，在官网上可以找到。
let data = []; 
// 用于接受生成数据的数组
const template = { 
    "number": Random
}
  data.push(template);
// 将template以数组的方式添加
Mock.mock("/data/index", "get", data); // 根据数据模板生成模拟数据

四、找到AboutView.vue文件

AboutView.vue代码如下

<template>
  <div class="about">
    <h1>路由守卫已解锁</h1>
    <input type="button" value="点击生成验证码" @click="huoqu()">
     <div v-for="item in lists" :key="item">
      <p>这是生成的验证码：{{ item.number }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: [],
    }
  },
  methods: {
    huoqu() {
      let url = "/data/index"
      this.axios.get(url).then(res => {
        // console.log(res.data);
        this.lists = res.data;
        // console.log(this.lists);
      }).catch((err) => {
        console.log(err);
      })
    },
  }
}
</script>

运行结果