Vue项目中使用Mock.js进行API模拟

Vue项目中使用Mock.js进行API模拟

🌟 前言

欢迎来到我的小天地,这里是我记录技术点滴、分享学习心得的地方。📚

🛠️ 技能清单
  • 编程语言:Java、C、C++、Python、Go、
  • 前端技术:Jquery、Vue.js、React、uni-app、Echarts
  • UI设计: Element-ui、Antd、Color-ui
  • 后端技术:Spring Boot、Mybatis-plus、Swagger
  • 移动开发:Android
  • 操作系统:Windows、Linux
  • 开发框架:RuoYi、微信小程序
  • 开发工具:VSCode、IDEA、Eclipse、WebStorm、HbuildX、Navicat、Xshell、Android Studio、Postman
  • 数据库技术:MySQL、Redis、SQL Server
  • 版本控制:Git

在开发Vue应用时,我们经常需要模拟API响应,以便在后端服务尚未准备好时进行前端开发。Mock.js是一个强大的工具,可以帮助我们轻松创建模拟数据。本教程将指导你如何在Vue项目中集成和使用Mock.js。

安装Mock.js

首先,你需要在你的Vue项目中安装Mock.js。

npm i mockjs

创建Mock数据

在你的项目中创建一个mock目录,并添加一个index.js文件。在这个文件中,我们将定义我们的模拟数据。

// src/mock/index.js
import Mock from 'mockjs'// 创建模拟数据
const data = Mock.mock({'list|1-10': [{'id|+1': 1}]
})// 模拟API响应
Mock.mock('/api/list/', 'get', () => {return data.list;
})

在Vue应用中导入Mock数据

main.js文件中,导入并使用Mock数据。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@/mock' // 导入Mock数据createApp(App).mount('#app')

使用Mock数据

在Vue组件中,你可以像往常一样使用fetchaxios来请求模拟的API。

// page.vue
<template><div><!-- 组件内容 --></div>
</template><script setup lang="ts">
import request from '@/request/index';
import { onMounted, ref } from 'vue'onMounted(() => {request.get('/list/').then((res: any) => {console.log(res.data);})
})
</script><style scoped></style>

配置Axios

为了更好地管理API请求,我们通常会使用Axios。首先安装Axios。

npm i axios

然后创建一个config目录,并添加一个index.js文件来配置Axios。

// src/config/index.js
export const baseURL = '/api'
export const timeout = 10000
export const headers = { 'X-Custom-Header': 'foobar' }

接着创建一个request.js文件来封装Axios请求。

import axios from "axios";
import { baseURL, timeout, headers } from "@/config";//@ts-ignore
const request = axios.create({baseURL,timeout,headers,
});// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
request.interceptors.response.use(function (response) {// 对响应数据做点什么return response;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default request;

配置Vite代理

如果你的开发环境需要代理API请求,你可以在vue.config.js中配置代理。

// vue.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {proxy: {"/api": {target: "http://localhost:5174/",changeOrigin: true,rewrite: (path) => path.replace(/\/api/, ""),},},},
})

以上就是在Vue项目中使用Mock.js进行API模拟的完整步骤。通过这些步骤,你可以在前端开发过程中轻松地模拟后端API,从而提高开发效率。


📌 联系方式

如果您对我们的项目感兴趣,或者有任何技术问题想要探讨,欢迎通过以下方式与我联系。我非常期待与您交流,共同学习,共同进步!

  • 邮箱:2109664977@qq.com
  • Gitee:我的Gitee
  • GitHub:我的GitHub
  • CSDN:我的CSDN
  • 个人博客:访问我的博客

🎉 结语

感谢你的访问,如果你对我的技术文章或项目感兴趣,欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行!🚀


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

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

相关文章

leetcode 经典题目42.接雨水

链接&#xff1a;https://leetcode.cn/problems/trapping-rain-water 题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 思路分析 首先&#xff0c;我们需要遍历数组&#xff0c;对于每个元素&am…

