前端项目学习记录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
                }
            }
        }
    }
]
相关推荐
闲蛋小超人笑嘻嘻几秒前
前端面试六之axios
前端
万少4 分钟前
我们又来啦 又又上架了一个鸿蒙项目-萤火故事屋
前端·harmonyos·客户端
lil44x_12 分钟前
嵌入式学习笔记DAY36(事务、网页制作、HTTP协议)
笔记·学习
江城开朗的豌豆23 分钟前
HTML5 datalist:让你的输入框拥有'读心术'的超能力!
前端·javascript·面试
江城开朗的豌豆25 分钟前
事件绑定三件套:从onclick到addEventListener的进化史
前端·javascript·面试
Quine_f39 分钟前
模拟IC设计提高系列5-温度角与蒙特卡洛仿真
学习
ahhhhaaaa-1 小时前
【学习笔记】QUIC
数据库·笔记·学习·阿里云·golang·云计算
小满zs3 小时前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon4 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
头疼的程序员5 小时前
MySQL学习之触发器
学习·mysql