vue3+vite+axios+mock从接口获取模拟数据实战

本文主要是介绍vue3+vite+axios+mock从接口获取模拟数据实战，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 一、安装相关组件
- 二、在vite.config.js中配置vite-plugin-mock插件
- 三、实现mock服务
- 四、调用api接口请求mock数据
- - 方法一、直接使用axios 请求mock 数据
  - 方法二、对axios进行封装统一请求mock数据
- 五、实际运行效果

在用Vue.js开发前端应用时通常要与后端服务进行交互，例如通过API接口获取数据，在后端服务接口还没有具备之前，可以通过mock(模拟)数据来进行开发。使用mock数据可以让前端开发人员独立于后端开发人员工作，加快开发速度。在没有真实数据的情况下，mock数据可以帮助开发者更快地看到UI的呈现效果和交互逻辑。

本文通过vue3+vite+axios+mock来介绍如何实现Vue.js的前端应用从接口获取模拟数据。

一、安装相关组件

npm install axios -S
npm install mockjs vite-plugin-mock -D

其中axios 是一个基于 Promise 非常强大且灵活的 HTTP 客户端，适用于 Vue.js 应用程序中的数据获取和后端交互。它可以简化 HTTP 请求的处理，并提供丰富的功能来满足不同的需求。我们用axios来实现与接口服务的http请求。
Mock.js 是一个用于生成随机数据的 JavaScript 库，它主要用于前端开发过程中模拟后端接口数据。Mock.js 提供了一套简洁易用的 API，可以帮助开发者快速生成符合特定规则的假数据，从而在没有后端支持的情况下进行前端开发和测试。
vite-plugin-mock 是一个专为 Vite 设计的插件，用于在 Vite 项目中模拟数据。它简化了使用 Mock.js 的过程，让开发者能够更加方便地管理模拟数据。
简单来说，就是mock.js提供mock数据，通过vite-plugin-mock，将管理mock发布成服务，通过axios通过http请求接口的方式获取mock数据。
安装相关组件后，在package.json中看到相关的组件信息

package.json
{"name": "mocktest","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","test": "vite --mode test","build": "vite build","preview": "vite preview"},"dependencies": {"axios": "^1.7.5","vue": "^3.4.29"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","mockjs": "^1.1.0","vite": "^5.3.1","vite-plugin-mock": "^3.0.2"}
}

二、在vite.config.js中配置vite-plugin-mock插件

● viteMockServe的相关配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// mock 数据的 dev环境viteMockServe({// supportTs: true, // 是否开启支持tsmockPath: 'mock', // 设置mockPath为根目录下的mock目录localEnabled: true, // 设置是否监视mockPath对应的文件夹内文件中的更改prodEnabled: false, // 设置是否启用生产环境的mock服务watchFiles: true, // 是否监视文件更改logger: true  //是否在控制台显示请求日志}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

在viteMockServe中指定了mockPath为mock也就是根目录下的mock目录，在该目录下的mock服务都会被发布成mock服务。

三、实现mock服务

在根目录下新建mock目录在mock目录下新建mock文件实现mock服务，如app.js、user.js
在这里插入图片描述

app.js代码如下：

export default [{url: '/mock/api/getApiInfo',method: 'get',response: () => {return {code: 200,title: 'mock api test.'}}},{url: '/api/category',type: 'get',response: () => {return {code: 200,data: [{id: 1,title: 'JAVA',href: '/category/java'},{id: 2,title: 'SpringBoot',href: '/category/SpringBoot',},{id: 3,title: 'MySql',href: '/category/MySql'},{id: 4,title: '随笔',href: '/category/live'}]}}}
]

在app.js中我们并没有用mock生产数据，只是实现了mock服务放到了mock文件目录通过viteMockServe发布出来，后面可以通过axios调用获取。
user.js代码如下：

import Mock from 'mockjs';// 通过Mock生成模拟数据
const userdata = Mock.mock({'list|10': [{'id|+1': 1,'name': '@cname','age|18-60': 1,'email': '@email',},],
}); export default [{url: '/mock/api/getUserInfo',method: 'get',response: () => {return {code: 200,data: userdata}}},
]

在user.js中，我们通过Mock生成模拟的用户列表数据

四、调用api接口请求mock数据

方法一、直接使用axios 请求mock 数据

import axios from 'axios'

在方法中通过axios.get()方法直接获取请求数据

async getData() {await axios.get('/mock/api/getApiInfo').then(res =>{console.log(res.data)this.msg = res.data.title})},

方法二、对axios进行封装统一请求mock数据

建立一个service.js对axios进行封装，让后通过service.js来统一请求mock数据，这样做的好处是在切到真实接口的时候可以更加灵活
service.js的代码如下

import axios from 'axios'
const api_rul = ''  //mock 接口地址可以为空字符串，真实接口配置为真实的接口地址。
// create an axios instance
const service = axios.create({baseURL: api_rul,timeout: 5000 // request timeout
})export default service

通过一个统一的调用接口文件请求mock数据
如mockapi.js

import service from '@/utils/service'export function  getCategory() {return service({url: '/api/category',method: 'get',params: {}})
}export function  getUserInfo() {return service({url: '/mock/api/getUserInfo',method: 'get',params: {}})
}

在methods中进行方法的调用

// 方法二：通过封装后的get方法获取数据getUserInfo(){getUserInfo().then(res =>{console.log(res.data)this.userinfo = res.data.data})},getCategory(){getCategory().then(res =>{console.log(res.data)this.categorys = res.data.data})}

在vue的组件中具体的调用和展示代码如下：
HelloWorld.vue

<template><h1>{{ msg }}</h1><div>人员列表</div><div><ul><li v-for="(user) in userinfo.list" :key="index">{{ user.id }} : {{ user.name }}  {{ user.age }}  {{ user.email }}</li></ul></div><div>目录</div><div><ul><li v-for="(category) in categorys" :key="index">{{ category.id }} : {{ category.title }}  {{ category.href }} </li></ul></div>
</template>
<script >
import axios from 'axios'
import { getCategory,getUserInfo } from '../api/mockapi'export default {data() {return {msg: 'Welcome to Your Vue.js App',userinfo: {},categorys: []};},mounted() {this.getData()this.getUserInfo()this.getCategory()},methods: {// 方法一：直接axios请求调用获取mock数据async getData() {await axios.get('/mock/api/getApiInfo').then(res =>{console.log(res.data)this.msg = res.data.title})},// 方法二：通过封装后的get方法获取数据getUserInfo(){getUserInfo().then(res =>{console.log(res.data)this.userinfo = res.data.data})},getCategory(){getCategory().then(res =>{console.log(res.data)this.categorys = res.data.data})}}
}
</script>