From 8b1e89463c0263dcbac19aadfd598b48e6c010be Mon Sep 17 00:00:00 2001
From: zhaowenkang <Z13306486998@126.com>
Date: Thu, 19 Dec 2024 21:12:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 work/src/api/index.js         | 20 +++++----
 work/src/stores/token.js      | 22 ++++++++++
 work/src/views/HomeWork.vue   |  9 ++--
 work/src/views/Login.vue      | 18 ++++----
 work/src/views/UpdateWork.vue |  2 +-
 work/src/views/WorkDetail.vue | 97 +++++++++++++++++++++++--------------------
 6 files changed, 102 insertions(+), 66 deletions(-)
 create mode 100644 work/src/stores/token.js

diff --git a/work/src/api/index.js b/work/src/api/index.js
index f26b2a2..fbcead0 100644
--- a/work/src/api/index.js
+++ b/work/src/api/index.js
@@ -17,21 +17,27 @@
 
 
 import axios from "axios";
-
+import { useTokenStore } from "../stores/token";
 const service = axios.create({
     // baseURL: 'http://192.168.8.191:8080',
     // baseURL: 'http://localhost:8080',
     baseURL: '/api',
 });
 
-// 假设你的token存储在localStorage中，名为 'access_token'，你可以根据实际情况修改获取方式
-const getToken = () => {
-    return localStorage.getItem('access_token');
-};
-
 // Axios的请求拦截器，在这里添加token到请求头
