❤ axios结合Mock使用

Mock.js安装使用

具体的Mock.js 的语法规范暂时就不做解释了(直接用即可)

Mock.js是常用的生成随机数据，拦截 Ajax 请求的 JavaScript 库。在后端 API 接口可能还没有实现或者还没有完全实现。在这种情况下，可以用 Mock.js 模拟后端 API 供前端开发人员调用。

在 Vue 项目中使用 Mock.js 有两个思路：

  1. 在客户端拦截 Ajax。用 Mock.js 拦截 Ajax 请求，返回 Mock.js 生成的随机数据。
  2. 在服务器端返回 Mock 数据。后端在 API 还没开发好前，返回 Mock.js 生成的随机数据。

知识扩展：了解 Mock.js 的语法规范

方式一、(在客户端拦截 Ajax 方式)

(1) 安装Mock依赖
yarn add mockjs--save
  • 1.

Mock.mock(url, template) 拦截 Ajax 请求，并返回数据。 拦截到匹配 url 的 Ajax 请求时，根据数据模板 template 生成模拟数据，并作为响应数据返回。如果未拦截到匹配，则还是走正常的接口调用。

(2) 创建文件

根目录src下面创建一个mock下index.js文件文件，mock文件夹与我们的main.ts同级

SRC=> mock=>index.js
  • 1.

下面写一个用户列表接口/user/list 调 API时，先返回一个假数据 mock下index.js文件里面如下

var Mock = require('mockjs')
Mock.mock('/user/list', () => {
    return [1, 12, 3, 5, 4, 45];
})
  • 1.
  • 2.
  • 3.
  • 4.
(3)在main.ts里面进行引入
import './mock/index.js' //引入mock
  • 1.

这个时候先别着急，我们先启动项目看一下：

yarn dev
  • 1.

项目启动正常，但是打开我们发现报了个错误：

require is not defined

1.报错原因

这是因为vue3使用vite打包 里面没有require方法， webpack 里面有这个方法

2.解决方案

使用import 代替require

const Mock = require('mockjs')

更改为
import Mock from 'mockjs'
  • 1.
  • 2.
  • 3.
  • 4.

报错解决！

方式二、在服务器端返回 Mock(Node.js 的Web 框架 Express)

已经抽离进入我们的Node系列文章里面-Express的文章里面。

基于 Node.js 的轻量级 Web 框架Express

(1) 安装依赖
- 安装express依赖
- 安装Mock依赖
  • 1.
  • 2.
yarn add mockjs--save // 安装Mock依赖
yarn add express --save   // 安装使用express框架
  • 1.
  • 2.
(2) 创建文件

根目录下新建app.js文件里面如下

console.log("Hello World林太白");
  • 1.
(3)使用node运行

cmd进入根目录

node app.js
  • 1.

查看我们的输出

Hello World林太白
  • 1.

模拟接口调用

console.log("Hello World林太白");
// 这是Express的文件夹

// const express = require('express'); //webpack使用 vite不能使用
import express from 'express' // 导入 Mock.js
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World!8888');
});

app.listen(8888, () => {
  console.log('Example app listening on port 8888!');
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

重新启动

node app.js
  • 1.

访问地址：http://localhost:8888/

这个时候我们发现输出结果

'Hello World!8888'
  • 1.

利用Express模拟数据接口get

app.get('/user/list', (req, res) => {
    const list = [{
            'id': 1, // id 从 1 开始自增。
            'name': 'cname', // 随机中文名
            'date': '@datetime', // 随机时间戳
            'age': 1, // 15～25 的随机数
            'phone': '8',
            'address': 'true' // 随机的城市
    }]
    res.send(list)
    return
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

返回结果如下：

[["id": 1, "name" : "cname", "date": "@datetime","age": 1, "phone":"8", "address": "true"}]
  • 1.

3、axios使用获取接口

之前我们已经安装了axios

去根目录下查看我们package.json 文件是否安装：

"axios": "^1.8.4",
  • 1.

没有的先安装axios

yarn add axios
  • 1.

添加user文件夹，下面新建index.vue文件

结构<div @click="getUserList">获取用户</div>
  • 1.
  • 2.

引入我们的axios请求：

<script setup lang="ts">
import {useRouter} from 'vue-router'
import axios from 'axios'
const router=useRouter();
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

请求接口方法

// 获取用户
function getUserList(row) {
	axios.get('/user/list').then(res => {
		console.log(res,'/user/list')
	})
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

点击获取我们的用户接口如图如下：

❤ axios结合Mock使用_数据

我们使用Mock随机返回我们的用户列表数据：

更改mockjs文件
// 用户接口
Mock.mock('/user/list', () => {
    const userList = Mock.mock({
        'list|1-10': [{
          'id|+1': 1, // id 从 1 开始自增。
          'name': '@cname', // 随机中文名
          'age|15-25': 1, // 15～25 的随机数
          'city': '@county(true)' // 随机的城市
        }]
    }).list; // 从生成的数据中获取 list 字段
   return userList; // 返回模拟的用户列表数据
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

❤ axios结合Mock使用_随机数_02

4、Mock实现用户增删改查

先来搭建一下我们的结构，直接把element-plus的table表格给拉进来看看

样式部分：在styles文件夹下新建common.css管理我们的公共样式 (样式在main.ts之中引入，由index.css统一控制，这部分可以去源码去看看)

结构部分
<div class="comback">
        <div @click="getUserList">点击获取用户</div>
</div>
 
<div class="comback">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
数据和方法
<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
const router=useRouter();
const tableData = ref([])

// 获取用户
function getUserList(row) {
	axios.get('/user/list').then(res => {
		console.log(res,'/user/list');
		if(res.status==200){
                    tableData.value=res.data;
		}
	})
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
Mock返回的实现效果

❤ axios结合Mock使用_ios_03

到这里我们已经掌握了axios请求和Experss的简单使用！