前端项目学习记录3:mock接口

server/2024/9/25 19:19:52/

1.下载mock接口

pnpm i vite-plugin-mock

2.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
//引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//mock插件提供方法
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ command }) => {return {plugins: [vue(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]'}),viteMockServe({localEnabled: command === 'serve',})],resolve: {alias: {"@": path.resolve(__dirname, "./src"),}},css: { //scss全局变量的配置preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: `@import "./src/styles/variable.scss";`}}},}
})

        如果localEnabled爆红的话就把vite-plugin-mock的版本换成2.9.6

"vite-plugin-mock": "^2.9.6",

3.项目文件夹下创建mock文件夹

        文件名看情况

function createUserList() {return [{id: 1,name: '张三',age: 18,password: '123456'},{id: 2,name: '李四',age: 20,password: '123456'}]
}//对外暴露一个数组:数组里面包含两个接口
//登录假的接口
//获取用户信息的假的接口
export default [{url: '/api/user/login',method: 'post',response: ({ body }) => {const { username, password } = bodyconst userList = createUserList()const user = userList.find(item => item.name === username && item.password === password)if (user) {return {code: 200,message: '登录成功',data: user}} else {return {code: 400,message: '用户名或密码错误',data: null}}}}
]


http://www.ppmy.cn/server/27055.html

相关文章

C# Windows Forms 应用程序中连接到 数据库

要在 C# Windows Forms 应用程序中连接到 SQL Server,你需要使用 .NET Framework 的 System.Data.SqlClient 命名空间,这个命名空间提供了连接和操作 SQL Server 的工具。以下是一个简单的示例,展示如何建立连接并执行 SQL 查询。 步骤 1: 添…

创建SpringBoot和RabbitMQ的整合项目

文章目录 创建SpringBoot和RabbitMQ的整合项目首先快速创建一个maven项目引入SpringBoot整合rabbitMQ的依赖在src/main目录下创建resources目录并引入配置文件写消息发送者MessageSender写消息接收者MessageReceiver写RabbitMQConfig配置类写SpringBoot启动主类CommandLineRunn…

ChatGPT的AI“记忆”可以记住付费客户的偏好

通过记住有关 ChatGPT Plus 订阅者的详细信息,OpenAI 的聊天机器人添加了更多个人助理风格的功能 OpenAI 在今年二月宣布了 “记忆 ”功能,该功能允许 ChatGPT 更永久地存储查询、提示和其他自定义功能。当时,只有 “一小部分 ”用户可以使用…

opencv基础篇 ——(十一)常用照片处理函数

改善图像的亮度(illuminationChange) 用于改善光照条件不佳导致的图像对比度低下或局部过暗/过亮的问题。该函数通过模拟全局和局部光照变化,旨在提高图像的整体视觉质量,特别是在低光照条件下,使得图像中的重要细节更加清晰可见。 函数原型…

latex+vscode一直报错,配置文件json和环境变脸配置

1、json配置文件 {"latex-workshop.latex.tools": [{"name": "xelatex","command": "xelatex","args": ["-synctex1","-interactionnonstopmode","-file-line-error","%DOCF…

【webrtc】MessageHandler 8: 基于线程的消息处理:处理音频输入输出断开

m98代码,看起来m114 去掉了MessageHandler :音频的录制和播放 都使用了on message,但只是用来通知并处理流的断开的。AAudioRecorder AAudioRecorder 处理流断开 OnErrorCallback :有可能 错误回调是别处来的,是其他线程, 但是这个错误的处理要再自己的线程执行: 音频播…

idm下载速度慢解决办法 idm批量下载怎么用 idm优化下载速度 Internet Download Manager解决下载速度慢的方法教程

IDM (Internet Download Manager)是一款兼容性大,支持多种语言的下载管理软件,它可以自动检测并下载网页上的内容,这正是这一优点,使得它受到了广大用户的喜爱。但是在下载的过程中,我们会遇到idm下载速度慢怎么回事&a…

ThinkPHP8 导出Excel数据表格

1、开发版本 Think PHP8.0、PHP8.0,并非低版不能用,仅因本人当前版本如此。 部分参数需自行进行修改,具体查看执行代码. Excel有默认的表格样式,如需修改,根据实际应用场景进行设置即可。 2、实现原理 1.安装Spre…