+
+axios.interceptors.request.use(config => {
+    const token = useTokenStore();
+    if (token) {
+        config.headers['token'] = `${token}`;
+    }
+    return config;
+}, error => {
+    return Promise.reject(error);
+});
+
 service.interceptors.request.use(config => {
-    const token = getToken();
+    const token = useTokenStore();
     if (token) {
         // 一般后端会约定一个请求头的字段名来接收token，常见的如 'Authorization'，并要求按照一定格式传递，比如 'Bearer <token>'，这里按照此格式添加，你需要根据后端实际要求调整
         config.headers['token'] = `${token}`;
diff --git a/work/src/stores/token.js b/work/src/stores/token.js
new file mode 100644
index 0000000..2394bb6
--- /dev/null
+++ b/work/src/stores/token.js
@@ -0,0 +1,22 @@
+import {defineStore} from 'pinia';
+/*
+使用pinia进行状态管理,不能刷新页面
+Vue中将一些全局的数据保存在某个位置，Vue项目的任何一个组件中，都可以访问它
+*/
+export const useTokenStore = defineStore('token',{
+    //状态管理
+    state:()=>({
+        token: sessionStorage.getItem('token'),
+    }),
+    actions:{
+        changeToken(token){
+            this.token = token;
+            //长久保存token
+            sessionStorage.setItem('token', token)
+        },
+        clear(){
+            this.token = null;
+            sessionStorage.removeItem('token');
+        }
+    }
+});
\ No newline at end of file
diff --git a/work/src/views/HomeWork.vue b/work/src/views/HomeWork.vue
index 1636efe..2b77ed4 100644
--- a/work/src/views/HomeWork.vue
+++ b/work/src/views/HomeWork.vue
@@ -43,7 +43,7 @@
             </el-table-column>
             <el-table-column prop="live" label="关联直播">
               <template #default="{ row }">
-                <el-tooltip class="tooltip" v-if="row.live" :content="row.live" placement="bottom"
+                <el-tooltip class="tooltip" v-if="row.live" :content="row.live.name" placement="bottom"
                   :disabled="row.live.name.length <= 10" effect="light">
                   {{ row.live.name.slice(0, 10) || '—' }}
                 </el-tooltip>
@@ -164,9 +164,10 @@ const logout = () => {
     LoginApi.logout().then(res => {
         console.log(res);
         // 移除axios请求拦截器中设置token的逻辑，恢复到初始状态
-        axios.interceptors.request.eject(axios.interceptors.request.handlers.find(
-            handler => handler.fulfilled && handler.fulfilled.toString().includes('token')
-        ));
+        // axios.interceptors.request.eject(axios.interceptors.request.handlers.find(
+        //     handler => handler.fulfilled && handler.fulfilled.toString().includes('token')
+        // ));
+        config.headers['token'] = ` `;
     }).catch(err => {
         // 处理退出登录接口调用失败的情况，比如提示错误信息等
         ElMessage.error('退出登录失败，请稍后重试');
diff --git a/work/src/views/Login.vue b/work/src/views/Login.vue
index c0958ff..a9b93a5 100644
--- a/work/src/views/Login.vue
+++ b/work/src/views/Login.vue
@@ -36,32 +36,34 @@ const token = ref('');
 
 const router = useRouter();
 // 定义登录函数
-const login = async() => {
+const login = async () => {
     if (!username.value ||!password.value) {
         ElMessage.error('账号和密码不能为空，请输入完整信息');
         return;
     }
     try {
-        // 调用登录接口，假设LoginApi接收一个包含用户名和密码的对象作为参数，你需要根据实际接口情况调整
+        // 调用登录接口，假设LoginApi.login接收一个包含用户名和密码的对象作为参数，你需要根据实际接口情况调整
         const response = await LoginApi.login({
             username: username.value,
             password: password.value
         });
         if (response.code === 200) {
             // 获取登录成功返回的token并存储
-            token.value = response.data.token; 
+            token.value = response.data.token;
+            // 将token存储到localStorage中，键名为'token'，你可以根据实际情况调整键名
+            localStorage.setItem('token', token.value);
             // 设置axios的请求拦截器，将token添加到后续请求的请求头中
             axios.interceptors.request.use(config => {
-                config.headers.token = `${token.value}`;
-                //config.headers['token'] = token.value;
+                //config.headers.token = `${token.value}`;
+                config.headers['token'] = token.value;
                 return config;
             });
             console.log(token.value);
             // 登录成功提示
             ElMessage.success('登录成功');
-            
+
             // 这里可以根据实际业务逻辑，比如跳转到管理后台的首页等操作
-            router.push('/list'); 
+            router.push('/list');
         } else {
             // 登录失败提示，展示接口返回的错误信息，如果有的话
             ElMessage.error(response.message || '登录失败，请稍后重试');
@@ -70,7 +72,7 @@ const login = async() => {
         // 捕获接口请求过程中的其他错误，比如网络问题等
         ElMessage.error('网络异常，请检查网络连接后重试');
         console.error(error);
-    
+
     }
 };
 </script>
diff --git a/work/src/views/UpdateWork.vue b/work/src/views/UpdateWork.vue
index 5a601fb..d7ccbe1 100644
--- a/work/src/views/UpdateWork.vue
+++ b/work/src/views/UpdateWork.vue
@@ -184,7 +184,7 @@ onMounted(async () => {
   if (homeworkData.value.article && homeworkData.value.article.title) {
     articleTitle.value = homeworkData.value.article.title;
   } else if (homeworkData.value.live && homeworkData.value.live.name) {
-    form.value.LiveId = homeworkData.value.live.id;
+    form.value.LiveId = homeworkData.value.live.name;
   } 
   form.value.ClubType = homeworkData.value.clubType;
   const processFormData = () => {
diff --git a/work/src/views/WorkDetail.vue b/work/src/views/WorkDetail.vue
index a68fbfa..c79fc64 100644
--- a/work/src/views/WorkDetail.vue
+++ b/work/src/views/WorkDetail.vue
@@ -91,9 +91,9 @@ import UpdateWorkApi from '../api/UpdateWorkApi';
 import * as XLSX from 'xlsx';
 import axios from 'axios';
 import LoginApi from '../api/LoginApi';
+import { useTokenStore } from '../stores/token';
 const router = useRouter();
 
-
 const back = () => {
     window.history.back()
 }
@@ -131,54 +131,11 @@ const form = ref({
     shopId: "",
 });
 
-const exportData = async () => {
-    try {
-        const params = {
-            // 这里假设form.value和id.value是你已有的正确数据获取方式，按需替换成实际的准确值
-            ...form.value,
-            id: id.value
-        };
-        const response = await axios.post('/api/api/homework_manage/export-record', params, {
-            responseType: 'arraybuffer'
-        });
-        console.log('导出数据:', response);
-        console.log('导出数据:', response.data);
-        // 将返回的二进制数据转换为Blob对象，用于创建下载链接
-        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        // 尝试从响应头中获取Content-Disposition字段来解析文件名
-        const contentDisposition = response.headers['content-disposition'];
-        console.log('文件名:', contentDisposition);
-        if (contentDisposition) {
-            // 使用正则表达式匹配filename
-            const fileNameMatch = contentDisposition.match(/filename=([^"]+)/);
-            if (fileNameMatch && fileNameMatch.length > 1) {
-                const fileName = fileNameMatch[1];
-                a.download = fileName;
-            } else {
-                console.error('无法从Content-Disposition中解析出文件名');
-                return;
-            }
-        } else {
-            console.error('响应头中不存在Content-Disposition字段');
-            return;
-        }
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    } catch (error) {
-        console.error('详细的请求错误信息：', error);
-        ElMessage.error('导出失败');
-    }
-};
-
 // 搜索方法
 const searchData = async () => {
     try {
         const params = {
+            id: id.value,
             ...form.value
         };
         const res = await UpdateWorkApi.getrecordbycondition(params);
@@ -249,10 +206,58 @@ const getContent = (index) => {
         replies: []
     };
 };
+const exportData = async () => {
+    try {
+        const params = {
+            // 这里假设form.value和id.value是你已有的正确数据获取方式，按需替换成实际的准确值
+            ...form.value,
+            id: id.value,
+        };
+        const response = await axios.post('/api/api/homework_manage/export-record', params, {
+            responseType: 'arraybuffer'
+        });
+        console.log('导出数据:', response);
+        console.log('导出数据:', response.data);
+        // 将返回的二进制数据转换为Blob对象，用于创建下载链接
+        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // 尝试从响应头中获取Content-Disposition字段来解析文件名
+        const contentDisposition = response.headers['content-disposition'];
+        console.log('文件名:', contentDisposition);
+        if (contentDisposition) {
+            // 使用正则表达式匹配filename
+            const fileNameMatch = contentDisposition.match(/filename=([^"]+)/);
+            if (fileNameMatch && fileNameMatch.length > 1) {
+                const fileName = fileNameMatch[1];
+                a.download = fileName;
+            } else {
+                console.error('无法从Content-Disposition中解析出文件名');
+                return;
+            }
+        } else {
+            console.error('响应头中不存在Content-Disposition字段');
+            return;
+        }
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('详细的请求错误信息：', error);
+        ElMessage.error('导出失败');
+    }
+};
+
+const tokenStore = useTokenStore();
 // 退出登录
 const logout = () => {
     LoginApi.logout().then(res => {
-
+        console.log(tokenStore);
+        tokenStore.clear();
+        localStorage.removeItem('token');
+        console.log(tokenStore);
         router.push('/');
     }).catch(err => {
         // 处理退出登录接口调用失败的情况，比如提示错误信息等