update @接口封装 待处理异常code 待处理登录失效

build/webpack.base.js

@@ -3,7 +3,6 @@ const { VueLoaderPlugin } = require('vue-loader')
 const { DefinePlugin } = require('webpack');
 const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const AutoImport = require('unplugin-auto-import/webpack')
 const Components = require('unplugin-vue-components/webpack')
@@ -95,7 +94,6 @@ module.exports = {
         },
         extractComments: false, // 不从代码中提取注释
       }),
-      new CssMinimizerPlugin(),
     ],
   },
   resolve: {

build/webpack.com.js

@@ -1,6 +1,6 @@
 const CompressionPlugin = require("compression-webpack-plugin");
 const path = require("path");
-const {VueLoaderPlugin} = require("vue-loader");
+const { VueLoaderPlugin } = require("vue-loader");
 const TerserPlugin = require("terser-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 

build/webpack.dev.js

@@ -1,7 +1,10 @@
-const path = require('path')
 const { merge } = require('webpack-merge')
 const baseConfig = require('./webpack.base.js')
 
+const VITE_BASE_URL = 'http://192.168.110.126:8090'; // 樊波
+// const VITE_BASE_URL = 'http://120.55.12.245:8090'; // 测试-公网
+// const VITE_BASE_URL = 'https://scens.admin.86698.cn'; // 正式地址
+
 // 合并公共配置,并添加开发环境配置
 module.exports = merge(baseConfig, {
   mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤
@@ -11,8 +14,18 @@ module.exports = merge(baseConfig, {
     compress: false, // gzip压缩,开发环境不开启,提升热更新速度
     hot: true, // 开启热更新，后面会讲vue3模块热替换具体配置
     historyApiFallback: true, // 解决history路由404问题
-    static: {
+    open: true, // 服务启动时是否自动打开浏览器
-      directory: path.join(__dirname, "../public"), //托管静态资源public文件夹
+    // static: {
-    }
+    //   directory: path.join(__dirname, "../public"), //托管静态资源public文件夹
+    // }
+    proxy: [
+      {
+        context: ['/api'],
+        target: VITE_BASE_URL,
+        changeOrigin: true,
+        secure: false,
+        pathRewrite: { '^/api': '' },
+      },
+    ],
   }
 })

package-lock.json

@@ -8,6 +8,7 @@
       "name": "marketingsystem_temp_h5",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.7.5",
         "core-js": "^3.8.3",
         "element-plus": "^2.2.19",
         "vue": "^3.2.13",
@@ -5169,6 +5170,11 @@
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -5215,6 +5221,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.5.tgz",
+      "integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "9.1.3",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-9.1.3.tgz",
@@ -5889,6 +5905,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -7300,6 +7327,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -8628,7 +8663,6 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -8811,6 +8845,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -10664,7 +10711,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -10673,7 +10719,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -12264,6 +12309,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",

package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --config build/webpack.dev.js",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
-    "com": "cross-env NODE_ENV=development webpack --config build/webpack.com.js",
     "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.js",
+    "com": "cross-env NODE_ENV=production webpack --config build/webpack.com.js",
     "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js"
   },
   "dependencies": {
+    "axios": "^1.7.5",
     "core-js": "^3.8.3",
     "element-plus": "^2.2.19",
     "vue": "^3.2.13",
@@ -44,6 +45,9 @@
     "terser-webpack-plugin": "^5.3.10",
     "thread-loader": "^4.0.2",
     "typescript": "~4.5.5",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-element-plus": "^0.7.0",
+    "unplugin-vue-components": "^0.22.9",
     "url-loader": "^4.1.1",
     "vue-class-component": "^8.0.0-0",
     "vue-loader": "^17.4.2",
@@ -52,9 +56,6 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-merge": "^6.0.1",
+    "webpack-merge": "^6.0.1"
-    "unplugin-auto-import": "^0.11.4",
-    "unplugin-element-plus": "^0.7.0",
-    "unplugin-vue-components": "^0.22.9"
   }
 }

src/utils/request/env.ts

@@ -0,0 +1,14 @@
+const mode = process.env.NODE_ENV;
+
+const defaultConfig: any = {
+  'development': {
+    VITE_BASE_API: '/api',
+    VITE_LOGIN_PATH: '',
+  },
+  'production': {
+    VITE_BASE_API: '/adminyx',
+    VITE_LOGIN_PATH: '',
+  }
+}
+
+export default defaultConfig[mode];

src/utils/request/httpEnum.ts

@@ -0,0 +1,38 @@
+/**
+ * @description: Request result set
+ */
+export enum ResultEnum {
+    SUCCESS = 200,
+    ERROR = 500
+}
+
+/**
+ * @description:  contentType
+ */
+export enum ContentTypeEnum {
+    // json
+    JSON = "application/json;charset=UTF-8",
+    // form-data qs
+    FORM_URLENCODED = "application/x-www-form-urlencoded;charset=UTF-8",
+    // form-data  upload
+    FORM_DATA = "multipart/form-data;charset=UTF-8"
+}
+
+/**
+ * @description:  contentType
+ */
+export enum ErrorMsgEnum {
+    ERROR_400 = "请求失败，参数类型不匹配",
+    ERROR_401 = "请求失败，登录状态已过期",
+    ERROR_403 = "请求失败，您无权访问",
+    ERROR_404 = "请求失败，未找到该资源",
+    ERROR_500 = "请求失败，服务器错误，请联系管理员",
+    ERROR_503 = "请求失败，服务器异常",
+    ERROR_504 = "请求失败，请求超时"
+}
+
+export enum ErrorTypeEnum {
+    VUE = "vue",
+    SCRIPT = "script",
+    AJAX = "ajax"
+}

src/utils/request/index.ts

@@ -0,0 +1,105 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+} from "axios";
+import axios from "axios";
+import env from "@/utils/request/env";
+import { ResultEnum, ContentTypeEnum } from "./httpEnum";
+
+interface axiosConfig {
+  successMessage?: boolean;
+  errorMessage?: boolean;
+  // cancelSame?: boolean;
+  // retryCount?: number;
+  // isRetry?: boolean;
+}
+
+const defaultConfig: axiosConfig = {
+  successMessage: false,
+  errorMessage: true,
+  // cancelSame: false,
+  // isRetry: false,
+  // retryCount: 3,
+};
+
+const service: AxiosInstance = axios.create({
+  baseURL: env.VITE_BASE_API,
+  timeout: 10 * 1000, // 请求超时时间
+  headers: { "Content-Type": ContentTypeEnum.JSON },
+});
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+service.interceptors.request.use((config: AxiosRequestConfig) => {
+  const token =
+    "admingL_q2QjDlD_MdeU11q5ILoeLFEqhbGBtcEptfs-OHzI53vbrgX9GFCh-SB4fSJBGwgSTl.uDPUoyiPjJ2O6e7zUBzExUUXhsdnPxtyLwncYc8.vy9ikZRp-wUba2POZJlTERJxnLbK6DzpQFQTxuYfcNM_yl3Avo7hgCjkS-ot5QgzNiO5TE";
+  if (token) {
+    config!.headers!.Authorization = unref(`Bearer ${token}`) ?? "";
+  }
+  return config;
+});
+
+service.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const data = response.data;
+    if (data) return data;
+    // todo 待处理异常code
+    if (data.code === ResultEnum.SUCCESS) {
+      return data;
+    } else {
+      return Promise.reject(data);
+    }
+  },
+  (err) => {
+    if (err?.response?.status === 401 || err?.response?.code === 4001) {
+      // todo 待处理登录失效
+      // window.location.href = `${VITE_LOGIN_PATH}?url=${encodeURIComponent(
+      //   window.location.href
+      // )}`;
+    }
+    return Promise.reject(err.response);
+  }
+);
+
+const request = {
+  get<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("GET", url, { params: data }, config);
+  },
+  deleteWithUrlSplit<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("DELETE", url, {  data }, config);
+  },
+  putWithUrlSplit<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("PUT", url, { data }, config);
+  },
+  post<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("POST", url, { data }, config);
+  },
+  put<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("PUT", url, { data }, config);
+  },
+  delete<T = any>(url: string, data?: any, config?: axiosConfig): Promise<T> {
+    return request.request("DELETE", url, { params: data }, config);
+  },
+  request<T = any>(
+    method = "GET",
+    url: string,
+    data?: any,
+    config?: axiosConfig
+  ): Promise<T> {
+    const options = Object.assign({}, defaultConfig, config);
+    return new Promise((resolve, reject) => {
+      service({ method, url, ...data, requestOptions: options })
+        .then((res) => {
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          reject(e);
+        })
+        .finally();
+    });
+  },
+};
+
+export default request;

src/views/comProduct/api.ts

@@ -0,0 +1,8 @@
+import request from "@/utils/request";
+
+export enum Api {
+  // 列表
+  ACTIVITY_QUERY = "/admin/v1/activity/list",
+}
+
+export const PLUGIN_QUERY = (data?: any) => request.get(Api.ACTIVITY_QUERY, data);

src/views/comProduct/index.vue

@@ -49,6 +49,8 @@
 </template>
 
 <script lang="ts">
+import { PLUGIN_QUERY } from "./api";
+
 export default {
   name: 'comProduct',
   props: {},
@@ -126,7 +128,11 @@ export default {
       ]),
     }
   },
-  created() {
+  async created() {
+    const res = await PLUGIN_QUERY({
+      page: 1,
+      limit: 10
+    });
     console.log('---created---');
     document.title = '组合商品';
     this.listData = [1, 2, 3, 4, 5];