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

vue3后台管理框架之Mock开发

前言

在前后端对接中,有时后端的接口数据没有 那么快能给出,因此我们可以通过mock模拟自己的请求数据,在后端接口没有给出的同时,先使用mock请求的数据完成前端相关的逻辑

官方文档:vite-plugin-mock

vite 的数据模拟插件,是基于 vite.js 开发的。 并同时支持本地环境和生产环境。 Connect 服务中间件在本地使用,mockjs 在生产环境中使用

安装依赖

pnpm add vite-plugin-mock@2.9.6 mockjs@1.1.0 -D

配置

新建mock测试文件 mock/example.ts

export default [{url: '/mock/getMapInfo',method: 'get',response: () => {return {code: 200,title: 'mock请求测试'}}}
]

如果是mock的请求,建议大家以 /mock 开头

vite.config.js

//vite.config.jsimport { viteMockServe } from 'vite-plugin-mock'plugins: [vue(),viteMockServe({supportTs: true, //是否开启支持tsmockPath: 'mock', //设置mockPath为根目录下的mock目录,为根目录localEnabled: command === 'serve', //设置是否监视mockPath对应的文件夹内文件中的更改prodEnabled: true, //prod环境下是否可以使用mocklogger: true //是否在控制台显示请求日志})],

此时 开发环境的mock 已经配置好了,如果需要配置生产环境还需要下面的配置

使用

当然了我们需要先下载axios依赖

pnpm add axios@0.21.3 -S

src/views/dashboard/index.vue

