[Vue3:axios]:实现登录跳转页面展示列表(查看教师所承担课程的学生选课情况)

文章目录

  • 一:前置操作
    • 项目结构:
  • 二:登录页面
    • 主要流程说明
    • 运行截图
    • 前端代码Login.vue
  • 三:列表页面
    • 交互逻辑:涉及页面Page02.vue (登录成功跳转学生选课页面)
    • 运行截图

一:前置操作

https://blog.csdn.net/Abraxs/article/details/139552598?spm=1001.2014.3001.5501
在这里插入图片描述

项目结构:

在这里插入图片描述

二:登录页面

主要流程说明

登录交互逻辑:
Login.vue 点击登录发送请求 api /api/base/login 然后localStorage存储登录信息
关键代码:
前端

const submitForm = () => {loginForm.value.validate((valid) => {if (valid) {axios.post("/api/base/login",{jobNumber: form.username,pwd: form.password}).then(resp => {debuggerif (resp.data.code == 500) {alert(resp.data.message)}if (resp.data.code == 200) {localStorage.setItem('id', resp.data.data.id)localStorage.setItem('username', resp.data.data.name)router.push('/page')}})// Handle login logic here} else {alert('登录失败');}});

后端

@ApiOperation(value = "教师登录", notes = "教师登录", produces = MediaType.APPLICATION_JSON_VALUE)
@PostMapping("/login")
public R<BaseTeacher> login(@RequestBody LoginReq req){BaseTeacher back = baseTeacherService.getOne(new LambdaQueryWrapper<BaseTeacher>().eq(BaseTeacher::getJobNumbers, req.getJobNumber()).eq(BaseTeacher::getPwd, req.getPwd()));if (ObjectUtils.isEmpty(back)) {return R.error("教师不存在");}return R.ok( "登录成功",  back);
}

运行截图

在这里插入图片描述

前端代码Login.vue

<template><div><el-form ref="loginForm" :model="form" :rules="rules"><div class="title-container" style="margin-top: 20px;"><h3 class="title">学生管理平台</h3></div><el-form-item prop="username"><el-input v-model="form.jobNumber" placeholder="登录工号"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="form.password" placeholder="登录密码"></el-input></el-form-item><el-form-item><el-button @click="submitForm">Login</el-button></el-form-item></el-form></div>
</template><script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";export default {name: 'Login',setup() {const showAlertFlag = ref(false);const alertMessage = ref('');const loginForm = ref(null);const form = reactive({jobNumber: '',password: ''});const rules = {jobNumber: [{ required: true, message: 'Please input username', trigger: 'blur' }],password: [// { required: true, message: 'Please input password', trigger: 'blur' },// { min: 6, message: 'Password length should be greater than 6', trigger: 'blur' }]};const router = useRouter();const submitForm = () => {loginForm.value.validate((valid) => {if (valid) {axios.post("/api/base/login",{jobNumber: form.jobNumber,pwd: form.password}).then(resp => {debuggerif (resp.data.code == 500) {alert(resp.data.message)}if (resp.data.code == 200) {localStorage.setItem('id', resp.data.data.id)localStorage.setItem('username', resp.data.data.name)showAlertFlag.value = true;window.alert(resp.data.message);showAlertFlag.value = false;router.push('/page')}})// Handle login logic here} else {alert('登录失败');}});};return {loginForm,form,rules,submitForm,alertMessage};}
};
</script>

三:列表页面

交互逻辑:涉及页面Page02.vue (登录成功跳转学生选课页面)

登录成功跳转学生选课页面同时发送请求 /api/baseStudentCourse/list
携带当前localStorage登录用户信息
关键代码:

前端:
const tableData = ref([]); // 使用ref来创建响应式数据
onMounted(async () => {const response = await axios.post("/api/baseStudentCourse/list", {id: localStorage.getItem('id')});tableData.value = response.data.data; // 将请求结果赋值给响应式数据
});
后端:
@ApiOperation(value = "列表", notes = "列表", produces = MediaType.APPLICATION_JSON_VALUE)
@PostMapping("/list")
public R<List<BaseStudentCourse>> list(@RequestBody CommonReqById req){// 该教师所绑定课程List<BaseCourse> baseCourses = baseCourseService.list(new LambdaQueryWrapper<BaseCourse>().eq(BaseCourse::getTeacherId, req.getId()));// 判断是否为空,空择返回空数组if (CollectionUtils.isEmpty(baseCourses)) {return R.ok(new ArrayList<>());}// 教师绑定课程idsSet<Long> courseIds = baseCourses.stream().map(BaseCourse::getId).collect(Collectors.toSet());// 传入教师绑定课程参数聚合查询所教课程List<BaseStudentCourse> baseTeacherCourses = baseStudentCourseService.list(new LambdaQueryWrapper<BaseStudentCourse>().in(BaseStudentCourse::getCourseId, courseIds));if (CollectionUtils.isEmpty(baseTeacherCourses)) {return R.ok(new ArrayList<>(0));}Map<Long, String> mapCourse = baseCourseService.list().stream().collect(Collectors.toMap(BaseCourse::getId, BaseCourse::getName));Map<Long, String> mapTeacher = baseTeacherService.list().stream().collect(Collectors.toMap(BaseTeacher::getId, BaseTeacher::getName));Map<Long, BaseStudent> mapStudent = baseStudentService.list().stream().collect(Collectors.toMap(BaseStudent::getId, Function.identity()));baseTeacherCourses.forEach(v -> {v.setCourseName(mapCourse.get(v.getCourseId()));v.setTeacherName(mapTeacher.get(req.getId()));v.setStudentName(mapStudent.get(v.getStudentId()).getName());v.setMajorName(mapStudent.get(v.getStudentId()).getMajorId());});return R.ok(baseTeacherCourses);
}

运行截图

在这里插入图片描述
##页面Page02.vue代码

 <template><div class="container"><div class="title-container" style="margin-top: 20px;"><h3 class="title">学生管理平台</h3></div><div class="user-info"><div class="buttons"><el-button size="mini" class="user-button primary" @click="handleAddCourse()" :closeCourseModal = "closeModal">添加选课</el-button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span><b>当前用户:</b></span>{{currentUser}}<el-button size="mini" class="user-button" @click="resetUser()">注销当前用户</el-button></div>
<!--      <h5 class="user-name">当前登录用户:{{ localStorageValue }}</h5>--></div><el-table :data="tableData"><el-table-column prop="id" label="编码" width="100"></el-table-column><el-table-column prop="studentId" label="学号" width="100"></el-table-column><el-table-column prop="studentName" label="学生" width="100"></el-table-column><el-table-column prop="courseName" label="课程" width="180"></el-table-column><el-table-column prop="majorName" label="专业" width="100"></el-table-column><el-table-column prop="score" label="分数" width="100"></el-table-column><el-table-column prop="teacherName" label="教师" width="100"></el-table-column><el-table-column label="操作" width="380"><template #default="{ row, $index }"><el-button size="mini" type="warning" @click="editItem(row, $index)"  @updateData="handleData"  >成绩修改</el-button><el-button size="mini" type="warning" @click="addItem(row, $index)"  @updateData="handleData"  >成绩添加</el-button><el-button size="mini" type="danger" @click="handleDeleteCourse(row, $index)"  @updateData="handleData"  >删除选课</el-button></template></el-table-column></el-table><ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" /><ModalCourseAdd v-model:visible="showModalAddCourse" @refreshData="refreshData" /></div>
</template><script setup>
import { useRouter } from 'vue-router';
import {onMounted, ref} from 'vue';
import axios from "axios";
import ModalEdit from "./ModalEdit.vue";
import ModalCourseAdd from "./ModalCourseAdd.vue";
const tableData = ref([]); // 使用ref来创建响应式数据
onMounted(async () => {const response = await axios.post("/api/baseStudentCourse/list", {id: localStorage.getItem('id')});tableData.value = response.data.data; // 将请求结果赋值给响应式数据
});
const currentUser = localStorage.getItem("username");
const showModal = ref(false);
const showModalAddCourse = ref(false);
const editData = ref(null);
const showFlag = ref(String);
const editItem = (item, index) => {editData.value = item;showModal.value = true;showFlag.value = '成绩修改';
};const addItem = (item, index) => {editData.value = item;showModal.value = true;showFlag.value = '成绩添加';
};const closeModal = () => {showModalAddCourse.value = false
};const handleData = () => {console.log("Page02 handleData")const response = axios.post("/api/baseStudentCourse/list", {id: localStorage.getItem('id')});tableData.value = response.data.data; // 将请求结果赋值给响应式数据;console.log(response)
};const router = useRouter();
const resetUser = () => {// 编辑逻辑const key = 'id'; // 替换为你需要获取的localStorage的keyconst value = localStorage.getItem(key);// 如果需要解析JSON,可以在这里进行解析try {axios.post("/api/base/reset", {id: localStorage.getItem('id')}).then(resp => {if (resp.data.code === 200) {alert(resp.data.message);localStorage.removeItem(localStorage.getItem('id'))router.push('/')} else {alert(resp.data.message);}})} catch (error) {console.error(error);// 处理错误}
};// 添加选课
const handleAddCourse = () => {debugger// editData.value = item;showModalAddCourse.value = true;
};// 删除选课
const handleDeleteCourse = (row, index) => {console.log(row)axios.post("/api/baseStudentCourse/delete", {id: row.id}).then(resp => {if (resp.data.code === 200) {alert(resp.data.message);axios.post("/api/baseStudentCourse/list", {id: localStorage.getItem('id')}).then(resp => {if (resp.data.code === 200) {tableData.value = resp.data.data} else {alert(resp.data.message);}})} else {alert(resp.data.message);}})
};const updateList = (updatedItem) => {// 假设使用index来更新list,但这种方式不推荐,如果数据顺序改变会有问题const index = tableData.value.findIndex(item => item.id === updatedItem.id);tableData.value.splice(index, 1, updatedItem);showModal.value = false;
};// 成绩修改
const refreshData = () => {axios.post("/api/baseStudentCourse/list", {id: localStorage.getItem('id')}).then(resp => {if (resp.data.code === 200) {tableData.value = resp.data.data} else {alert(resp.data.message);}})showModal.value = false;showModalAddCourse.value = false;
} ;// console.log(""")</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/26017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构:插入排序和希尔排序

插入排序 逆序的情况下&#xff1a; 时间复杂度&#xff1a;O(N^2) 空间复杂度&#xff1a;O(1) 顺序的情况下&#xff1a; 时间复杂度&#xff1a;O(N) 空间复杂度…

将字符串str1复制为字符串str2

定义两个字符数组str1和str2&#xff0c;再设两个指针变量p1和p2&#xff0c;分别指向两个字符数组中的有关字符&#xff0c;通过改变指针变量的值使它们指向字符串中的不同的字符&#xff0c;以实现字符的复制。编写程序&#xff1a; 运行程序&#xff1a; 程序分析&#xff1…

【T3】畅捷通T3软件查询明细账等账簿,出现某些列串位置。

【问题描述】 查询畅捷通T3软件科目明细账的时候&#xff0c; 出现某些行的数据串位置&#xff0c; 摘要、金额、方向都没有在对应的列。 【解决方案】 根据跟踪发现&#xff0c;最终在客户档案上发现问题。 数据串位中对应的客户名称、简称中的对后面多了一个【tab】键的空格…

从数组和指针笔试题深度理解 sizeof 和 strlen

一、sizeof 和 strlen 的区别 a.sizeof sizeof 计算变量所占内存内存空间大小的&#xff0c;单位是字节&#xff0c;如果操作数是类型的话&#xff0c;计算的是使用类型创建的变量所占内存空间的大小。sizeof 只关注占用内存空间的大小&#xff0c;不在乎内存中存放什么数据。…

Mysql学习(八)——多表查询

文章目录 五、多表查询5.1 多表关系5.2 多表查询概述5.3 内连接5.4 外连接5.5 自连接5.6 联合查询5.7子查询5.8 总结 五、多表查询 5.1 多表关系 概述&#xff1a;项目开发中&#xff0c;在进行数据库表结构设计时&#xff0c;会根据业务需求及业务模块之间的关系&#xff0c;…

Deepin安装PostGresql

最近要把开发环境完全从Windows移到Deepin上&#xff0c;本次介绍在Deepin借助apt-get安装和配置数据库。同时可以用Dbever提供图形化管理工具。 安装PostGreSQL数据库和创建数据库 #安装postgresql zhanglianzhuzhanglianzhu-PC:/$ sudo apt-get install postgresql-16 正在…

STM32CubeIDE使用过程记录

最近在做一款机器人的开发&#xff0c;使用到了STM32CubeIDE&#xff0c;这里记录一些使用技巧方便后续查阅。 STM32CubeIDE使用过程记录 快捷键开启代码自动补全功能看门狗设置CRC设置IO口取反定时器设置 及 定时器中断外部中断GPIO配置STC15单片机GPIO模式配置片内闪存&#…

完美落地的自动化测试框架(pytest):智能生成?业务依赖?动态替换?报告构建?你来,这儿有!

前言 随着软件测试行业的快速发展&#xff0c;去测试化、全员测开化的趋势&#xff0c;技术测试已成为确保软件质量不可或缺的一环。 但对于许多没有代码基础或缺乏系统性自动化知识的测试人员来说&#xff0c;如何入手并实现高质量的自动化测试成为了一个挑战。 为此&#xff…

【Java01】Java 17中的switch

Java 17中的switch 1. 新式switch语句的格式 switch (expression) {case value1 -> 表达式、代码块;case value2, value3 -> 表达式、代码块;// ...default -> 表达式、代码块; }case后允许同时放置多个valuecase value后的冒号变箭头case后的代码块不需要breakcase…

element-plus ui的使用说明

Element Plus UI的使用说明如下&#xff1a; 1. 安装Element Plus 首先&#xff0c;确保你的项目是基于Vue 3的。你可以使用npm或yarn来安装Element Plus。 使用npm安装&#xff1a; npm install element-plus --save 使用yarn安装&#xff1a; yarn add element-plus 2…

第54集《摄大乘论》

讲大家打开《讲义》第一八0页&#xff1a; 戊二、广能引发(分二&#xff1a;己一十难行&#xff1b;己二四作业) 己一、十难行(分二&#xff1a;庚一略释十难释&#xff1b;庚二重释随觉难行) 庚一、略释十难释(分二&#xff1a;辛一标数&#xff1b;辛二列释) 我们这一科讲…

Vue 路由实现组件切换

Vue 路由实现组件切换 不会就问 qq3131015733 觉得讲得不好了&#xff0c;麻烦喷一下&#xff0c;感谢反馈。 下拉菜单乃个项目的地址&#xff1a;https://1024code.com/ide/rzaqrgx 文章目录 Vue 路由实现组件切换前置知识入门效果展示安装依赖文件目录代码Home.vue代码Abou…

C语言 图形化界面方式连接MySQL【C/C++】【图形化界面组件分享】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一.配置开发环境 二…

基于Java-SpringBoot-VUE-MySQL的企业财务报销系统

基于Java-SpringBoot-VUE-MySQL的企业财务报销系统 登陆界面 联系作者 如需本项目源代码&#xff0c;可扫码或者VX:bob1638 联系作者。 主页-02 系统功能持续更新中。。。 介绍 本系统是采用现代信息技术手段&#xff0c;采用JAVA开发语言&#xff0c;VUE语言&#xff0c;HTML语…

python导入非当前目录(如:父目录)下的内容

在开发python项目时&#xff0c;通常会划分不同的目录&#xff0c;甚至不同层级的目录&#xff0c;这时如果直接导入不在当前目录下的内容时&#xff0c;会报如下的错误&#xff1a;ModuleNotFoundError: No module named miniai其实这里跟操作系统的环境变量很类似的&#xff…

WMS仓储管理系统高效驱动制造企业物料管理

在现代制造业的快速发展中&#xff0c;仓储管理作为供应链的核心环节&#xff0c;其效率直接影响到企业的生产力和市场竞争力。随着科技的进步&#xff0c;实施WMS仓储管理系统逐渐成为推动仓储管理向智能化转型的关键力量。本文将深入探讨WMS仓储管理系统如何以创新的方式驱动…

Spring AI 第三讲Embeddings(嵌入式) Model API 第一讲Ollama 嵌入

有了 Ollama&#xff0c;你可以在本地运行各种大型语言模型 (LLM)&#xff0c;并从中生成嵌入。Spring AI 通过 OllamaEmbeddingModel 支持 Ollama 文本嵌入。 嵌入是一个浮点数向量&#xff08;列表&#xff09;。两个向量之间的距离可以衡量它们之间的相关性。距离小表示关联…

Python爬虫实现“自动重试”机制的方法(1)

前言 本文是该专栏的第29篇,后面会持续分享python爬虫干货知识,记得关注。 处理过爬虫项目的同学,相信或多或少都知道python爬虫进行数据采集的时候,不可能每次都是100%采集成功,正因为如此,所以才有了爬虫的“自动重试机制”。 在web开发中,有时候需要通过网络请求获…

使用 C# 学习面向对象编程:第 1 部分

介绍 C# 完全基于面向对象编程 (OOP)。首先&#xff0c;类是一组相似的方法和变量。在大多数情况下&#xff0c;类包含变量、方法等的定义。当您创建此类的实例时&#xff0c;它被称为对象。在此对象上&#xff0c;您可以使用定义的方法和变量。 步骤1. 创建名为“LearnClass…

Dubbo入门

Dubbo&#xff0c;听名字好像有点高大上&#xff0c;但实际上它就是个让不同的计算机程序之间能够互相交流的工具&#xff0c;专业点说&#xff0c;它是一个分布式服务框架。想象一下&#xff0c;你有好几个小团队&#xff0c;每个团队负责开发一个部分&#xff0c;最后这些部分…