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

接口对接，登录

admin_zwk
zhaowenkang 5 months ago
parent
b623d68b59
commit
7fdb04a5ea
8 changed files with 173 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      work/src/api/LoginApi.js
  2. 2
      work/src/api/UpdateWorkApi.js
  3. 46
      work/src/views/AddWork.vue
  4. 26
      work/src/views/HomeWork.vue
  5. 47
      work/src/views/Login.vue
  6. 35
      work/src/views/UpdateWork.vue
  7. 58
      work/src/views/WorkDetail.vue
  8. 2
      work/vite.config.js

12
work/src/api/LoginApi.js
View File

@ -0,0 +1,12 @@
import service from ".";
const LoginApi={
//登录
login(username,password){
return service.post("/api/login",username,password)
},
//退出登录
logout(token){
return service.post("/api/logout",token)
}
}
export default LoginApi;

2
work/src/api/UpdateWorkApi.js
View File

@ -14,7 +14,7 @@ const UpdateWorkApi={
}, },
//数据导出 //数据导出
excelexport(data){ excelexport(data){
return service.post("/api/homework_manage/excelexport",data)
return service.post("/api/homework_manage/exceleexport",data)
} }
} }
export default UpdateWorkApi; export default UpdateWorkApi;

46
work/src/views/AddWork.vue
View File

@ -3,7 +3,7 @@
<el-container> <el-container>
<el-header class="header"> <el-header class="header">
<el-text class="header-text">抢点班作业后台管理</el-text> <el-text class="header-text">抢点班作业后台管理</el-text>
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button>
<el-button class="header-button" type="primary" text style="float: right;" @click="logout">退出登录</el-button>
</el-header> </el-header>
<el-main class="main"> <el-main class="main">
<div class="main-title"> <div class="main-title">
@ -92,6 +92,11 @@ import AddWorkApi from '../api/AddWorkApi';
import _ from 'lodash'; import _ from 'lodash';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import LoginApi from '../api/LoginApi';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const options = ref([ const options = ref([
{ id: 1, name: '牧民俱乐部' }, { id: 1, name: '牧民俱乐部' },
@ -232,20 +237,31 @@ const addBlank = () => {
}); });
}; };
// const addOption = (questionIndex) => {
// const currentQuestion = questions.value[questionIndex];
// const currentContent = JSON.parse(currentQuestion.content);
// currentContent.push({ "id": "", "text": "" });
// currentQuestion.content = JSON.stringify(currentContent);
// };
// const removeOption = (questionIndex, optionIndex) => {
// const currentQuestion = questions.value[questionIndex];
// const currentContent = JSON.parse(currentQuestion.content);
// currentContent.splice(optionIndex, 1);
// currentQuestion.content = JSON.stringify(currentContent);
// };
const addOption = (questionIndex) => { const addOption = (questionIndex) => {
const currentQuestion = questions.value[questionIndex];
const currentContent = JSON.parse(currentQuestion.content);
currentContent.push({ "id": "", "text": "" });
currentQuestion.content = JSON.stringify(currentContent);
const currentQuestion = questions.value[questionIndex];
// 如果当前题目没有content属性，则初始化一个空数组
if (!currentQuestion.content) {
currentQuestion.content = [];
}
currentQuestion.content.push({ id: "", text: "" });
}; };
const removeOption = (questionIndex, optionIndex) => { const removeOption = (questionIndex, optionIndex) => {
const currentQuestion = questions.value[questionIndex];
const currentContent = JSON.parse(currentQuestion.content);
currentContent.splice(optionIndex, 1);
currentQuestion.content = JSON.stringify(currentContent);
const currentQuestion = questions.value[questionIndex];
currentQuestion.content.splice(optionIndex, 1);
}; };
const removeQuestion = (questionIndex) => { const removeQuestion = (questionIndex) => {
questions.value.splice(questionIndex, 1); questions.value.splice(questionIndex, 1);
}; };
@ -271,6 +287,14 @@ const handleMouseLeave = (index) => {
onMounted(() => { onMounted(() => {
isHovered.value = Array(questions.value.length).fill(false); isHovered.value = Array(questions.value.length).fill(false);
}); });
//退出登录
const logout = () => {
LoginApi.logout().then(res => {
console.log(res)
})
router.push('/')
}
</script> </script>
<style scoped> <style scoped>

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

@ -3,7 +3,7 @@
<el-container> <el-container>
<el-header class="header"> <el-header class="header">
<el-text class="header-text">抢点班作业后台管理</el-text> <el-text class="header-text">抢点班作业后台管理</el-text>
<el-button class="header-button" type="primary" text style="float: right;">退出登录</el-button>
<el-button class="header-button" type="primary" text style="float: right;" @click="logout">退出登录</el-button>
</el-header> </el-header>
<el-main class="main"> <el-main class="main">
<div class="main-title"> <div class="main-title">
@ -87,9 +87,10 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import ClassListApi from '../api/ClassListApi'; import ClassListApi from '../api/ClassListApi';
import axios from 'axios';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import LoginApi from '../api/LoginApi';
const router = useRouter();
const assignments = ref([]); const assignments = ref([]);
@ -143,10 +144,9 @@ const viewDetails = async(row) => {
} catch (error) { } catch (error) {
console.log('获取数据出错:', error) console.log('获取数据出错:', error)
} }
}; };
const router = useRouter();
// 编辑按钮的点击事件处理函数 // 编辑按钮的点击事件处理函数
const editAssignment = async (row) => { const editAssignment = async (row) => {
try { try {
@ -159,6 +159,22 @@ const editAssignment = async (row) => {
console.log('获取数据出错:', error) console.log('获取数据出错:', error)
} }
}; };
// 退出登录
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('Authorization')
));
}).catch(err => {
// 处理退出登录接口调用失败的情况，比如提示错误信息等
ElMessage.error('退出登录失败，请稍后重试');
}).finally(() => {
// 无论接口调用成功与否，都进行页面跳转
router.push('/');
});
}
</script> </script>
<style scoped> <style scoped>

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

