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

2024-08-25 00:12
文章标签 javascript 实战 数据 接口 模拟 vue vue3 获取 axios frontend vite 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。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
Hadoop集群数据均衡之磁盘间数据均衡

Hadoop集群数据均衡之磁盘间数据均衡

生产环境，由于硬盘空间不足，往往需要增加一块硬盘。刚加载的硬盘没有数据时，可以执行磁盘数据均衡命令。（Hadoop3.x新特性） plan后面带的节点的名字必须是已经存在的，并且是需要均衡的节点。 如果节点不存在，会报如下错误： 如果节点只有一个硬盘的话，不会创建均衡计划： （1）生成均衡计划 hdfs diskbalancer -plan hadoop102 （2）执行均衡计划 hd
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2