【精品】vue3 整合 mock.js

Myth丶恋晨 2023-01-21 02:27 15阅读 0赞

[mockjs官网][mockjs]

## 第一步：安装 ##

> cnpm install mockjs --save

## 第二步：安装axios ##

> cnpm install axios --save

## 第三步：编写请求文件user.ts ##

在src下创建apis文件夹，然后在其中创建user.ts文件：

import axios from 'axios'
    
    // 根据用户名查找
    export const getUserById = (p : number) => { 
        return axios.get('/user/getUserById', { 
          params: p
        }).then(res => { 
          resolve(res.data)
        }).catch(error => { 
          reject(error.data)
        })
        return get(, { id: params})
    }

## 第四步：创建mock文件user.ts ##

在src下创建mock文件夹，然后在其中创建user.ts文件：

import Mock from 'mockjs' // 引入mockjs
    const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
    
    Mock.setup({ //设置请求延时时间
        timeout: 1000
    })
    
    let datalist = []
    for (let i = 0; i < 10; i += 1) { 
        const o = {   //mockjs模拟随机生成数据，生成20条
            id1: Random.guid(),
            id2: Random.string(10),
            idcard:Random.string('number', 8,18),
            name: Random.cname(),// 随机生成任意名称
            loginname: Random.name(), // 生成姓名
            birth: Random.date('yyyy-MM-dd'), //参数指定日期格式，也可以不指定
            gender: Random.boolean,
            country: Random.county(),
            province: Random.province(),
            homepage: Random.url(), // 生成web地址
            intro: Random.cword(100,160)
        }
        datalist.push(o)
    }
    
    Mock.mock('http://127.0.0.1/demo/user/getUserById?id=123', "get", datalist) //调用模拟数据方法

## 第五步：页面 ##

<template>
      <el-button type="danger" @click="fun">危险按钮</el-button>
    </template>
    
    <script lang="ts"> import $user from '../apis/user' import '../mock/user.ts' export default { name: "Index", setup(): any { let fun = () => { $user.getUserById(123).then(res => { console.info(res) }) } return { fun } } } </script>

## 结果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

[mockjs]: http://mockjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221021/3fe66c944e624945afe47c71996e8f05.png