✨ feat: mock接口上传

mock/modules/ycy.js

@@ -5,14 +5,27 @@ const StockList = Mock.mock({
       "id|+1": "0",
       billserial: "@integer(10000000000,19999999999)",
       billType: "@integer(0,5)",
-      stockNum: "前端",
+      stockNum: "@integer(1,2)",
-      unit: "前端",
+      unit: "@cword(张本,1)",
       stockDate: "@date",
       operator: "@cname",
       remark: " @integer(10000000000,19999999999)",
     },
   ],
 });
-export default [
-]
 
+export default [
+  {
+    url: "/stockList",
+    method: "get",
+    response: () => {
+      const obj = {
+        list: StockList,
+      };
+      return {
+        code: 200,
+        data: obj,
+      };
+    },
+  },
+];

src/api/login.js

@@ -5,4 +5,4 @@ const API = {
   udaiu: "/user",
 };
 export const reqUser = () => request.get(API.LOGIN_URL);
-export const reqUser = (data) => request.post(API.LOGIN_URL, data);
+export const reqUserone = (data) => request.post(API.LOGIN_URL, data);

src/api/stockList.js

@@ -0,0 +1,7 @@
+import request from "@/utils/requestMock";
+
+const API = {
+  STOCK_LIST: "/stockList",
+};
+
+export const reqStockList = () => request.get(API.STOCK_LIST);

src/pages/finance-bill-manage/billStock.vue

@@ -35,8 +35,9 @@
 </template>
 
 <script setup>
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { MessagePlugin } from "tdesign-vue-next";
+import { reqStockList } from "@/api/stockList";
 
 const tableData = ref();
 const columns = ref([
@@ -109,6 +110,10 @@ const onSubmit = ({ validateResult, firstError }) => {
     MessagePlugin.warning(firstError);
   }
 };
+
+onMounted(() => {
+  reqStockList();
+});
 </script>
 
 <style scoped lang="less">

src/utils/requestMock.js

@@ -0,0 +1,54 @@
+// 进行axios二次封装：使用请求与响应拦截器
+import axios from "axios";
+import { MessagePlugin } from "tdesign-vue-next";
+import { useRouter } from "vue-router";
+
+// 第一步:利用axios对象的create方法，去创建axios实例(其他的配置:基础的路径、超时的时间)
+const request = axios.create({
+  baseURL: "/api", // 基础路径上会携带/api
+  timeout: 5000, // 超时的时间的设置
+});
+// 第二步：axios实例添加请求与响应拦截器
+request.interceptors.request.use((config) => {
+  // config配置对象，headers属性请求头，经常给服务器端携带公共参数
+  // 返回配置对象
+  return config;
+});
+
+// 第三步：axios响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    // 成功回调
+    // 简化数据
+    return response.data;
+  },
+  async (error) => {
+    // 失败回调：处理http网络错误的
+    // 定义一个变量：存储网络错误信息
+    let message = "";
+    const { status } = error.response;
+    // http状态码
+    switch (status) {
+      case 401:
+        message = "TOKEN过期";
+        break;
+      case 403:
+        message = "无权访问";
+        break;
+      case 404:
+        message = "请求地址错误";
+        break;
+      case 500:
+        message = "服务器出现问题";
+        break;
+      default:
+        message = "网络出现问题";
+        break;
+    }
+    MessagePlugin.error(message);
+    return Promise.reject(error);
+  }
+);
+
+// 对外暴露
+export default request;

vite.config.js

@@ -8,15 +8,6 @@ import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  server: {
-    proxy: {
-      "/api": {
-        target: "http://192.168.1.10:8000",
-        changeOrigin: true,
-      },
-    },
-  },
-
   plugins: [
     vue(),
     vueJsx(),