首页 > 其他分享 >mockjs_axios_vue_learn_2023-03-03 23:33:34

mockjs_axios_vue_learn_2023-03-03 23:33:34

时间:2023-03-03 23:44:13浏览次数:39  
标签:03 axios const 23 import learn mockjs data mock

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

标签:03,axios,const,23,import,learn,mockjs,data,mock
From: https://www.cnblogs.com/zhuoss/p/17177371.html

相关文章

  • 每日算法 230303
    每日算法230303题目1487.保证文件名唯一给你一个长度为n的字符串数组names。你将会在文件系统中创建n个文件夹:在第i分钟,新建名为names[i]的文件夹。由于两......
  • 2023/3/3
    在Android应用程序开发中,Fragment和广播是两个非常重要的概念。Fragment可以看作是一种模块化的UI组件,它允许开发者将应用程序UI拆分成多个独立的部分,以便在不同的......
  • 2023训练3
    训练地址:vjudge链接C.Min-MaxArrayTransformation其实我们可以从题目中看出,主要是求解两个问题。第一个求解问题,\(d_{min}\),对于每一个\(a_i\),第一个大于其的\(b_i\)......
  • java学习日记20230303-基本数据类型转换
    自动类型转换java程序在进行运算和赋值时,精度小的类型自动转化为精度大的类型,这个就是自动类型转化数据类型按照精度大小排序char-int-long-float-doublebyte-short-in......
  • 【总结】2023-03-03 Rook Path
    RookPath题意有一个\(n\)行\(m\)列的矩阵,有一只乌鸦在\((x_1,y_1)\)上,它想要去\((x_2,y_2)\)。乌鸦可以飞\(k\)次:假设乌鸦现在在\((x,y)\),它可以选择以下......
  • fileReader-注意循环返回的值-1-2023-3-3
    packageJavaSE.Lesson18;importjava.io.FileNotFoundException;importjava.io.FileReader;importjava.io.IOException;publicclassReaderDemo{publi......
  • fileReader-注意循环返回的值-2-2023-3-3
    packageJavaSE.Lesson18;importjava.io.FileReader;importjava.io.IOException;publicclassReaderDemo02{publicstaticvoidmain(String[]args){......
  • 老黑春季2023上课内容
    KMP字典树一.什么是字典树\(Trie\)树,即字典树,是一种树形结构。典型应用是用于统计和排序大量的字符串前缀来减少查询时间,最大限度地减少无谓的字符串比较。\(Trie\)......
  • 链接mysql数据库报错:2003-cant connect to Mysql server on ‘localhost’(10038)
    今天用navicat连mysql时候突然报错了 我百度了一下,知道了是mysql服务没开,但是我打开了服务,发现服务里面没有mysql,于是就去cmd以管理员身份打开命令提示符,切换到......
  • 3月03日课后总结
    3/03课后总结配合匿名函数使用的方法1.map(函数名,要遍历的数据)#内部本质就是for循环,再记住两个参数的位置和作用2.zip(拉链)l=[1,2,3,4,5,6,7,8]l1......