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

一、安装插件

二、创建mock文件夹，创建index.js文件

index.js源码：

// 引入mockjs
import Mock from "mockjs";
// Mock.mock 是一个工具类，用于生成各种随机数据，在官网上可以找到。
const Random = Mock.mock('@string("number", 4)');
// 用于接受生成数据的数组
let data = [];

const template = {
  number: Random,
};
// 将template以数组的方式添加
data.push(template);
// 根据数据模板生成模拟数据
Mock.mock("/data/index", "get", data);

四、全局引入

五、编写代码

HelloWorld.vue源码(v3)：

<template>
  <div>
    <!-- <h1>路由守卫已解锁</h1> -->
    <input type="button" value="点击生成验证码" @click="huoqu">
    <div v-for="item in lists" :key="item">
      <p>这是生成的验证码：{{ item.number }}</p>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance} from "vue";
import { ref } from 'vue'
export default {
  setup() {
    // 声明一个变量lists，用于存储数据
    const lists = ref([])
    // 获取当前实例
    const { proxy } = getCurrentInstance();
    // 定义一个url
    const url = "/data/index"
    // 定义一个函数huoqu
    const huoqu = () => {
      // 发起get请求
      proxy.axios.get(url).then((res) => {
        // 打印返回的数据
        console.log(res.data);
        // 将返回的数据赋值给lists
        lists.value = res.data;
        // 打印lists
        // console.log(lists);
        // 打印this.lists
      }).catch((err) => {
        // 打印错误信息
        console.log(err);
      })
    }
    // 返回lists和huoqu函数
    return { lists, huoqu }
  }
}
</script>

<style lang="scss" scoped></style>

HelloWorld.vue源码(v2)：

<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>

运行结果：