特种车日常检修VR虚拟互动培训软件节省大量的教学资源和成本

随着科技的不断发展&#xff0c;虚拟现实(VR)技术已经逐渐融入了各行各业&#xff0c;其中特种车辆的养护教学也从中受益匪浅。VR虚拟仿真教学在特种车辆养护领域的应用&#xff0c;不仅创新了教学方式&#xff0c;还为提高学员的学习效果和实际操作技能提供了强有力的支持。 特…

从Socks5代理到HTTP代理IP的安全探索与趣味发现

在当今数字化时代&#xff0c;网络安全和隐私保护已经成为我们生活中不可或缺的一部分。而了解代理服务、网络协议以及网络安全&#xff0c;将有助于我们更好地理解和保护自己在网络世界中的权益。本文将带领大家探索Socks5代理、代理IP、HTTP协议等概念&#xff0c;并揭示其中…

05-prometheus的联邦模式-分布式监控

一、联邦模式概述 1&#xff0c;架构介绍 由于&#xff0c;在大型企业中&#xff0c;被监控项目比较多&#xff0c;多到一台prometheus服务无法承载其大量的监控数据的传输&#xff0c;所以&#xff0c;联邦模式应运而生&#xff0c;它同等于zabbix监控的分布式&#xff0c;就…

C/C++蓝桥杯之纪念日问题

算从1921年7月23日中午12时到2020年7月1日一共多少分钟&#xff1f; C语言实现&#xff1a; #include<stdio.h> #include<stdbool.h> bool leapyear(int year) {if (year % 4 0 && year % 100 ! 0 || year % 400 0){return 1;}else{return 0;} } int m…

『大模型笔记』测试本地大模型运行框架Ollama(支持macOS/Windows/Linux)

测试本地大模型运行框架Ollama(支持macOS/Windows/Linux) 文章目录 一. Ollama介绍1.1. 安装1.1.1. 直接安装1.1.2. Docker安装1.2. 下载和运行模型1.3. Ollama目前支持的模型(截止到2024-03-05,持续更新)1.4. Ollama ModelFile(模型文件)二. Open WebUI2.1. 主要特点2.2. Doc…

【代码随想录算法训练营Day37】738.单调递增的数字;总结

文章目录 ❇️Day 37 第八章 贪心算法 part06✴️今日任务❇️738.单调递增的数字自己的思路自己的代码&#xff08;✅通过94.27%&#xff09;随想录思路随想录代码 ☑️968.监控二叉树 &#xff08;可以跳过&#xff09;&#x1f234;总结 ❇️Day 37 第八章 贪心算法 part06 …

sentinel docker 基础配置学习

1&#xff1a;去官网下载 Releases alibaba/Sentinel GitHub 2&#xff1a;保存到linux 3&#xff1a;编写dockerfile FROM openjdk:8-jreLABEL authors"xxx" #第二步创建一个文件夹Z RUN mkdir /app #第三步复制jar 到app 下 COPY xxxxxx-1.8.7.jar /app/#第四…

ArcGIS学习(十三)多源数据下的城市街道功能评估

ArcGIS学习(十三)多源数据下的城市街道功能评估 本任务带来的内容是多元数据下的城市街道功能评估。本任务包括两个关卡: 城市街道空间中观解读 城市街道功能详细评价 首先,我们来看看本任务的分析思路。 1.城市街道空间中观解读 下面我们正式进入第一关的内容一- 城市…

Java Day2 面向对象

这里写目录标题 1、static总结1.1 代码块1.1.1 静态代码块1.1.2 实例代码块1.1.3 小例子 2、继承2.1 权限修饰符2.2 方法重写2.3 子类访问成员特点2.4子类构造器的特点 3、多态4、final、常量4.1 final4.2 常量 5 抽象类5.1 概念5.2 模板设计方法 6、接口6.1 接口新方法6.2 接口…

004-深拷贝浅拷贝

