Vue3中使用Mock.js虚拟接口数据
一、创建项目
pnpm创建vite的项目,通过 PNPM来简化依赖管理。若还没有安装 PNPM，可以通过 npm来安装：
- 安装 PNPM
npm install -g pnpm
//使用国内镜像加速
pnpm add -g pnpm@latest
pnpm config set registry http://registry.npmmirror.com
2.创建 Vite 项目
pnpm create vite@latest my-vite-app --template vue
my-vite-app 是项目名称，–template vue 指定了使用 vue模板。
- 安装依赖
pnpm install
- 启动项目
pnpm dev
二、安装axios
pnpm install axios -g
在main.js中引入axios
import axios from 'axios'
...
app.use(axios)
...
三、安装mockjs
pnpm install mockjs --save
创建Mock数据文件。在项目的根目录下，创建mock文件夹，并在该文件夹下创建index.js文件。在index.js中，编写Mock数据。
// mock/index.js
import Mock from 'mockjs'
// 使用Mock.js模拟接口数据
Mock.mock('/api/users', 'get', {
'list|10': [{
'id|+1': 1,
'name': '@cname',
'gender|1': ['男', '女'],
'age|18-60': 1,
'email': '@EMAIL',
'avatar': "@image('50x50', '#50B347', '#FFF','png','Mock.js')"//随机生成图片
}]
})
代码中使用Mock.mock方法来模拟一个GET请求的接口/api/users。接口返回一个包含10个用户信息的数组。每个用户信息包括id、name、age、gender、email和avatar字段。其中，id字段自增，name字段使用随机的中文名字，age字段在18到60之间随机生成，gender字段随机选择男或女，email字段使用随机的邮箱地址，avatar字段使用随机的50x50的图片。
在src/main.js中引入mock/index.js，Mock数据会在项目启动时被加载。
import './mock'
四、Vue组件中使用Mock数据。在src/components/MockTest.vue组件中，通过发送一个GET请求来获取Mock数据。
<template>
<div class="contain">
<h2>人员信息列表</h2>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>照片</th>
<th>性别</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in userList" :key="index">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td><img :src=user.avatar></td>
<td>{{ user.gender }}</td>
<td>{{ user.age }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
const userList = ref([]);
onMounted(() => { fetchUsers(); })
const fetchUsers = () => {
// 发送GET请求获取Mock数据
axios.get('/api/users').then(response => {
userList.value = response.data.list
})
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.contain {
width: 90%;
margin: 10px auto;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 15px;
}
th {
height: 35px;
line-height: 35px;
text-align: center;
background: #F5F5F5;
}
td {
height: 50px;
padding: 5px 10px;
text-align: center;
}
td,th {
border: 1px solid #DCDCDC;
}
</style>
代码中使用了Vue的v-for指令来遍历用户列表，并使用v-bind指令来绑定用户信息的属性。在组件的onMounted生命周期钩子中，调用fetchUsers方法来发送GET请求获取Mock数据，并将数据赋值给userList属性。
在src/main.js中引入MockTest.vue
import App from './components/MockTest.vue';
五.运行Vue项目。
pnpm dev