<template><button @click="listReq">listReq</button>
</template>
<script setup>import axios from 'axios'const listReq = () => {axios.get('/mock/getMapInfo').then((res) => {if (res.data) {console.log(res.data)alert(res.data.title)}})}
</script>
测试
<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
// import SvgIcon from '@/components/SvgIcon/index.vue'
// console.log('111')
import axios from 'axios'
const listReq = () => {axios.get('/mock/getMapInfo').then((res) => {if (res.data) {console.log(res.data)// eslint-disable-next-line no-alertalert(res.data.title)}})
}
</script><template><div class="box"><el-button type="primary" size="default" :icon="Check">朱啊</el-button><h1>11111</h1><SvgIcon name="phone" /></div><div class="test">11111</div><button @click="listReq">listReq</button>
</template><style scoped lang="scss">
.test {background-color: $base-background;width: 100px;height: 100px;
}
.box {width: 200px;height: 200px;background-color: beige;h1 {color: red;}
}
</style>

模拟用户数据接口

在mock文件夹内部创建一个user.ts文件

//用户信息数据function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]}export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},]

相关文章:

vue3后台管理框架之Mock开发

前言 在前后端对接中&#xff0c;有时后端的接口数据没有 那么快能给出&#xff0c;因此我们可以通过mock模拟自己的请求数据&#xff0c;在后端接口没有给出的同时&#xff0c;先使用mock请求的数据完成前端相关的逻辑 官方文档&#xff1a;vite-plugin-mock vite 的数据模…...

03_51单片机点亮LED灯

51单片机是一种非常常见的单片机型号&#xff0c;广泛应用于各种嵌入式系统和电子设备中。LED灯是一种常见的输出设备&#xff0c;用于显示信息或指示状态。下面是关于51单片机控制LED灯的介绍&#xff1a; 1. 连接LED灯&#xff1a;将LED的正极连接到51单片机的一个I/O引脚&a…...

【前端设计模式】之备忘录模式

备忘录模式是一种行为设计模式&#xff0c;它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。在前端开发中&#xff0c;备忘录模式可以用于保存和恢复用户界面的状态&#xff0c;以及实现撤销和重做功能。 备忘录模式特性&#xff1a; 封装了对象的状态&#xff1a;备…...

复习Day15:栈与队列part02:20. 有效的括号、1047.删除字符串中所有相邻重复项

我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用CLion了&#xff0c;使用leetcode自带的IDE模拟面试环境。 历史博客链接&#xff1a; http…...

基于Java的宠物商城管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

Python的GIL存在的情况下,是否还有必要添加线程锁。

GIL锁的产生&#xff1a; 为了保证在单线程情况下&#xff0c;Python的正常执行和效率&#xff0c;GIL锁产生了&#xff0c;由于只有一把锁就不会产生死锁也不用切换。 对于Python语言而言&#xff0c;只有CPython解释器&#xff08;用C语言编写的Python解释库&#xff09;存在…...

基于下垂控制的孤岛双机并联逆变器环流抑制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 在实际应用中逆变器都是并联运行的,但是逆变器的并联运行也存在不少问题,由于线路阻抗差异、各个逆变器输出端瞬时电压幅值不同等,都容易导致环流的出现。环流会导致逆变器损耗增加,从而影响微电网的输出效率…...

spring事务面试题

1.Spring 事务实现方式有哪些&#xff1f; 事务就是一系列的操作原子操作,Spring事务机制主要 包括声明式事务和编程式事务。 编程式事务&#xff1a;通过编程的方式管理事务&#xff0c;自己设置未提交模式&#xff0c;自己获取连接&#xff0c;自己预编译&#xff0c;自己回…...

C++标准库算法整理

目录 1、数值操作 1.1、std::accumulate 1.2、std::inner_product 1.3、std::partial_sum 1.4、std::exclusive_scan 1.5、std::inclusive_scan 1.6、std::reduce 2、相邻元素 2.1、std::adjacent_difference 2.2、std::adjacent_find 2.3、std::unique 2.4、std::u…...

【Codeforces】Codeforces Round 903 (Div. 3)【待补】

Dashboard - Codeforces Round 903 (Div. 3) - Codeforces Problem - C - Codeforces Problem - D - Codeforces...

workerman 运行时报错 Call to undefined function posix_getpid()

使用 验证php扩展是否齐全 curl -Ss https://www.workerman.net/check | php缺少posix 下载 在 Linux 系统上&#xff0c;可以使用包管理器来安装 php-posix 扩展&#xff0c;例如 Ubuntu 系统可以通过以下命令进行安装&#xff1a; sudo apt-get install php-posix如果你使用…...

【探讨C++中的临时对象:一时之物还是永恒之道?】

在C编程中&#xff0c;临时对象是一个经常引起讨论的话题。它们是什么&#xff0c;为什么它们存在&#xff0c;以及如何正确使用它们&#xff1f;本文将深入探讨C中的临时对象&#xff0c;帮助您理解它们的含义和用途。 什么是临时对象&#xff1f; 临时对象&#xff08;Temp…...

二叉树相关算法

1、二叉树基本操作 二叉树的定义就不在这里多说了&#xff0c;下面这个图就是一个简单的二叉树&#xff1a; 二叉树的三种遍历方式&#xff1a; 前序遍历&#xff1a;头左右&#xff0c;也就是先头后左再右&#xff1a;1245367 public static void prePrint(BinaryTreeNode …...

Vue_Bug npm install报错 code:128

Bug描述&#xff1a; npm install报错 code&#xff1a;128 npm ERR! Warning: Permanently added ‘github.com’ (ED25519) to the list of known hosts. npm ERR! gitgithub.com: Permission denied (publickey). npm ERR! fatal: Could not read from remote repository. n…...

【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战

前言 【Unity ShaderGraph】| 如何快速制作一个 马赛克效果 实战一、效果展示二、马赛克效果四、应用实例 前言 本文将使用Unity 的ShaderGraph制作一个马赛克的效果&#xff0c;可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章&#xff1a;【Unity S…...

【Java 进阶篇】JavaScript DOM Document对象详解

在前端开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互&#xff0c;实现动态的网页效果。DOM的核心部分之一就是Document对象&#xff0c;它代表了整个HTML文档。在本篇博客中&#xff0c;我们将深…...

LetCode刷题[简单题](5)按摩师,迭代出最优解(卡尔曼滤波也是类似迭代)

所有的遍历寻求有条件约束的最大值都可以转换成&#xff0c;新的数带来的最大值的变化&#xff0c;问题往这个方向转化就可以&#xff0c;问题都是在最中进行选择的&#xff0c;因此关注的问题最大值得上限就好了&#xff0c;不必关注可能随机的下限。关注随机可能的下限会把问…...

C/C++笔试易错与高频题型图解知识点(二)—— C++部分(持续更新中)

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2 引用&引用与指针的区别 2.1 引用初始化以后不能被改变&#xff0c;指针可以改变所指的对象 2.2 引用和指针的区别 3 构造函数与析构函数系列题 3.1构造函数与析…...

使用new创建动态结构

在运行时创建数组优于在编译时创建数组&#xff0c;对于结构&#xff08;同一个结构可以存储多种类型的数据。&#xff09;也是如此。需要在程序运行时为结构分配所需的空间&#xff0c;这也可以使用new运算符来完成。通过使用new&#xff0c;可以创建动态结构。同样&#xff0…...

论文笔记与复现[156]PARAFAC. tutorial and applications

原文下载&#xff1a;https://www.sciencedirect.com/science/article/abs/pii/S0169743997000324 摘要 本文介绍了PARAFAC的多维分解方法及其在化学计量学中的应用。PARAFAC是PCA向高阶数组的推广&#xff0c;但该方法的一些特性与普通的二维情况截然不同。例如&#xff0c;…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...