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"; |
| |
| 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({ |
| |
| 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); |
| }; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战