@ -24,16 +24,53 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import LoginApi from '../api/LoginApi';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from 'axios';
// 使用ref创建响应式数据 // 使用ref创建响应式数据
const username = ref(''); const username = ref('');
const password = ref(''); const password = ref('');
// 用于存储token的响应式变量
const token = ref('');
const router = useRouter();
// 定义登录函数 // 定义登录函数
const login = () => {
// 这里可以添加实际的登录逻辑，比如发送API请求到后端验证
console.log('用户名:', username.value);
console.log('密码:', password.value);
const login = async() => {
if (!username.value ||!password.value) {
ElMessage.error('账号和密码不能为空，请输入完整信息');
return;
}
try {
// 调用登录接口，假设LoginApi接收一个包含用户名和密码的对象作为参数，你需要根据实际接口情况调整
const response = await LoginApi.login({
username: username.value,
password: password.value
});
if (response.code === 200) {
// 获取登录成功返回的token并存储
token.value = response.data.token;
// 设置axios的请求拦截器，将token添加到后续请求的请求头中
axios.interceptors.request.use(config => {
config.headers.Authorization = `${token.value}`;
return config;
});
console.log(token.value);
// 登录成功提示
ElMessage.success('登录成功');
// 这里可以根据实际业务逻辑，比如跳转到管理后台的首页等操作
router.push('/list');
} else {
// 登录失败提示，展示接口返回的错误信息，如果有的话
ElMessage.error(response.message || '登录失败，请稍后重试');
}
} catch (error) {
// 捕获接口请求过程中的其他错误，比如网络问题等
ElMessage.error('网络异常，请检查网络连接后重试');
console.error(error);
}
}; };
</script> </script>

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

