前端项目学习记录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
                }
            }
        }
    }
]
相关推荐
DKPT2 分钟前
Java享元模式实现方式与应用场景分析
java·笔记·学习·设计模式·享元模式
汪子熙4 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到115 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆9 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er14 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0617 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444019 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆20 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子23 分钟前
Web开发中的文件下载
前端·javascript·面试
Green1Leaves28 分钟前
pytorch学习-11卷积神经网络(高级篇)
pytorch·学习·cnn