Mock.js 的使用方法代码示例

mock.js 的安装

npm install -D vite-plugin-mock mock.js

vite.config.ts配置:

import { viteMockServe } from 'vite-plugin-mock'
import { userConfigExport, ConfigEnv } from 'vite'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      viteMockServe({
        localEnabled: command === 'serve'
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
  }
})

接口模拟:

function createUserList(){
    return [{
        userId: 1,
        userName: '张三',
        password: '111111',
        desc: '平台管理员',
        roles: ['cuser.detail'],
        routes: ['home'],
        token: 'admin token'
    },{
        userId: 2,
        userName: '李四',
        password: '111111',
        desc: '系统管理员',
        roles: ['cuser.detail', 'cuser.user'],
        routes: ['home'],
        token: 'system token'
    }]
}

export default [
    // 登录
    {
        url: '/api/user/login',
        method: 'post',
        response: ({ body}) => {
            const { userName, password } = body;

            const checkUser = createUserList().find(
                item => item.userName === userName && item.password === password
            )

            if(!checkUser){
                return { code: 201, data: {message: '账号或密码不正确'}}
            }

            const { token } = checkUser
            return { code: 200, data: { token }}
        }
    },
    {
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
            const token = request.headers.token;
            const checkUser = createUserList().find(item => item.token === token)
            
            if(!checkUser){
                return { code:201, data: { message: '获取用户信息失败'}}
            }
            return { code: 200, data: { checkUser}}
        }
    }
]

接口调用:

axios({
    url: '/api/user/login',
    method: 'post',
    data: {
        userName: '张三',
        password: '111111'
    }
})

请求成功。

image.png

相关推荐

  1. 使用QGLShaderProgram类教程和示例代码

    2024-07-11 01:42:02       38 阅读
  2. 使用axios发送请求格式是什么?示例代码

    2024-07-11 01:42:02       15 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 01:42:02       3 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 01:42:02       3 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 01:42:02       2 阅读
  4. Python语言-面向对象

    2024-07-11 01:42:02       2 阅读

热门阅读

  1. GraalVM简介及使用

    2024-07-11 01:42:02       8 阅读
  2. 徐州服务器租用:论带宽的作用有哪些

    2024-07-11 01:42:02       9 阅读
  3. 1. Go 九九乘法表

    2024-07-11 01:42:02       10 阅读
  4. Perl词法作用域:自定义编程环境的构建术

    2024-07-11 01:42:02       9 阅读
  5. SQL Server 设置端口详解

    2024-07-11 01:42:02       9 阅读
  6. MyBatis 框架核心及面试知识要点

    2024-07-11 01:42:02       9 阅读
  7. NLP - 基于bert预训练模型的文本多分类示例

    2024-07-11 01:42:02       10 阅读