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

1.下载mock接口

bash 复制代码
pnpm i vite-plugin-mock

2.配置vite.config.ts

TypeScript 复制代码
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

bash 复制代码
"vite-plugin-mock": "^2.9.6",

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

文件名看情况

TypeScript 复制代码
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 } = body
            const 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
                }
            }
        }
    }
]
相关推荐
江城开朗的豌豆几秒前
前端性能救星!用 requestAnimationFrame 丝滑渲染海量数据
前端·javascript·面试
江城开朗的豌豆几秒前
src和href:这对'双胞胎'属性,你用对了吗?
前端·javascript·面试
江城开朗的豌豆7 分钟前
forEach遇上await:你的异步代码真的在按顺序执行吗?
前端·javascript·面试
万少16 分钟前
HarmonyOS Next 弹窗系列教程(3)
前端·harmonyos·客户端
~Yogi1 小时前
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
学习·spring·缓存
七灵微1 小时前
【后端】单点登录
服务器·前端
Moonnnn.3 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
行云流水剑5 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
持久的棒棒君5 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@7 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流