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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux Ubuntu 桌面环境概览

目录 一、Ubuntu桌面环境的特点&#xff1a;简约而不简单 二、Ubuntu桌面环境的组成&#xff1a;细节见真章 Ubuntu&#xff0c;这个名字在开源操作系统领域如同璀璨明星&#xff0c;以其卓越的桌面环境和用户体验赢得了全球用户的青睐。今天&#xff0c;就让我们一起深入探索…

图神经网络GNN的前世今生

GNN 图神经网络&#xff08;Graph Neural Network&#xff0c;简称GNN&#xff09;已经成为处理图形结构数据的一种强大工具&#xff0c;广泛应用于社交网络分析、知识图谱、推荐系统等领域。在本文中&#xff0c;我们将深入探讨图神经网络的历史背景、关键的发展阶段以及未来可…

强制输出wParam 和 lParam,会是什么内容?

当你“强制输出” wParam 和 lParam 时&#xff0c;通常是指在调试或日志记录中直接查看这些参数的原始数值。这些值的内容会根据消息类型的不同而有所变化&#xff0c;因为 wParam 和 lParam 的意义和使用取决于它们所在的消息上下文。 下面我将详细讨论在不同消息情况下&…

白酒与家庭聚会:温馨与和谐的时光

在繁忙的都市生活中&#xff0c;家庭聚会是每个人心中那份较温暖的港湾。每当夜幕降临&#xff0c;灯火通明&#xff0c;家人们围坐在一起&#xff0c;谈笑风生&#xff0c;那份温馨与和谐仿佛能够驱散一切疲惫。而在这个温馨的时刻&#xff0c;白酒——豪迈白酒&#xff08;HO…

Python 爬虫入门(十二):正则表达式「详细介绍」

Python 爬虫入门&#xff08;十二&#xff09;&#xff1a;正则表达式 前言一、正则表达式的用途二、正则表达式的基本组成元素2.1 特殊字符2.2 量词2.3 位置锚点2.4 断言2.5 字符集2.6 字符类2.6.1 基本字符类2.6.2 常见字符类简写2.6.3 POSIX字符类2.6.4 组合使用 三、 正则表…

如何使用ssm实现亿互游在线平台设计与开发+vue

TOC ssm118亿互游在线平台设计与开发vue 绪论 1.1研究背景 时代的发展&#xff0c;我们迎来了数字化信息时代&#xff0c;它正在渐渐的改变着人们的工作、学习以及娱乐方式。计算机网络&#xff0c;Internet扮演着越来越重要的角色&#xff0c;人们已经离不开网络了&#x…

2024世界机器人大会盛大开幕,卓翼飞思携无人智能领域产品集中亮相 !

开放创新 聚享未来&#xff01;万众瞩目的2024世界机器人大会暨博览会于8月21日在北京亦创国际会展中心盛大开幕。大会聚焦机器人技术与产业前沿趋势&#xff0c;展示机器人创新应用赋能千行百业的多元场景&#xff0c;全球顶尖的机器人科学家、行业领袖、创新精英汇聚一堂&…

Pandas教程:使用Pandas合并多个Excel文件

目录 1. 环境准备 1.1 安装Pandas 1.2 准备工作 2. 基本概念 2.1 Pandas简介 2.2 DataFrame的基本操作 3. 读取Excel文件 4. 合并多个Excel文件 4.1 获取文件列表 4.2 读取并合并数据 4.3 处理重复数据 5. 数据存储 6. 完整示例代码 7.代码优化 7.1用类去重新组…

vue3动态引入图片不显示问题

方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite) 1.图片放到public 目录会更省事&#xff0c;不管是开发环境还是生产环境&#xff0c;可以始终以根目录保持图片路径的一致. 假设&#xff1a; 静态文件目录&#xff1a;src/assets/images/ 我们的目标静态文件在 …

Python实现打印http请求信息例子解析

