天马学航——智慧教务系统(移动端)开发日志四

天马学航——智慧教务系统(移动端)开发日志四

日志摘要:优化了教师端界面的UI,更新了教师端添加课程,提交成绩等功能,修复了一些已知的BUG

1、教师添加课程设计

教师在此界面添加课程,并将数据提交后端进行审核

界面效果
image-20240620111914879
前端源码
@Entry
@Component
struct AddCourse {selectedDate: Date = new Date("2010-1-1")@State time:string = '请选择时间'@State cid:string = '-111'@State cname:string = '-111'build() {Column({ space: 5 }) {Text(" ")Row({ space: 10 }) {Text(" ")Image($r('app.media.back')).width(30).height(30).onClick(function () {//返回上一页router.back() //直接返回})Text("发布课程").fontSize(30).fontWeight(FontWeight.Bolder)}.width('100%')Text("----------------------------------------------")Text(" ")Column({space:30}){Text("申请发布课程").fontSize(30).fontWeight(FontWeight.Bolder).fontSize(30)Row({space:20}){Text("课程号    ").fontSize(15)TextInput().width('70%').height(50).type(InputType.Normal).onChange(value=>{this.cid = value})}.width('100%')Row({space:20}){Text("课程名称").fontSize(15)TextInput().width('70%').height(50).type(InputType.Normal).onChange(value=>{this.cname = value})}.width('100%')Row({space:20}){Text("上课时间").fontSize(15)Button("选择时间").width(100).margin(20).onClick(() => {DatePickerDialog.show({start: new Date("2023-1-1"), // 设置选择器的起始日期end: new Date("2055-12-31"), // 设置选择器的结束日期selected: this.selectedDate, // 设置当前选中的日期lunar: false,onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调// 通过Date的setFullYear方法设置按下确定按钮时的日期,这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate.setFullYear(value.year, value.month, value.day)console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))this.time=value.year+"-"+(value.month+1)+"-"+ value.dayif(value.month+1>0&&value.month+1<10){this.time=value.year+"-0"+(value.month+1)+"-"+ value.day}if(value.day>0&&value.day<10){this.time=value.year+"-"+(value.month+1)+"-0"+ value.day}if((value.month+1>0&&value.month+1<10)&&(value.day>0&&value.day<10)){this.time=value.year+"-0"+(value.month+1)+"-0"+ value.day}},onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调console.info("DatePickerDialog:onCancel()")},onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调console.info("DatePickerDialog:onChange()" + JSON.stringify(value))}})})Text(this.time).fontSize(15)}.width('100%')Column({space:20}){Text("*注意:请确认信息后再提交,否则可能导致审核不通过!").fontSize(15).fontColor(Color.Red)Button("提交申请").width(200).onClick(()=>{if(this.time === "请选择时间" || this.cid === '-111' || this.cname === '-111'){promptAction.showToast({message: "请完成表单的填写",duration: 2000,bottom: 50});}else {AddCourses.STA(this.cid,this.cname,this.time).then(resp=>{console.log("后端返回"+resp)promptAction.showToast({message: resp,duration: 2000,bottom: 50});})}})}}.width('80%')}}
}
请求源码
class AddCourses {baseURL: string = IP.ipSTA(cid: string, cname: string, ctime: string): Promise<string> {const data = {cid: cid,cname: cname,ctime: ctime}return new Promise((resolve, reject) => {let httpRequest = http.createHttp()httpRequest.request(`${this.baseURL}/InsertCourse`,{method: http.RequestMethod.GET,extraData: data,connectTimeout: 10000,readTimeout: 10000},).then(resp=>{if(resp.responseCode===200){console.log("请求成功!"+resp.result)resolve(resp.result.toString())}else {console.log("请求出现问题"+resp.responseCode)}}).catch(err=>{console.log("请求失败")})})}
}const sc1 = new AddCourses()
export default sc1 as AddCourses
后端源码
public class TeacherInsertCourse extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json");resp.setCharacterEncoding("UTF-8");String sid = req.getParameter("sid");String cid = req.getParameter("cid");String grade = req.getParameter("grade");System.out.println("教师提交成绩"+sid+cid+grade);//MybatisSqlSession sql = MybatisUntills.getSqlSession();CourseMapper mapper = sql.getMapper(CourseMapper.class);Map<String,Object> map = new HashMap<String, Object>();map.put("sid",sid);map.put("cid",cid);map.put("grade",grade);int i = mapper.TeacherInsertGrade(map);sql.commit();if(i==1){resp.getWriter().write("上传成功");}else {resp.getWriter().write("上传失败");}sql.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

2、教师提交成绩功能设置

前端从后端获取本教师任教的课程,并显示在前端,前端通过表单收集每门课程的评分,并向后端发送请求

image-20240620111914879
前端源码
struct AddGrade {@State grades:Grade[] = []@State g:string = '000'aboutToAppear(){this.getinfo()}build() {Column({ space: 5 }) {Text(" ")Row({ space: 10 }) {Text(" ")Image($r('app.media.back')).width(30).height(30).onClick(function () {//返回上一页router.back() //直接返回})Text("提交成绩").fontSize(30).fontWeight(FontWeight.Bolder)}.width('100%')Text("----------------------------------------------")Text(" ")List({space:20}){ForEach(this.grades,grade=>{ListItem(){Row({space:30}){Text(" ")Column({space:10}){Text("学号:"+grade.sid)Text("姓名:"+grade.sname)Text("课程名称:"+grade.cname)Text("课程号:"+grade.cid)Row(){Text("成绩:")TextInput({placeholder:"给分有理,扣分有据"}).width(200).type(InputType.Number).onChange(value=>{this.g = value})}Button("提交").onClick(()=>{InsertGrade.STA(grade.sid,grade.cid,this.g).then(resp=>{promptAction.showToast({message: resp,duration: 2000,bottom: 50});})router.pushUrl({url:"pages/view/Teacher/AddGrade"},router.RouterMode.Single,err => {if(err){console.log("跳转失败")}})})}.width('100%').justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}.width('95%').padding(20).backgroundColor(Color.White).borderRadius(15).shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })}})}}}getinfo(){GetCourse.GT().then(resp=>{console.log("前端收到数据"+resp);this.grades = respif(resp.length === 0){promptAction.showToast({message: "您已上传完所有成绩~",duration: 2000,bottom: 50});}})}
}
请求源码
请求课程
class GetCourse {baseURL: string = IP.ipGT(): Promise<Grade[]> {return new Promise((resolve, reject) => {let Http = http.createHttp()Http.request(`${this.baseURL}/GetTeacherCourse`,{method: http.RequestMethod.GET,connectTimeout: 10000,readTimeout: 10000}).then(resp=>{if(resp.responseCode === 200){console.log("请求成功"+resp.result)resolve(JSON.parse(resp.result.toString()))}else {console.log("请求发现异常"+resp.responseCode)}}).catch(err=>{console.log("请求失败"+err)})})}
}const sc = new GetCourse()
export default sc as GetCourse
向后端返回成绩
class InsertGrade {baseURL: string = IP.ipSTA(sid: string, cid: string, grade: string): Promise<string> {const data = {cid: cid,sid: sid,grade: grade}return new Promise((resolve, reject) => {let httpRequest = http.createHttp()httpRequest.request(`${this.baseURL}/TeacherInertCourse`,{method: http.RequestMethod.GET,extraData: data,connectTimeout: 10000,readTimeout: 10000},).then(resp=>{if(resp.responseCode === 200){console.log("后端返回成功"+resp.result)resolve(resp.result.toString())}else {console.log("请求出现问题:"+resp.responseCode)}}).catch(err=>{console.log("请求失败"+err)})})}
}const sc = new InsertGrade()
export default sc as InsertGrade
后端源码

请求课程部分与学生选课第一部分业务逻辑相似,这里不再赘述

这里只写出后端处理前端返回成绩的部分

public class TeacherInsertCourse extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json");resp.setCharacterEncoding("UTF-8");String sid = req.getParameter("sid");String cid = req.getParameter("cid");String grade = req.getParameter("grade");System.out.println("教师提交成绩"+sid+cid+grade);//MybatisSqlSession sql = MybatisUntills.getSqlSession();CourseMapper mapper = sql.getMapper(CourseMapper.class);Map<String,Object> map = new HashMap<String, Object>();map.put("sid",sid);map.put("cid",cid);map.put("grade",grade);int i = mapper.TeacherInsertGrade(map);sql.commit();if(i==1){resp.getWriter().write("上传成功");}else {resp.getWriter().write("上传失败");}sql.close();}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

3、BUG修复

修复了一些已知的BUG

4、UI优化

优化教师端图标和界面布局,使得更加人性化

image-20240620111914879

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

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

相关文章

WAAP的特性、功能以及优势

随着互联网技术的快速发展&#xff0c;Web应用程序和API已经成为企业日常运营中不可或缺的部分。然而&#xff0c;与此同时&#xff0c;网络攻击手段也愈发复杂和隐蔽&#xff0c;给企业的数据安全带来了严峻的挑战。为了应对这一挑战&#xff0c;WAAP&#xff08;WebApplicati…

fastapi+vue3+primeflex前后端分离开发项目第一个程序

安装axios axios是用来请求后端接口的。 https://www.axios-http.cn/docs/intro pnpm 是一个前端的包管理工具&#xff0c;当我们需要给前端项目添加新的依赖的时候&#xff0c;就可以使用pnpm install 命令进行安装。 pnpm install axios安装 primeflex primeflex是一个cs…

知乎客户端跨平台-Hybrid-调试实战

在开发上述功能的过程中&#xff0c;发现了 flipper 这个工具 flipper 提供了一个桌面客户端&#xff0c;然后这个桌面客户端提供了一个和手机客户端通信的机制&#xff0c;免去了 socket 服务的开销&#xff0c;依靠这个通信机制&#xff0c;我们可以把上述的功能复制过来 基…

AI时代的音乐革命:创作更简单,灵魂在哪里?

#AI在创造还是毁掉音乐# 我是李涛&#xff0c;一名音乐创作者&#xff0c;最近一直在思考一个问题&#xff1a;AI到底是在创造音乐&#xff0c;还是在毁掉音乐&#xff1f; 几个月前&#xff0c;我第一次接触到AI音乐创作工具。它让我震惊&#xff0c;只需要输入几个关键词&a…

Apollo9.0 PNC源码学习之Planning模块(一)—— 规划概览

0 前言 规划本质就是搜索问题,数学角度来看就是寻找函数最优解 规划模块复杂的就是相关的逻辑处理和过程计算 对于规划的三维问题,目前解决方案:降维+迭代 将SLT问题分解为ST和SL二维优化问题:在一个维度优化之后,再另一个维度再进行优化,最后整合成三维的轨迹。 虽然降…

How to create a langchain doc from an str

问题背景&#xff1a; Ive searched all over langchain documentation on their official website but I didnt find how to create a langchain doc from a str variable in python so I searched in their GitHub code and I found this : 在 langchain 的官方文档中&#…

游戏工厂:AI(AIGC/ChatGPT)与流程式游戏开发

游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发 码客 卢益贵 ygluu 关键词&#xff1a;AI&#xff08;AIGC、ChatGPT、文心一言&#xff09;、流程式管理、好莱坞电影流程、电影工厂、游戏工厂、游戏开发流程、游戏架构、模块化开发 一、前言…

Vue76-路由对浏览器历史记录的影响

一、push模式 默认是push 二、replace模式 替换当前记录&#xff01; &#xff08;当前指针指向的那一条记录&#xff09; 三、小结

完全禁用 Windows Defender

你有没有这样的情况&#xff0c;安装软件时&#xff0c;关闭了Windows实时保护&#xff0c;过几天&#xff0c;打开软件时&#xff0c;发现里面的附件被吞噬&#xff0c;因为Defender又自动打开了&#xff0c;那么&#xff0c;有没有一款可以完全禁用Defender的工具&#xff0c…

年薪50w+的项目经理,手把手教你如何复盘

复盘是一种重要的学习和改进工具&#xff0c;对于项目经理来说&#xff0c;能帮助识别项目中的成功与失败&#xff0c;为未来的项目管理提供宝贵经验。 理论部分 定义目标。在开始复盘之前&#xff0c;明确复盘的目标是什么。是为了找出项目中的问题并提出解决方案&#xff0c…

腾讯大牛,手把手教你建立自己的Android学习知识体系,附实例+面经+建议!

主要让我介绍了我的项目&#xff0c;又出了几个题让我做。 项目就是让我介绍我科研做的那个流式二维码数据传输系统&#xff0c;我介绍的时候面试官听的很仔细&#xff0c;让我详细介绍了拍到的二维码是如何定位、采样和识别转换成二进制流的。然后问我传输速率是多少&#xff…

stm32学习笔记---新建工程步骤和点灯演示

目录 STM32的三种开发方式 基于寄存器的方式 基于库函数的方式 基于Hal库的方式 固件库介绍 新建基于标准库的工程步骤 配置寄存器来完成点灯操作 添加库函数来完成点灯操作 添加库函数 开始点灯操作 第一步&#xff1a;使能时钟 第二步&#xff1a;配置端口模式 …

JVM专题六:JVM的内存模型

前面我们通过Java是如何编译、JVM的类加载机制、JVM类加载器与双亲委派机制等内容了解到了如何从我们编写的一个.Java 文件最终加载到JVM里的&#xff0c;今天我们就来剖析一下这个Java的‘中介平台’JVM里面到底长成啥样。 JVM的内存区域划分 Java虚拟机&#xff08;JVM&…

使用 Ubuntu x86_64 平台交叉编译适用于 Linux aarch64(arm64) 平台的 QT5(包含OpenGL支持) 库

使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库 目录 使用 Ubuntu AMD64 平台交叉编译适用于 Linux ARM64 平台的 QT5(包含 OpenGL/WebEngine 支持) 库写在前面前期准备编译全流程1. 环境搭建2. 复制源码包并解压&#xff0c;创…

【Python机器学习】NMF——将NMF应用于人脸图像

将NMF应用于之前用过的Wild数据集中的Labeled Faces。NMF的主要参数是我们想要提取的分量个数。通常来说&#xff0c;这个数字要小于输入特征的个数&#xff08;否则的话&#xff0c;将每个像素作为单独的分量就可以对数据进行解释&#xff09;。 首先&#xff0c;观察分类个数…

细胞核的分割与分类模型·HoVer-Net|动手实操

小罗碎碎念 上一期推文已经介绍了hover net的背景和代码仓库情况&#xff0c;这一期则是根据作者提供的示例代码进行分析&#xff0c;详细你看完这一期推文&#xff0c;应该就能大致掌握这些套路了。如果觉得意犹未尽&#xff0c;那就等待下一期吧&#xff0c;哈哈。 一、编程…

Vue3 + TS + Antd + Pinia 从零搭建后台系统(四) ant-design-vue Layout布局,导航栏,标签页

书接上回本篇主要介绍&#xff1a; Layout布局&#xff0c;导航栏&#xff0c;标签页继续填充目录 按需引入组件Layout布局&#xff0c;导航栏&#xff0c;标签页css样式 按需引入组件 使用unplugin-vue-components插件完成ant-design-vue组件的按需加载。 前文中已处理过&…

运营管理和服务支撑阶段

我前面的所有设备都部署好了&#xff0c;现在就需要运营管理和服务支撑 遇到问题了迅速解决&#xff0c;避免风险扩大 我们也可以给客户提供上面的服务&#xff0c;提高客户的预警能力&#xff0c;安全风险处理能力 我们不仅提供设备&#xff0c;还提供服务 我们公司成立了安…

高考填报志愿选专业,要善于发掘自身优势

每年的高考季&#xff0c;如何填报志愿又再成为困扰家长以及学生的难题&#xff0c;可能在面对大量的专业时&#xff0c;无论是考生还是家长都不知道应该如何选择&#xff0c;好的专业孩子不一定有优势&#xff0c;感兴趣的冷门专业又担心日后找工作难。 实际上&#xff0c;专业…

React+TS前台项目实战(十六)-- 全局常用组件Pagination封装

文章目录 前言Pagination组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 [PC端&手机端] 总结 前言 在上篇文章中&#xff0c;我们封装了表格组件Table&#xff0c;本文则继续封装配套使用的分页器组件。想看Table表格组件的&#xff0c;可自行查看全局常用组件Tab…