实现vue3配置mockjs

本文用来记录使用vue3+ts+element-plus+mockjs的资料
第一步：安装依赖
npm i mockjs -D;
npm i @type/mockjs -D
第二步: 在src下创建：mock文件夹如下图：

index.js中配置：

import Mock from 'mockjs'
import login from './data/login.json'

Mock.mock('/mock/login', {
  code: 200,
  data:login
})

login.json文件：

{
  "code":200,
  "msg":"登录成功",
  "data":{
    "token":"abc",
    "authority":[
      {
        "path":"/order",
        "name":"Order",
        "meta":{
          "title":"订单列表",
          "isShow":true
        }
      },
      {
        "path":"/userList",
        "name":"UserList",
        "meta":{
          "title":"用户列表",
          "isShow":true
        }
      },
      {
        "path":"/roleList",
        "name":"RoleList",
        "meta":{
          "title":"角色列表",
          "isShow":true
        }
      },
      {
        "path":"/tauthority",
        "name":"Tauthority",
        "meta":{
          "title":"权限列表",
          "isShow":false
        }
      }
    ]
  }
}

axios配置文件中：

import axios from "axios";
import { ElMessage } from 'element-plus'

enum MSGS  {
  '操作成功'= 200,
  '密码错误',
  '账号错误',
  '请求异常'
}

const request = axios.create({
  baseURL: '/mock',
  timeout: 2000,
  headers: {
    "Content-Type":'application/json;charset:utf-8'
  }
})
// 请求拦截器
request.interceptors.request.use(config => {
  config.headers=config.headers || {}
  if (localStorage.getItem('token')) {
    config.headers.token = localStorage.getItem('token') || ''
  }
  return config
})
// 响应拦截器
request.interceptors.response.use(res => {
  const code: number = res.data.code
  if (code === 200) {
    ElMessage(MSGS[code])
    // return Promise.reject(res.data)
  }
  return res.data
}, err => {
  console.log(err,'0000000000000000');
})

export default request

main.ts文件中配置：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import '@/mock'
// if(process.env.NODE_ENV==="development") Mock()
createApp(App).use(router).use(ElementPlus).mount('#app') 

最后就可以在接口文件里使用了：

import request from './index'

interface loginData{
  userName: string,
  password:string
}

export const login = (data:loginData) => request({
  url: '/login',
  method: 'post',
  data,
})

业务代码：

<template>
   <el-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="rules"
    status-icon
    label-width="120px"
    class="demo-loginForm"
  >
    <el-form-item label="账号" prop="userName">
      <el-input v-model="loginForm.userName" type="userName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="loginForm.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(loginFormRef)"
        >Submit</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang='ts'>
import { defineComponent, Ref, reactive, toRefs } from 'vue'
import { useRouter } from "vue-router";
import { InitData } from '../types/login'
import { login } from "../api/login";
// 用defineComponent进行包裹，会有很多的这种小提示。
export default defineComponent({

   setup () {
    const data = reactive(new InitData())
    const router=useRouter()
    const submitForm = (loginFormRef:any)=>{
      loginFormRef?.validate((valid:boolean) => {
        if (valid) {
          login(data.loginForm).then(res => {
            router.push('/')
            console.log(res,'登录成功')
          })
        } else {
          console.log(valid,'登录失败')
        }
      })
    }
    const rules = {
      userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      password:[{required:true,message:'请输入密码',trigger:'blur'}]
    }

     return {
       ...toRefs(data),
      rules,
      submitForm,
     }
   }
})
</script>


<style lang='scss' scoped>
  .demo-loginForm{
    width: 350px;
    border: 1px solid #333;
  }
</style>