Mock.js虚拟接口

Vue3中使用Mock.js虚拟接口数据

一、创建项目

pnpm创建vite的项目,通过 PNPM来简化依赖管理。若还没有安装 PNPM,可以通过 npm来安装:

  1. 安装 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模板。

  1. 安装依赖

    pnpm install

  2. 启动项目

    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数据。

text 复制代码
// 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数据会在项目启动时被加载。

text 复制代码
import './mock'

四、Vue组件中使用Mock数据。在src/components/MockTest.vue组件中,通过发送一个GET请求来获取Mock数据。

text 复制代码
<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项目。

text 复制代码
pnpm dev
相关推荐
Mintopia7 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia8 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
BillKu32 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL35 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
LZQqqqqo36 分钟前
C# 接口(interface 定义接口的关键字)
java·开发语言·c#
寒水馨43 分钟前
Java 9 新特性解析
java·开发语言·新特性·java9·jdk9
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
拓端研究室1 小时前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js