前端项目学习记录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
                }
            }
        }
    }
]
相关推荐
Chef_Chen38 分钟前
从0开始学习计算机视觉--Day09--卷积与池化
深度学习·学习·计算机视觉
fengye2071612 小时前
板凳-------Mysql cookbook学习 (十一--------10)
学习·mysql·adb
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
西西西仓鼠8 小时前
python学习打卡:DAY 40 训练和测试的规范写法
学习
Magnetic_h8 小时前
【iOS】方法与消息底层分析
笔记·学习·macos·ios·objective-c·cocoa
今天背单词了吗9809 小时前
算法学习笔记:19.牛顿迭代法——从原理到实战,涵盖 LeetCode 与考研 408 例题
笔记·学习·算法·牛顿迭代法
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频