目次
2.2 必要に応じて、アナログインターフェースのコードを保存するフォルダーを作成します。
2.3 _modules にファイル test.js を作成し、テストコードを書く
2.4 モジュールコードをmock/index.jsに導入する
ソースアドレス
https://github.com/liuxin00020/vue3-elementplus-axios-mock-echarts 1 axios 関連
1.1 axios の紹介
npm install axios --save1.2 リクエストインターセプトの追加
axios.js ファイルを適切な場所 (ブロガーは utils/axios.js にあります) に作成します。ブロガーは怠惰で、インターセプトは非常に簡単です。
/*
* @Author: liuxin
* @Date: 2022-04-19 15:42:34
* @LastEditors: liuxin
* @LastEditTime: 2022-06-10 14:13:53
* @Description: 请求拦截
*/
import axios from "axios";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"
// 这里打包后，可以修改根目录下的config.js进行修改
axios.defaults.baseURL = Window.apiConfig[process.env.NODE_ENV].baseUrl
// 请求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(res => {
const { data } = res;
if (typeof data !== 'object') {
ElMessage.error('服务器异常，请联系管理员')
return Promise.reject(res);
}
if (data.code != 200) {
if (res.data.message)
ElMessage.error(res.data.message)
return Promise.reject(res.data);
}
return data
}, (err) => {
ElMessage.error({
showClose: true,
message: '服务器异常，请联系管理员',
type: 'error',
})
return Promise.reject(err)
})
export default axios;
1.3 axios を使用してインターフェースを呼び出す
適切なコードでインターセプトが有効になるかどうかを確認してください。ブロガーのコードは apis/mockTest.js にあります。
/*
* @Author: liuxin
* @Date: 2022-06-10 13:59:41
* @LastEditors: liuxin
* @LastEditTime: 2022-06-10 16:05:46
* @Description: 测试mockjs
*/
import axios from "@/utils/axios.js"
/**
* @description: 或者列表
* @Author: liuxin
*/
export const getUseList = (param) => {
return axios.post('/getUseList', param)
}
1.4 axios が成功したかどうかをテストする
この時、バックエンドがなくエラー404が出ればaxiosは成功したことになりますので成功したら下を見てください、失敗したら自分で原因を調べてください。
/**
* @description: 获取数据
* @Author: liuxin
*/
const getList = () => {
state.loading = true;
getUseList({ userName: state.userName })
.then((res) => {
state.loading = false;
state.tableData = res.data;
})
.catch(() => {
state.loading = false;
state.tableData = [];
});
};
2 つのモックjs 関連
2.1 最初にmockjsをインストールする
開発環境で使用するため、開発依存関係にインストールされます
npm install mockjs --save-dev2.2 必要に応じて、アナログインターフェースのコードを保存するフォルダーを作成します。
Index.js はエントリ ファイル、_modules は関連モジュールのアナログ インターフェイス コードです。これはここで自動的に導入されます。つまり、今後は対応するコードを _modules 作成ファイルに記述するだけで済みます。
2.3 _modules にファイル test.js を作成し、テストコードを書く
/*
* @Author: liuxin
* @Date: 2022-06-09 17:21:17
* @LastEditors: liuxin
* @LastEditTime: 2022-06-10 16:44:38
* @Description: 测试mock接口数据
*/
/**
* @description: 测试
* @Author: liuxin
*/
import Mock from "mockjs";
export default [
{
url: "/api/getUseList", // 这个url就是后端给的url，需要与apis里面调用的url保持一致
type: "post",
getData: (param) => {
return Mock.mock({
code: 200,
message: "success",
param: param,
"data|1-20": [{
'date': "@date",
'name': param.userName + "@string(5)",
'age': "@integer(1, 100)",
'sex|1': ['男', '女', '未知'],
}]
})
}
},
];
2.4 モジュールコードをmock/index.jsに導入する
/*
* @Author: liuxin
* @Date: 2022-06-09 17:21:03
* @LastEditors: liuxin
* @LastEditTime: 2022-06-10 16:50:42
* @Description: 模拟接口自动引入入口页
*/
import Mock from "mockjs";
// 自动引入模块
const modulesFiles = require.context('./_modules', true, /\.js$/);
const mocks = modulesFiles.keys().reduce((modues, item) => {
return [...modues, ...modulesFiles(item).default];
}, [])
// 设置拦截ajax请求的响应时间
Mock.setup({
timeout: "200-1000"
});
// 遍历mock配置项
mocks.forEach(item => {
Mock.mock(item.url, options => {
const { type, body } = options;
if (item.type !== type.toLowerCase()) {
return { code: 500, msg: `该接口不支持${type}方式` };
} else {
return item.getData(JSON.parse(body)); // 这样每次调用接口，返回的数据才不一样
}
});
});2.5 main.jsにモックを導入する
// 引入mocks，测试接口
if (process.env.NODE_ENV === "development") {
require("./mock");
}2.6 モックが成功したかどうかをテストする
インターフェイスを呼び出す前に、エラー 404 が報告されました。ここで更新して結果を確認すると、印刷が成功しました。
