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>

整个工程的目录结构说明如下:

在这里插入图片描述

五、实际运行效果

在这里插入图片描述
可以看到分别用两种方式获取mock数据的效果,其中人员列表中的数据是mock生成的模拟数。


博客地址:http://xiejava.ishareread.com/

这篇关于vue3+vite+axios+mock从接口获取模拟数据实战的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1104000

相关文章

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

在Spring Boot中浅尝内存泄漏的实战记录

《在SpringBoot中浅尝内存泄漏的实战记录》本文给大家分享在SpringBoot中浅尝内存泄漏的实战记录,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录使用静态集合持有对象引用,阻止GC回收关键点:可执行代码:验证:1,运行程序(启动时添加JVM参数限制堆大小):2,访问 htt

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的