Mock.js 的使用方法代码示例

news2024/9/20 9:41:22

mock.js 的安装

npm install -D vite-plugin-mock mock.js

vite.config.ts配置:

import { viteMockServe } from 'vite-plugin-mock'
import { userConfigExport, ConfigEnv } from 'vite'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      viteMockServe({
        localEnabled: command === 'serve'
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
  }
})

接口模拟:

function createUserList(){
    return [{
        userId: 1,
        userName: '张三',
        password: '111111',
        desc: '平台管理员',
        roles: ['cuser.detail'],
        routes: ['home'],
        token: 'admin token'
    },{
        userId: 2,
        userName: '李四',
        password: '111111',
        desc: '系统管理员',
        roles: ['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 } = checkUser
            return { code: 200, data: { token }}
        }
    },
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            const token = request.headers.token;
            const checkUser = createUserList().find(item => item.token === token)
            
            if(!checkUser){
                return { code:201, data: { message: '获取用户信息失败'}}
            }
            return { code: 200, data: { checkUser}}
        }
    }
]

接口调用:

axios({
    url: '/api/user/login',
    method: 'post',
    data: {
        userName: '张三',
        password: '111111'
    }
})

请求成功。

image.png

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

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

相关文章

智能气象站:气象监测的“智慧眼”

在当今日新月异的科技时代,气象监测与预报早已不再是简单的风云变幻的预测,而是融入了大量先进技术,成为了影响社会生产生活的重要因素。 智能气象站,顾名思义,是运用现代物联网、大数据、云计算等先进技术&#xff0c…

R包:蛋白质组学质控评估PTXQC包

介绍 PTXQC包是2016年发表在J Proteome Res期刊上的R包,它主要是对MaxQuant输出结果进行提取处理从而获得评估蛋白质质量结果。 安装 从github安装,安装过程会自动构建tutorial。 devtools::install_github("cbielow/PTXQC", build_vignet…

精确计算应用的冷启动耗时

在iOS项目中,冷启动时间是指从用户点击应用图标开始,到应用完全加载并呈现出第一个界面(可能需要网络请求必要的数据)所花费的时间。这里以 main 函数为界,分为两个时间段: 从用户点击应用图标 ~ invoke m…

Open3D 计算点云的平均密度

目录 一、概述 1.1基于领域密度计算原理 1.2应用 二、代码实现 三、实现效果 2.1点云显示 2.2密度计算结果 一、概述 在点云处理中,点的密度通常表示为某个点周围一定区域内的点的数量。高密度区域表示点云较密集,低密度区域表示点云较稀疏。计算…

【Linux】记录一起网站劫持事件

故事很短,处理也简单。权当记录一下,各位安全大大们手下留情。 最近一位客户遇到官网被劫持的情况,想我们帮忙解决一下(本来不关我们的事,毕竟情面在这…还是无偿地协助一下),经过三四轮“谦让…

数据结构--堆,堆排序

1.树概念及结构 1.1树的概念 树是一种 非线性 的数据结构,它是由 n ( n>0 )个有限结点组成一个具有层次关系的集合。 把它叫做树是因 为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的 。 有一个 特殊的结…

纳米尺度表面分析:微区XPS优势-测试狗材料测试

纳米尺度表面分析:微区XPS优势 随着科学技术的不断发展,纳米技术在各个领域得到了广泛的应用,纳米尺度表面分析作为纳米技术研究的重要手段,对于揭示材料微观结构、理解材料性能与功能机制具有重要意义;在这其中&#…

群体优化算法---文化算法介绍,求解背包问题

介绍 文化算法(Cultural Algorithm, CA)是一种基于文化进化理论的优化算法,首次由Robert G. Reynolds在20世纪90年代提出。文化算法通过模拟人类社会中的文化进化过程,利用个体与群体的双重进化机制来解决优化问题。其基本思想是…

S271系列RTU在旅游景区人流监控中的应用案例

S271系列RTU在旅游景区人流监控中的应用案例 随着全球旅游业的迅猛发展,旅游景区的管理者越来越关注如何利用先进的技术手段提升游客体验、优化管理效率以及确保安全。S271系列RTU作为一款先进的无线工业物联网设备,在旅游景区的人流监控中展现出了其独…

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用,本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14,如需更换mindspore版本,可更改下面mi…

物联网实训室建设可行性报告

一、建设物联网实训室的目的和意义 随着信息技术的快速发展,物联网(IoT)已成为推动社会进步和经济发展的关键技术之一。物联网技术的集成应用,不仅能够提高生产效率,还能促进智慧城市、智能家居、智能农业等多个领域的…

vscode 如何配置快速生成 vue3 模板

(1)点击 vscode 左下角的齿轮设置按钮,点击用户代码片段 (2)输入 vue,选择 vue.json 文件 (3)在注释下添加如下代码即可 {"Print to console": {"prefix": &q…

vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model

6、Vue指令 指令:带有v-前缀的特殊标签属性 (1)v-html 作用:设置元素的innerHTML 语法:v-html“表达式” 示例: 提供一个地址,这里是百度的地址,通过v-html渲染 结果&#xff…

最新国内免费使用GPT4o、4.0、3.5 的方法

为了方便大家对GPT有更好的了解,这里特地整理了一个表格做对比 这些模型展示了OpenAI在自然语言处理领域的持续进步,每一代模型都在理解和生成能力、效率和适用性方面进行了显著提升。 网站汇总 这里顺便给大家汇总一下国内同类型的网站,有…

python--实验4 字符串与正则表达式

一、实验目的: 熟悉字符串切片、运算等操作掌握常用字符串操作函数和方法掌握正则表达式 二、实验内容: 说明:基础题为必做题,提高题为选做题 1、 (基础题) 编写程序,要求用户输入一个身份证号,根据身份…

Java面试八股之MySQL支持哪些数据类型

MySQL支持哪些数据类型 MySQL支持多种数据类型,这些类型可以大致分为三大类:数值类型、日期/时间类型和字符串类型。下面是一些常见的数据类型及其用途: 数值类型 整数类型: TINYINT:通常占用1字节。 SMALLINT&am…

11 个例子讲清spark提交命令参数

目录 提交命名参数详情为什么有这么多参数如何开始学习一些具体的例子1. 基本的Spark应用提交2. 提交带有依赖的Python脚本3. 运行Spark SQL作业4. 提交Spark Streaming作业5. 使用外部包运行Spark作业6. 动态资源分配7. 使用多个配置文件8. GPU 支持9. 自定义日志配置10. 使用…

【nginx】nginx的配置文件到底是什么结构,到底怎么写?

背景:我window中下载了一个nginx,想要通过nginx来对本地的两个项目做动态代理,但是没想到下载启动都没遇见什么问题,但是在配置nginx.conf配置文件时,遇见了很多问题,查了好久没查到什么特别有用的内容&…

微信小程序开发跳转京东,淘宝小程序

没有淘宝小程序,所以只能提示他复制链接网页打开 跳转京东小程序 获取京东小程序 京东小程序appId:wx91d27dbf599dff74 或者点开京东小程序,查看详情即可获取到京东的appid 店铺页面路径 店铺首页:pages/shop/index/index?…

无人机在交通管理方面的应用与潜力

随着智能化和数字化技术的发展,无人机已经成为智慧交通管理体系中的重要一环。无人机能够搭载各种专业设备,如超清摄像头、红外热成像摄像头、目标跟踪器等,从而完成多任务的数据采集和快速机动的任务执行。这些数据通过无线传输实时回传&…