@ -33,7 +33,7 @@
@select="handleSelectArticle" clearable/> @select="handleSelectArticle" clearable/>
</el-form-item> </el-form-item>
<el-form-item label="关联直播"> <el-form-item label="关联直播">
<el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%" clearable>
<el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%" clearable @change="handleLiveChange">
<el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id"/> <el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -184,7 +184,7 @@ onMounted(async () => {
if (homeworkData.value.article && homeworkData.value.article.title) { if (homeworkData.value.article && homeworkData.value.article.title) {
articleTitle.value = homeworkData.value.article.title; articleTitle.value = homeworkData.value.article.title;
} else if (homeworkData.value.live && homeworkData.value.live.name) { } else if (homeworkData.value.live && homeworkData.value.live.name) {
form.value.LiveId = homeworkData.value.live.name;
form.value.LiveId = homeworkData.value.live.id;
} }
form.value.ClubType = homeworkData.value.clubType; form.value.ClubType = homeworkData.value.clubType;
const processFormData = () => { const processFormData = () => {
@ -261,6 +261,12 @@ const back = () => {
const articleSearchResults = ref([]); const articleSearchResults = ref([]);
// 根据文章输入内容查询关联文章的函数 // 根据文章输入内容查询关联文章的函数
const queryArticleList = async (queryString: string) => { const queryArticleList = async (queryString: string) => {
if (form.value.LiveId) {
ElMessage.warning('您已关联直播，暂无法关联文章');
articleTitle.value = ''; // 清空文章标题输入框
form.value.LiveId = '';
return [];
}
try { try {
const response = await AddWorkApi.getArticleList(queryString); const response = await AddWorkApi.getArticleList(queryString);
const formattedResults = response.data.map(article => ({ const formattedResults = response.data.map(article => ({
@ -274,6 +280,14 @@ const queryArticleList = async (queryString: string) => {
return []; return [];
} }
}; };
const handleLiveChange = () => {
if (form.value.ArticleId) {
ElMessage.warning('您已关联文章，暂无法关联直播');
form.value.LiveId = ''; // 清空关联直播选择框的值
form.value.ArticleId = '';
articleTitle.value = '';
}
};
// 处理选择文章的函数 // 处理选择文章的函数
const handleSelectArticle = (article: { label: string }) => { const handleSelectArticle = (article: { label: string }) => {
// 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等 // 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等
@ -338,17 +352,16 @@ const addBlank = () => {
}; };
const addOption = (questionIndex) => { const addOption = (questionIndex) => {
const currentQuestion = questions.value[questionIndex];
const currentContent = JSON.parse(currentQuestion.content);
currentContent.push({ "id": "", "text": "" });
currentQuestion.content = JSON.stringify(currentContent);
const currentQuestion = questions.value[questionIndex];
// 如果当前题目没有content属性，则初始化一个空数组
if (!currentQuestion.content) {
currentQuestion.content = [];
}
currentQuestion.content.push({ id: "", text: "" });
}; };
const removeOption = (questionIndex, optionIndex) => { const removeOption = (questionIndex, optionIndex) => {
const currentQuestion = questions.value[questionIndex];
const currentContent = JSON.parse(currentQuestion.content);
currentContent.splice(optionIndex, 1);
currentQuestion.content = JSON.stringify(currentContent);
const currentQuestion = questions.value[questionIndex];
currentQuestion.content.splice(optionIndex, 1);
}; };
const removeQuestion = (questionIndex) => { const removeQuestion = (questionIndex) => {

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

@ -50,14 +50,16 @@
</el-table-column> </el-table-column>
<el-table-column label="作业详情"> <el-table-column label="作业详情">
<template v-slot="{ $index }"> <template v-slot="{ $index }">
<el-popover placement="bottom" title="详情" :width="600" trigger="click"
:content="`${getContent($index).formTitle}${getContent($index).contentTitle}${getContent($index).content}`">
<el-popover placement="bottom" title="详情" :width="500" trigger="click">
<template #reference> <template #reference>
<el-button link type="primary">查看</el-button> <el-button link type="primary">查看</el-button>
</template> </template>
<div>{{ getContent($index).formTitle }}</div>
<div>{{ getContent($index).contentTitle }}</div>
<div>{{ getContent($index).content }}</div>
<div v-for="(r, subIndex) in getContent($index).replies" :key="subIndex">
<div>{{ r.formTitle }}</div>
<div>{{ r.contentTitle }}</div>
<div>{{ r.content }}</div>
<div style="margin-bottom: 10px;"></div>
</div>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
@ -173,31 +175,45 @@ const id = ref(route.params.id)
console.log(id.value + '============') console.log(id.value + '============')
const workdetailData = ref([]); const workdetailData = ref([]);
onMounted(async () => {
// onMounted(async () => {
// try {
// const response = await ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value);
// workdetailData.value = response.data;
// console.log(workdetailData.value);
// } catch (error) {
// console.error('接口请求出现错误:', error);
// }
// });
onMounted(async ()=>{
const refdata = {
id: id.value,
pageNo:PageNo.value,
pageSize:PageSize.value
}
try { try {
const response = await ClassListApi.getWorkDetail(id.value, PageNo.value, PageSize.value);
const response = await UpdateWorkApi.getrecordbycondition(refdata);
workdetailData.value = response.data; workdetailData.value = response.data;
console.log(workdetailData.value); console.log(workdetailData.value);
} catch (error) { } catch (error) {
console.error('接口请求出现错误:', error); console.error('接口请求出现错误:', error);
} }
});
})
const getContent = (index) => { const getContent = (index) => {
if (workdetailData.value && workdetailData.value[index] && workdetailData.value[index].Reply) {
const reply = workdetailData.value[index].Reply[0];
return {
formTitle: reply.formTitle,
contentTitle: reply.contentTitle,
content: reply.content
};
}
if (workdetailData.value && workdetailData.value[index] && workdetailData.value[index].Reply) {
const replies = workdetailData.value[index].Reply;
return { return {
formTitle: '',
contentTitle: '',
content: ''
// 这里直接返回包含所有reply数据的数组
replies: replies.map((reply) => ({
formTitle: reply.formTitle,
contentTitle: reply.contentTitle,
content: reply.content
}))
}; };
}
}
return {
replies: []
};
};
</script> </script>
<style scoped> <style scoped>

2
work/vite.config.js
View File

@ -16,7 +16,7 @@ export default defineConfig({
server: { server: {
proxy: { proxy: {
'/api': { '/api': {
target: 'http://192.168.9.19:8080',
target: 'http://192.168.8.191:8080',
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') rewrite: (path) => path.replace(/^\/api/, '')
}, },

Write Preview
Loading…
Cancel
Save