From 22a2fa2dbc42296690373e15bc0ca77387c95181 Mon Sep 17 00:00:00 2001 From: chenkainan Date: Wed, 6 Aug 2025 14:47:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/product/ProductList.vue | 6 +- src/libs/axios.js | 114 ++++++ src/libs/utils.js | 128 ++++++ src/main.js | 26 +- src/router/index.js | 9 + src/views/Detail/Index.vue | 521 +++++++++++++++++++++++++ 6 files changed, 779 insertions(+), 25 deletions(-) create mode 100644 src/libs/axios.js create mode 100644 src/libs/utils.js create mode 100644 src/views/Detail/Index.vue diff --git a/src/components/product/ProductList.vue b/src/components/product/ProductList.vue index 4c859ff..afdeae4 100644 --- a/src/components/product/ProductList.vue +++ b/src/components/product/ProductList.vue @@ -3,7 +3,7 @@
- +

- + {{ product.name }}

@@ -32,7 +32,7 @@ 加入购物车 diff --git a/src/libs/axios.js b/src/libs/axios.js new file mode 100644 index 0000000..728d487 --- /dev/null +++ b/src/libs/axios.js @@ -0,0 +1,114 @@ +import Vue from 'vue' +import axios from "axios"; +import { Message, MessageBox, Loading } from "element-ui"; // 引入 Element UI 组件 +import store from '@/store'; + +const http = axios.create({ + timeout: 6000 // 请求超时时间 +}) + +// 添加请求拦截器 +http.interceptors.request.use((config) => { + const { customBaseURL } = config.params || {}; + if (customBaseURL) { + config.baseURL = customBaseURL; + delete config.params.customBaseURL; + } else { + config.baseURL = process.env.VUE_APP_URL; + } + + const token = store.state.user.userInfo.token; + config.headers['token'] = token + config.headers['Content-Type'] = 'application/json;charset=UTF-8'; + + // 显示加载中状态（Element UI 的 Loading） + if (config.loading !== false) { // 默认显示，可通过参数关闭 + config.loadingInstance = Loading.service({ + lock: true, + text: '加载中...', + background: 'rgba(0, 0, 0, 0.7)' + }); + } + + return config; +}, (error) => { + return Promise.reject(error); +}); + +// 添加响应拦截器 +http.interceptors.response.use(response => { + // 关闭加载状态 + if (response.config.loadingInstance) { + response.config.loadingInstance.close(); + } + + if (response.status === 200 || response.status === 1) { + return response.data; + } +}, error => { + // 关闭加载状态 + if (error.config && error.config.loadingInstance) { + error.config.loadingInstance.close(); + } + + if (error.response && error.response.status) { + switch (error.response.status) { + case 401: + MessageBox.confirm('请登录后操作', '提示', { + confirmButtonText: '去登录', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + // 登录操作 + }).catch(() => { + // 取消登录回调 + }); + break; + case 404: + Message({ + message: '网络繁忙，请刷新再试', + type: 'error', + duration: 2000 + }); + break; + default: + Message({ + message: '网络繁忙，请刷新再试', + type: 'error', + duration: 2000 + }); + break; + } + } + return Promise.reject(error); +}); + +// 请求方法挂载 +Vue.prototype.get = (params, url, loading = true) => { + return new Promise((resolve, reject) => { + http.get(url, { + params, + loading // 传递加载状态参数 + }) + .then(res => { + resolve(res); + }) + .catch(err => { + reject(err); + }); + }) +} + +Vue.prototype.post = (data, url, loading = true) => { + return new Promise((resolve, reject) => { + http.post(url, data, { + loading // 传递加载状态参数 + }) + .then(res => { + resolve(res); + }) + .catch(err => { + reject(err); + }); + }) +} \ No newline at end of file diff --git a/src/libs/utils.js b/src/libs/utils.js new file mode 100644 index 0000000..aa1e801 --- /dev/null +++ b/src/libs/utils.js @@ -0,0 +1,128 @@ +export default { + install(Vue) { + Vue.prototype.util = { + // 格式化富文本 + formateRichText(str) { + if (!str) return ""; + var reg = new RegExp("') + reg = new RegExp("section", "g"); + str = str.replace(reg, 'div'); + reg = new RegExp("↵", "g"); + str = str.replace(reg, '
'); + str = str.replace(/ { - // 可以在这里添加token等信息 - return config - }, - error => { - return Promise.reject(error) - } -) -// 响应拦截器设置 -axios.interceptors.response.use( - response => { - return response.data - }, - error => { - // 统一错误处理 - ElementUI.Message.error('请求失败，请稍后重试') - return Promise.reject(error) - } -) /* eslint-disable no-new */ new Vue({ diff --git a/src/router/index.js b/src/router/index.js index 60d0b55..57c137c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -25,6 +25,15 @@ const router = new Router({ }, component: () => import('@/views/Home.vue') }, + { + path: '/detail/:id', + name: 'Detail', + meta: { + title: '首页 - 精品商城', + keepAlive: false + }, + component: () => import('@/views/Detail/Index.vue') + }, // { // path: '/category/:id?', // name: 'Category', diff --git a/src/views/Detail/Index.vue b/src/views/Detail/Index.vue new file mode 100644 index 0000000..e260f77 --- /dev/null +++ b/src/views/Detail/Index.vue @@ -0,0 +1,521 @@ + + + + + + \ No newline at end of file