vue3中使用mockjs

背景

最近做vue课设，课设的需求是以静态数据为主，也就是说可以不用进行http请求后台，但是在写angular的时候，习惯了写mock数据，也就是脱离后台，前台独立进行开发。秉承这个态度，就去查找vue没有进行mock的第三方包。

MockJs

Mock.js 是一个轻量级的JavaScript 库，用于生成假数据。 它可以帮助前端开发者快速构建模拟数据，从而加速开发过程。 Mock.js 支持自定义数据生成规则，可以根据实际需求生成各种类型的数据，如字符串、数字、数组、对象等。

官方网址 http://mockjs.com/

快速开始

npm install axios
npm install mockjs

执行成功之后查看是否有安装

配置axios

建立一个axios实例的文件,在src/utils/下.命名为request.ts

import axios from 'axios'

interface IAxiosData {
    url: string
    method: Method
    headers?: any
    json: boolean
    contentType?: string
    data?: any
    params?: any
    timeout?: number
    responseType?: ResponseType
}

const axios = Axios.create({
    timeout: 20000 // 设置超时时间
})

export default function request(arr: IAxiosData) {
    return new Promise<any>((resolve, reject) => {
        axios({
            timeout: arr.timeout === undefined ? 10000 : arr.timeout, // 请求超时
            url: arr.url,
            method: arr.method || 'POST',
            header: {
                'content-type': arr.contentType ? arr.contentType : arr.json ? 'application/json; charset=UTF-8' : 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            params: arr.params || '',
            data: arr.data || '',
            responseType: arr.responseType || 'json'
        }).then((response: AxiosResponse<any>) => {
            /**
             * response格式
             * {
             *   data:{},
             *   status:200,
             *   statusText:'OK',//从服务器返回的http状态文本
             *   headers: {},//响应头信息
             *   config: {} //`config`是在请求的时候的一些配置信息
             *   }
             */
            const responseStatus = `${response.status}`;
            if (responseStatus.charAt(0) === '2') {
                if (response.data.code === '1' || response.data.code === 'err_9999') {
                    ElMessage({
                        type: 'error',
                        message: response.data.message
                    })
                    reject(response.data)
                    return
                }
                resolve(response.data)
            } else {
                ElMessage({
                    type: 'error',
                    message: response.data.message
                })
                reject(response.data)
            }
        }).catch((err) => {
            ElMessage({
                type:'error',
                message:err.message
            })
        })
    })
}

创建userService进行请求数据，根据个人的习惯不同，习惯了写angular在进行请求数据时建立一个xxxService模式

import request from '@/utils/request'

class UserService {
    static getAll() {
        return request({
            url: '/api/user/getAll',
            method: 'get',
            json: true,
        }).then((res) => {
            if (res.status === 200) {
                return Promise.resolve(res)
            } else {
                return Promise.reject(res)
            }
        })
    }
}

export default UserService

基于此创建一个请求。

配置mock.ts

// src/mock/index.ts

import Mock from 'mockjs'

const generateRandomUserData = () => {
    return Mock.mock({
        'name': '@cname',
        'username': '@first',
        'password': '@string("lower", 10)', // 生成10位小写字母的随机字符串作为密码
        'phone': /^1[385][1-9]\d{8}/ // 生成符合中国手机号格式的随机手机号
    });
};

Mock.mock('/api/user/getAll', 'get', () => {
    const users = [];
    const randomUserCount = Math.floor(Math.random() * 20) + 1;
    for (let i = 0; i < randomUserCount; i++) {
        users.push(generateRandomUserData());
    }
    return {
        status: 200,
        data: users,
        success: true,
        message: '成功'
    }
})

在main.ts引入mockJs文件夹

import './assets/main.css'

import {createApp} from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'
import router from './router'

import '@/mock' // 此次进行引用
const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

测试mock

创建一个测试请求，为了方便测试，当前先在App.vue中进行测试

<script setup lang="ts">
import { RouterView } from 'vue-router'
import UserService from './api/userService';

const res = UserService.getAll();
// 拿到返回的data
const users = res.data;
console.log(users);
</script>

通过控制台进行查看，发现已经返回mock的数据了