当前位置: 首页 > news >正文

Vue项目使用mockjs模拟后端接口

文章目录

    • 操作步骤
      • 1. 安装 mockjs 和 vite-plugin-mock
      • 2. 安装 axios
      • 3. 创建mock路径
      • 4. 配置 viteMockConfig
      • 5. 编写第一个mock接口
      • 6. 创建 createProdMockServer
      • 7. 配置 axios
      • 8. 编写请求接口
      • 9. 在页面中使用

操作步骤

1. 安装 mockjs 和 vite-plugin-mock

vite-plugin-mock 是 vite 提供的mock插件,配合mockjs 一起使用,比较方便。

npm install mockjs vite-plugin-mock=2.9.6

2. 安装 axios

通过axios发送请求,请求到mock的模拟接口

npm install axios

3. 创建mock路径

src 文件夹下创建 mock 文件夹,作为后续编写mock接口的路径

4. 配置 viteMockConfig

在 vite.config.js 中配置 viteMockConfig
mockPath 就是mock文件夹的路径

import { defineConfig } from 'vite'
import {viteMockServe} from 'vite-plugin-mock'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),viteMockServe({mockPath: './src/mock'})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

5. 编写第一个mock接口

mock文件夹下新建一个 js 文件,如user.js ,作为专门编写与用户相关的接口数据,内容如下:

export default[{url: '/mock/user/test',method: 'get',response: () => {return {code: 200,msg: 'ok',data: 'hello world'}}}
]

该文件创建了一个模拟接口,地址为/mock/user/test

6. 创建 createProdMockServer

mock文件夹下创建一个index.js 文件,内容如下:

import {createProdMockServer} from 'vite-plugin-mock/es/createProdMockServer'
// 导入上面写的user.js
import userModule from './user'export function setupProdMockServer(){createProdMockServer([...userModule])
}

7. 配置 axios

创建 src/utils/system/request.js 文件用来全局配置axios,内容如下:

// 在这个文件中配置axios,以及拦截请求
import axios from 'axios'// const baseURL = import.meta.env.VITE_BASE_URLconst service = axios.create({bbaseURL: '/mock',timeout: 5000
})// 拦截器,错误处理配置export default service

8. 编写请求接口

创建src/api/user.js 文件作为请求用户相关数据的文件,内容如下:

// 导入配置过的 axios
import request from '@/utils/system/request'export function loginApi(data){return request({url: '/user/test',method: 'get',baseURL: '/mock',data})
}

该文件创建了一个请求接口loginAPi ,用来请求之前创建的mock接口地址

9. 在页面中使用

首先在需要的页面导入请求的接口:

import { loginApi } from "../../api/user.js";

然后以Promise的形式使用

onMounted(() => {loginApi({}).then(res => {console.log(res)})
})

如果控制台打印出结果,则说明配置成功

相关文章:

Vue项目使用mockjs模拟后端接口

文章目录 操作步骤1. 安装 mockjs 和 vite-plugin-mock2. 安装 axios3. 创建mock路径4. 配置 viteMockConfig5. 编写第一个mock接口6. 创建 createProdMockServer7. 配置 axios8. 编写请求接口9. 在页面中使用 操作步骤 1. 安装 mockjs 和 vite-plugin-mock vite-plugin-mock …...

Linux下使用arping检测IP地址是否冲突

arping简介 在Linux中,arping是一个用来发送ARP请求到一个相邻主机的工具,通常用于检测网络上的IP地址冲突。 使用arping检测IP地址是否冲突的方法 例1:使用如下命令检测10.206.216.95是否冲突 (使用-I参数指定网络接口) # arping -I eth…...

为什么 npm run serve 正常,npm run build 就报错:digital envelope routines::unsupported

这个错误通常与 Node.js 版本和使用的加密算法有关。让我解释一下原因和可能的解决方案: 错误原因 这个错误(“error:0308010C:digital envelope routines::unsupported”)通常发生在以下情况: 使用较新版本的 Node.js&#xf…...

模电基础 - 简介

目录 零 .简介 一. 学习方法 二. 教材推荐 三. 总结 零 .简介 “模电”即模拟电子技术,是电子信息工程、电气工程及其自动化等相关专业的一门关键基础课程。 首先,在半导体器件方面,二极管是一种具有单向导电性的器件,由 P 型…...

uniapp中实现瀑布流 短视频页面展示

直接上干货 第一部分为结构 <swiper class"list" :currentindex change"swiperchange" scrolltolower"onReachBottom"><swiper-item style"overflow: scroll;" v-for"(item,index) in 2" :key"index"&g…...

python-开关灯(赛氪OJ)

[题目描述] 假设有 N 盏灯&#xff08;N 为不大于 5000 的正整数&#xff09;&#xff0c;从 1 到到 N 按顺序依次编号&#xff0c;初始时全部处于开启状态&#xff1b;第一个人&#xff08; 1 号&#xff09;将灯全部关闭&#xff0c;第二个人&#xff08; 2 号&#xff09;将…...

基于改进高斯-拉普拉斯滤波器的一维时间序列平滑与降噪(MATLAB)