示例代码 import http.clientdef print_http_info(host, path):conn http.client.HTTPConnection(host)method GETurl pathprint(f"{- * 30} 请求信息 {- * 30}")print(f"主机: {host}")print(f"方法: {method}")print(f"URL: {url}&qu…

深入理解Spring Boot日志框架与配置

目录 Spring Boot日志框架概述Spring Boot默认日志框架&#xff1a;Logback日志配置文件日志级别的调整日志输出配置日志格式化日志轮转和归档集成其他日志框架日志管理工具最佳实践总结 Spring Boot日志框架概述 Spring Boot 支持多种日志框架&#xff0c;如 Logback、Log4…

使用HAL库实现按键控制LED和蜂鸣器

下载STM32CubeMX实现项目的初始配置&#xff08;寄存器操作)&#xff0c;下载keil对程序进行编译烧写 在STM32CubeMX中将PB0/PB1设置为输入引脚作为按键&#xff0c;PA6/PA4设置为输出引脚作为led和Beep&#xff0c;将按键引脚设置为上拉输入&#xff1a; 创建项目完成后在kei…

【jvm】程序计数器的特征

目录 1. 说明2. 线程私有3. 存储指令地址4. 不会发生内存溢出5. 生命周期与线程相同 1. 说明 1.JVM&#xff08;Java虚拟机&#xff09;中的程序计数器&#xff08;Program Counter Register&#xff09;&#xff0c;简称PC寄存器&#xff0c;具有几个显著的特征&#xff0c;这…

C语言 | Leetcode C语言题解之第365题水壶问题

题目&#xff1a; 题解&#xff1a; bool canMeasureWater(int jug1Capacity, int jug2Capacity, int targetCapacity) {int j1 jug1Capacity < jug2Capacity ? jug1Capacity : jug2Capacity, j2 jug1Capacity > jug2Capacity ? jug1Capacity : jug2Capacity;if (ta…

Umi-OCR 文字识别工具

免费开源的离线orc识别功能 git地址 感谢大佬的贡献 Umi-OCR 文字识别工具 使用说明 • 下载地址 • 更新日志 • 提交Bug 免费&#xff0c;开源&#xff0c;可批量的离线OCR软件 适用于 Windows7 x64 、Linux x64 免费&#xff1a;本项目所有代码开源&#x…

推荐系统三十六式学习笔记:产品篇36 | 组建推荐团队及工程师的学习路径

目录 团队组建个人成长总结 如果你是老板&#xff0c;或者是公司里的推荐系统包工头&#xff0c;那么你一定会关心&#xff1a;要凑齐多少人才能开始搬砖&#xff1f; 一个推荐系统复杂度没有上限&#xff0c;但是有最低标准&#xff0c;所以下面在估算推荐系统团队规模时&…

SpringBoot (面试篇)

什么是SpringBoot 通过SpringBoot&#xff0c;可以轻松的创建独立的&#xff0c;基于生产级别的Spring的应用程序&#xff0c;您可以“运行”它们。大多数SpringBoot应用程序要最少的Sprig配置 为什么要用SpringBoot 快速开发 快速整合 配置简化 内嵌服务容器 SpringBoot与…

Verilog刷题笔记59

题目: Exams/m2014 q6c 解题&#xff1a; module top_module (input [6:1] y,input w,output Y2,output Y4);assign Y2y[1]&w0;assign Y4(y[2]&w1)|(y[3]&w1)|(y[5]&w1)|(y[6]&w1);endmodule结果正确: 注意点: 起初&#xff0c;我的代码有错误,代码如下…

9 正则表达式:Java爬虫和正则表达式、String中的正则表达式方法(基本语法7)

文章目录 前言一、正则表达式1 [ ] 语法(1)[ABC] 和 [^ABC](2)[A-Z]和[a-zA-Z]小总结2 特殊字符语法(\w 这些)3 数量符4 \ 、()、 |5 锚点 ^ 和 $,\b,\B6 (?i) : 忽略其后面的大小写 ---- 这个Java是可以的,其他语言我不知道(正则表达式虽然大多通用,但也有部分是…

视频检索技术为电子商务直播领域带来了前所未有的革新

视频检测在这个场景中指的是通过视频流实时识别和检索直播中销售人员展示的商品。这涉及到从连续的视频帧中分析和识别商品的视觉内容&#xff0c;通常与语音和文本数据结合&#xff0c;以提高识别准确性。 技术原理 文本引导的注意机制&#xff1a;这一机制通过直播中销售人员…