axios请求和Mock使用

原创

51林太白 2025-05-10 12:09:37 博主文章分类：Vue ©著作权

文章标签 ios 数据 Express 文章分类 React.js 前端开发

©著作权归作者所有：来自51CTO博客作者51林太白的原创作品，请联系作者获取转载授权，否则将追究法律责任

❤ axios请求和Mock使用

1、打包环境

直接yarn build 会发现给我们提示了很多报错

vue3-mockone.png

更改tsconfig.json文件夹下compilerOptions

"compilerOptions": {
    "allowJs": true, //使用ts编译器时，项目之中存在js会报错
}

更改package.json文件夹下打包命令

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

再次yarn build 已经生成了我们的打包目录。

尝试将打包目录部署一下：地址： nexuslinnoa.gitee.io/

预览如下：

完全没任何问题！ok!到这里，你已经学会了自己搭建一个网站并部署的基础过程！

2、安装使用Mock

(后期会抽离这个部分，进化版本是使用【Node结合Express|Node结合Koa|Node结合Egg】进行本地数据库的增删改查)

具体的Mock.js 的语法规范暂时就不做解释了（个人认为没必要学和了解）

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

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

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

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

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

（1）安装Mock依赖

yarn add mockjs --save

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

（2）创建文件

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

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

var Mock = require('mockjs')
Mock.mock('/user/list', () => {
    return [1, 12, 3, 5, 4, 45];
})

（3）在main.ts里面进行引入

import './mock/index.js' //引入mock

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

yarn dev

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

require is not defined

1.报错原因

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

2.解决方案

使用import 代替

const Mock = require('mockjs')

更改为
import Mock from 'mockjs'

报错解决！

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

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

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

（1）安装express依赖和Mock依赖

yarn add mockjs --save // 安装Mock依赖
yarn add express --save   // 安装使用express框架

（2）创建文件

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

console.log("Hello World林太白");

（3）使用node运行

cmd进入根目录

node app.js

模拟接口调用

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!');
});

重新启动

node app.js

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

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

利用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
});

返回结果如下：

3、axios使用获取接口

之前我们已经安装了axios

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

没有的先安装axios

yarn add axios

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

结构
<div @click="getUserList">获取用户</div>

引入我们的axios请求：

<script setup lang="ts">
import {useRouter} from 'vue-router'
import axios from 'axios'
const router=useRouter();
</script>

请求接口方法

// 获取用户
function getUserList(row) {
	axios.get('/user/list').then(res => {
		console.log(res,'/user/list')
	})
}

点击获取我们的用户接口如图如下：我们使用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; // 返回模拟的用户列表数据
})

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>

数据和方法

<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>