一、安装插件
二、创建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>
运行结果: