❤ axios请求和Mock使用Vue3+vite（Vue3系统篇三）
1、打包环境
直接yarn build 会发现给我们提示了很多报错
更改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>
Mock返回的实现效果
到这里我们已经掌握了axios请求和Experss的简单使用！