以图像处理为例&#xff0c;拉普拉斯算子是基于图像的二阶导数来找到边缘并搜索过零点&#xff0c;传统的拉普拉斯算子常产生双像素宽的边缘&#xff0c;对于较暗区域中的亮斑进行边缘检测时&#xff0c;拉普拉斯运算就会使其变得更亮。因此&#xff0c;与梯度算子一样&#xf…...

计算组的妙用!!页面权限控制

需求描述&#xff1a; 某些特殊的场景下&#xff0c;针对某页看板&#xff0c;需要进行数据权限卡控&#xff0c;但是又不能对全部的数据进行RLS处理&#xff0c;这种情况下可以利用计算组来解决这个需求。 实际场景 事实表包含产品维度和销售维度 两个维度属于同一公司下面的…...

Self-Instruct构造Prompt的例子

人工构造一批Prompt做种子。&#xff08;Starting with a small seed set of human-written tasks&#xff09;每次把一些种子后来生成的Prompt&#xff0c;放到Input里做few-shot examples&#xff0c;用LLM生成更多的Prompt&#xff1b;&#xff08;Using the LLM to generat…...

友好前端vue脚手架

企业级后台集成方案vue-element-admin-CSDN博客在哔站学习&#xff0c;老师说可以有直接的脚手架&#xff08;vue-element-admin&#xff09;立马去搜索&#xff0c;找到了这博主这篇文章 介绍 | vue-element-admin​​​​​​ 官方默认英文版&#xff1a; git clone https:/…...

SQL Server特性

一、创建表 在sql server中使用create table来创建新表。 create table Customers( id int primary key identity(1,1), name varchar(5) ) 该表名为Customers其中包含了2个字段&#xff0c;分别为id&#xff08;主键&#xff09;以及name。 1、数据类型 整数类型&#xff…...

华为HCIP Datacom H12-821 卷25

1.单选题 Smurf攻击一般使用以下哪种协议 A、TCP B、BGP C、ICMP D、DHCP 正确答案&#xff1a; C 解析&#xff1a; Smurf攻击是一种病毒攻击&#xff0c;以最初发动这种攻击的程序“Smurf”来命名。这种攻击方法结合使用了IP欺骗和ICMP回复方法使大量网络传输充斥目…...

如何在 Selenium Python 中解决验证码 | 2024 完整指南

由于在进行网络自动化时遇到验证码是让许多人感到不知所措的问题。这些验证码专为区分人类用户和自动化脚本而设计&#xff0c;对于使用Selenium进行网络爬虫或自动化任务而言&#xff0c;无疑是一个巨大的挑战。2024年的完全指南将为您提供全面的解决方案&#xff0c;帮助您高…...

ASCII码对照表【2024年汇总】

&#x1f37a;ASCII相关文章汇总如下&#x1f37a;&#xff1a; &#x1f388;ASCII码对照表&#xff08;255个ascii字符汇总&#xff09;&#x1f388;&#x1f388;ASCII码对照表&#xff08;Unicode 字符集列表&#xff09;&#x1f388;&#x1f388;ASCII码对照表&#x…...

刷题之买股票的最佳时机(leetcode)

买股票的最佳时机 动态规划入门题。 最简单的模拟式解法&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {//也可以换一种思路&#xff0c;因为只交易一次&#xff0c;那么找出股票最便宜的时候买入&#xff0c;最贵的时候卖出&#xff…...

Apache Seata透过源码解决SeataAT模式整合Mybatis-Plus失去MP特性的问题

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata透过源码解决SeataAT模式整合Mybatis-Plus失去MP特性的问题 透过源码解决SeataAT…...

1.2 如何让机器说人话?万字长文回顾自然语言处理(NLP)的前世今生 —— 《带你自学大语言模型》系列

本系列目录 《带你自学大语言模型》系列部分目录及计划&#xff0c;完整版目录见&#xff1a;带你自学大语言模型系列 —— 前言 第一部分 走进大语言模型&#xff08;科普向&#xff09; 第一章 走进大语言模型 1.1 从图灵机到GPT&#xff0c;人工智能经历了什么&#xff1…...

【QT】按钮类控件

按钮类控件 按钮类控件1. PushButton2. Radio Button3. Check Box4. Tool Button 按钮类控件 1. PushButton 使⽤ QPushButton 表示⼀个按钮&#xff0c;这也是当前我们最熟悉的⼀个控件了. QPushButton 继承⾃ QAbstractButton . 这个类是⼀个抽象类. 是其他按钮的⽗类. 在…...

RedHat运维-Linux软件包管理基础-RHEL9软件包管理基础

Linux软件包管理基础-RHEL9 1. 对于RHEL9来说&#xff0c;软件包管理基础分为增、删、改、查四个部分。对于增来说&#xff0c;有&#xff1a;增加一个仓库的信息文件、启用一个仓库的信息文件、安装rpm包、解压rpm包、安装软件、安装软件组、更新软件。在这里先讲软件包管理中…...

uniapp----- 判断小程序版本有没有更新

const updateManager uni.getUpdateManager();// 当向小程序后台请求完新版本信息&#xff0c;会进行回调updateManager.onCheckForUpdate(function (res) {console.log(是否有新版本, res.hasUpdate);});// 当新版本下载完成&#xff0c;会进行回调updateManager.onUpdateRea…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...