mockjs vue learn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<script setup>
import { onMounted } from "vue";
import { list, customlist } from "./api/request";
const getBranList = async () => {
const { data } = await list();
console.log(data);
};
const postCustomList = async () => {
const { data } = await customlist();
console.log(data);
// axios 请求返回的数据都是放在data里面
const res = await customlist();
console.log(res);
};
// 删除
onMounted(() => {
getBranList();
postCustomList();
});
</script>
<template>
<div>app</div>
</template>
/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./mockjs/index"; // 导入mockjs // baseURL 解开了 mockjs就要注释
createApp(App).mount("#app");
import "./brand_list";
import "./custom_list";
import Mock from "mockjs";
Mock.mock("/api/postcustomlist", "post", {
status: 0,
"customList|10": [{ id: "@increment(1)", name: "@cname" }],
});
/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/mockjs/brand_list.js
import Mock from "mockjs";
Mock.mock("/api/getprodlist", "get", {
status: 0,
"productList|10-20": [
{ id: "@increment(1)", name: "@cword(3,8)", ctime: new Date() },
],
});
import axios from "axios";
const instance = axios.create({
// baseURL: "http://www.liulongbin.top:3005", // 切换线上的地址 // baseURL 解开了 mockjs就要注释
timeout: 300,
});
export const createAPI = (url, method, data) => {
let config = {};
if (method.toUpperCase() === "GET") {
config.params = data;
} else {
config.data = data;
}
return instance({
url,
method,
...config,
});
};
import { createAPI } from "../utils/request";
export const list = function(data) {
return createAPI("/api/getprodlist", "get", data);
};
export const customlist = function(data) {
return createAPI("/api/postcustomlist", "post", data);
};
