vue3学习——mock数据

最新推荐文章于 2024-09-03 09:18:21 发布

可乐KL

最新推荐文章于 2024-09-03 09:18:21 发布

阅读量468

点赞数 6

分类专栏： vue3 文章标签：学习前端 vue3

本文链接：https://blog.csdn.net/m0_49494051/article/details/136019291

版权

vue3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vite项目中配置vite-plugin-mock，生成mock数据，以及模拟登录和获取用户信息的API请求。同时展示了如何在主入口文件中使用axios进行测试。

摘要由CSDN通过智能技术生成

安装

pnpm install -D vite-plugin-mock mockjs

vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        enable: command === 'serve',
      }),
    ],
  }
})

根目录下创建mock/user.ts

//用户信息数据
function createUserList() {
  return [
    {
      id: 1,
      username: 'admin',
      token: 'Admin Token',
    },
    {
      userId: 2,
      username: 'system',
      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) => {
      //获取请求头携带token
      const token = request.headers.token
      //查看用户信息是否包含有次token用户
      const checkUser = createUserList().find((item) => item.token === token)
      //没有返回失败的信息
      if (!checkUser) {
        return { code: 201, data: { message: '获取用户信息失败' } }
      }
      //如果有返回成功信息
      return { code: 200, data: { checkUser } }
    },
  },
]

测试

// 记得安装 axios
// main.ts
import axios from 'axios'
axios({
  url: '/api/user/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '1112111',
  },
})