怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

mockjs vue learn

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/index.html

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

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/App.vue

<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");

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/mockjs/index.js

import "./brand_list";
import "./custom_list";

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/mockjs/custom_list.js

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() },
],
});

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/utils/request.js

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,
});
};

/Users/song/Downloads/vue3_demo_mockjs-master/__mock_learn/mock_learn/src/api/request.js

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);
};
posted on   超级无敌美少男战士  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示