深拷贝&浅拷贝 1、值类型 & 引用类型2、概念3、深拷贝3.1 递归遍历3.2 JSON.parse(JSON.stringify())3.3 $.extend3.4 _.cloneDeep 4、浅拷贝4.1 扩展运算符4.2 Object.assign 1、值类型 & 引用类型 值类型&#xff1a;简单数据类型&#xff0c;基本数据类型&…

msg:xxl-rpc remoting error(connect timed out), for url :

使用xxl定时任务时报错。msg&#xff1a;xxl-rpc remoting error(connect timed out), for url : 最开始找不到解决办法&#xff0c;将以下所有的ipv4地址都试了一遍&#xff0c; 包括ping不通的&#xff0c;也将本机的防火墙关闭处理最后ping通了&#xff0c;但还是无法解决。…

浅谈马尔科夫链蒙特卡罗方法(MCMC)算法的理解

1.解决的问题 计算机怎么在任意给定的概率分布P上采样&#xff1f;首先可以想到把它拆成两步&#xff1a; &#xff08;1&#xff09;首先等概率的从采样区间里取一个待定样本x&#xff0c;并得到它的概率为p(x) &#xff08;2&#xff09;然后在均匀分布U[0,1]上取一个值&a…

媒体邀约服务主要有哪些工作

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体邀约服务是一项繁琐的沟通工作&#xff0c;下面介绍一下51媒体网的主要工作流程。‘ 明确需求&#xff1a;根据客户的传播需求&#xff0c;制定拟邀请媒体名单供客户筛选。 媒体筛选…

RNN循环神经网络及其梯度消失笔记

资料来源 【重温系列】RNN循环神经网络及其梯度消失 手把手公式推导大白话讲解 带时间序列的任务场景 标准神经网络建模的弊端 RNN循环神经网络 网络结构 多输入&#xff0c;多输出 这里的就是对应识别人名的任务&#xff0c;输入就是这里的x1,x2,输出的自然就是0或1了 这种…

针对有容量的电动汽车路由问题的灵活交叉的修正遗传算法

英文&#xff1a;Modified Genetic Algorithm with Flexible Crossover for The Capacitated Electric Vehicle Routing Problem 摘要 本文提出了一种对遗传算法的修改&#xff0c;用一种叫做灵活交叉操作的新技术来解决有容量的电动汽车路由问题&#xff08;CEVRP&#xff0…

二百二十七、Linux——通过shell脚本判断HDFS文件是否存在,如果存在则删除HDFS文件

一、目的 在用脚本去实现对HDFS中过期的ODS层原始数据进行删除后&#xff0c;发现还需要在脚本中对HDFS文件是否存在进行判断&#xff0c;否则如果HDFS文件不存在那么任务执行就会报错 报错原因是这一天的HDFS文件并不存在 原有脚本 #! /bin/bash source /etc/profile nowda…

python爬虫之Appium 的使用

Appium 是一个跨平台移动端自动化测试工具&#xff0c;可以非常便捷地为 iOS 和 Android 平台创建自动化测试用例。它可以模拟 App 内部的各种操作&#xff0c;如点击、滑动、文本输入等&#xff0c;只要我们手工操作的动作 Appium 都可以完成。在前面我们了解过 Selenium&…

使用 Docker 设置 PySpark Notebook

使用 Docker 设置 PySpark Notebook 第 1 步&#xff1a;拉取 Docker 镜像 首先拉取jupyter/all-spark-notebook包含 Spark 3.5.0 的镜像。 docker pull jupyter/all-spark-notebook:spark-3.5.0 第 2 步&#xff1a;设置您的工作区 在运行 Docker 映像之前&#xff0c;我们…

开源大数据集群部署(十四)Ranger集成Hbase

作者&#xff1a;櫰木 在hd1.dtstack.com主机上执行 在hmaster和back master上进行安装和执行 解压ranger-2.3.0-hbase-plugin [roothd1.dtstack.com ranger-plugin]# cd /root/bigdata [roothd1.dtstack.com ranger-plugin]# tar -zvxf ranger-2.3.0-hbase-plugin -C /opt配…