donghanyang
/
Link_Homework_Vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

改bug

admin_zwk
zhaowenkang 6 months ago
parent
91c95d978d
commit
8b1e89463c
6 changed files with 102 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      work/src/api/index.js
  2. 22
      work/src/stores/token.js
  3. 9
      work/src/views/HomeWork.vue
  4. 18
      work/src/views/Login.vue
  5. 2
      work/src/views/UpdateWork.vue
  6. 97
      work/src/views/WorkDetail.vue

20
work/src/api/index.js
View File

@ -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}`;

22
work/src/stores/token.js
View File

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

9
work/src/views/HomeWork.vue
View File

@ -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('退出登录失败，请稍后重试');

18
work/src/views/Login.vue
View File

@ -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>

2
work/src/views/UpdateWork.vue
View File

@ -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 = () => {

97
work/src/views/WorkDetail.vue
View File

@ -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 => {
// 处理退出登录接口调用失败的情况，比如提示错误信息等

Write Preview
Loading…
Cancel
Save