首页 > 其他分享 >【开源】基于Vue.js的计算机机房作业管理系统的设计和实现

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现

时间:2023-11-16 20:33:18浏览次数:39  
标签:计算机机房 Vue 课程 作业 课时 js task 模块 学生


【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_java

一、摘要

1.1 项目介绍

基于Vue+SpringBoot+MySQL的计算机机房作业管理系统包含课程档案模块、课时档案模块、学生作业模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,计算机机房作业管理系统基于角色的访问控制,给课程管理员、教师、学生使用,可将权限精确到按钮级别,您可以自定义角色并分配权限,系统适合设计精确的权限约束需求。

1.2 项目详细录屏

https://www.bilibili.com/video/BV13h4y1K7KZ


二、功能模块

2.1 登录注册模块

计算机机房作业管理系统需要支持用户的登录注册功能,所以登录注册模块是为了用户进入计算机机房作业管理系统而设计的。

2.2 课程管理模块

课程管理模块是用于学校或机构记录和管理课程信息的教育管理软件,课程管理模块提供详细的课程信息、开课时间、教学老师等相关信息,帮助学生做出选择,更好地了解课程特点和内容,通过课程管理模块,学校或培训机构可以统一安排每门课程的课程计划、教师和班级,从而优化教育资源的配置和利用,最大限度地提高资源效率。课程管理模块允许您监控和管理课程质量,同时记录和收集学生的课程反馈和评分,为改进课程提供宝贵的数据支持,通过课程管理模块,学校和机构可以轻松了解每一位教职工提供的课程状态,并及时掌握、管理和支持教育进展和效果。

2.3 课时管理模块

课时管理模块是一个用于管理课程和课时的在线教育平台,课时管理模块可以记录和管理每节课的课时、内容、课时等信息,方便教师和管理人员安排和调整教育计划和进度,通过课时管理模块,教师可以根据学生的学习进度和理解情况灵活调整上课和上课时间安排,从而提高教育效果和质量,课时管理模块记录和统计学生学习状况、考勤卡记录、考试成绩等数据,为教师和管理人员提供宝贵的数据支持,从而更好地了解学生的学习状况和需求、教育情况,提高教育和教育管理的效率和质量,课时管理模块帮助管理人员和评委对教学质量和教学质量进行评估,确保教学质量和效果的稳定和提高。

2.4 学生作业模块

学生作业模块是用于管理教育软件中的学生作业的模块,学生作业模块使教师更容易管理和评分学生作业,学生作业模块允许教师查看每个学生是如何完成作业的,修改他们的意见,并及时提供评分和反馈,学生作业模块使学生能够更好地理解、掌握和应用所学知识,通过学生作业模块,学生可以及时了解作业要求、提交时间等重要信息,根据目的进行准备和学习,增加学习的动力和动力,学生家庭作业模块确保学生提交的家庭作业得到很好的保护和保密,只有经过授权的老师才能看到学生提交的作业内容,这样学生个人信息的安全和隐私就不会泄露,学生作业模块有助于家长及时了解孩子的进度和家庭作业完成情况。该模块允许家长查看孩子提交的作业、老师的评价、建议等,并及时与老师沟通和联系。


三、系统设计

3.1 用例设计

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_java_02

3.2 数据库设计

3.2.1 课程表

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_spring boot_03

3.2.2 课时表

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_管理系统_04

3.2.3 学生作业表

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_vue.js_05


四、系统展示

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_mysql_06

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_vue.js_07

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_vue.js_08

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_java_09

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_mysql_10

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_mysql_11


五、核心代码

5.1 查询课程数据

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询课程")
public Result<IPage<Course>> getByPage(@ModelAttribute Course course ,@ModelAttribute PageVo page){
    QueryWrapper<Course> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(course.getTitle())) {
        qw.like("title",course.getTitle());
    }
    if(!ZwzNullUtils.isNull(course.getTeacherName())) {
        qw.like("teacher_name",course.getTeacherName());
    }
    IPage<Course> data = iCourseService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<Course>>().setData(data);
}

5.2 新增课时

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增课时")
public Result<ClassHour> insert(ClassHour classHour){
    Course course = iCourseService.getById(classHour.getCourseId());
    if(course == null) {
        return ResultUtil.error("课程不存在");
    }
    classHour.setCourseName(course.getTitle());
    iClassHourService.saveOrUpdate(classHour);
    return new ResultUtil<ClassHour>().setData(classHour);
}

5.3 提交作业

@RequestMapping(value = "/upload", method = RequestMethod.GET)
@ApiOperation(value = "提交作业")
public Result<Task> upload(@RequestParam String id,@RequestParam String url){
    Task task = iTaskService.getById(id);
    if(task == null) {
        return ResultUtil.error("作业不存在");
    }
    task.setUploadTime(DateUtil.now());
    task.setTask(url);
    iTaskService.saveOrUpdate(task);
    return ResultUtil.success();
}

5.4 批阅作业

@RequestMapping(value = "/check", method = RequestMethod.GET)
@ApiOperation(value = "批阅作业")
public Result<Task> check(@RequestParam String id,@RequestParam BigDecimal grade){
    Task task = iTaskService.getById(id);
    if(task == null) {
        return ResultUtil.error("作业不存在");
    }
    User currUser = securityUtil.getCurrUser();
    task.setCheckId(currUser.getId());
    task.setCheckName(currUser.getNickname());
    task.setCheckTime(DateUtil.now());
    task.setGrade(grade);
    iTaskService.saveOrUpdate(task);
    return ResultUtil.success();
}

六、免责说明

  • 本项目仅供个人学习使用,商用授权请联系博主,否则后果自负。
  • 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权,拥有最终解释权。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复,相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户,必须同意以下内容,否则请勿下载!

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关,博主对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),博主概不承担任何责任。
  4. 必须了解使用本软件的风险,博主不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现_管理系统_12

标签:计算机机房,Vue,课程,作业,课时,js,task,模块,学生
From: https://blog.51cto.com/u_16322671/8431916

相关文章

  • 【开源】基于Vue.js的车险自助理赔系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的车险自助理赔系统包含车辆管理模块、车险理赔模块、理赔审核模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,车险自助理赔系统基于角色的访问控制,给车险管理......
  • vue2 项目打包后自动压缩成zip文件
    安装依赖1pnpminstallfilemanager-webpack-plugin--save-dev在vue.config.js中添加如下代码constFileManagerPlugin=require('filemanager-webpack-plugin')//引入插件1configureWebpack:{2plugins:[3newFileManagerPlugin({......
  • JS判断变量的具体数据类型封装函数
    封装函数为://返回传入值的数据类型functionGetValueType(val){vartype=typeofval//object需要使用Object.prototype.toString.call判断if(type==='object'){vartypeStr=Object.prototype.toString.call(val)//解析[objectStr......
  • Cannot read properties of undefined (reading 'indexOf') at VueComponent.resetFie
    Cannotreadpropertiesofundefined(reading'indexOf')atVueComponent.resetField(index.js:1:370572) elementUI源码报错,原因竟然是form-item没加prop,折腾了一两个小时,真是服了。rules按照表单的prop来的用了那个resetfieds必须每个<el-form-item>都加prop!! ......
  • 使用js添加按钮,vue页面 el-calendar 添加自定义按钮
    html代码:<divclass="schedule"><divclass="title">今日日程</div><divclass="allSchedule"><el-rowclass="addSchedule"type="flex"align="......
  • vue2 前后端分离的项目,用宝塔部署,出现域名访问根目录能访问,加任何网址就404
    https://admin.xxx.com/ 访问正常https://admin.xxx.com/index  访问404location/{root/home/ruoyi/projects/ruoyi-ui;try_files$uri$uri//index.html;indexindex.htmlindex.htm;} nginx加上上面这段......
  • JS逆向实战26——某店ua模拟登陆
    声明本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!目标目标网站aHR0cHM6Ly9kLndlaWRpYW4uY29tL3dlaWRpYW4tcGMvbG9naW4=目标获取登录接口UA参数加密,U......
  • nodejs敲门
    前言node.js是在电脑上,给js一个可以脱离浏览器运行的环境。功能上像jdk,操作为命令行。现在演化为可以做web服务器使用,拥有许多成熟的项目和插件。本文简单讲讲它,以及它的两个小用途(TS和WebApi服务器)。谈不上入门,只能算是“敲门”。  安装:nodejs官网和中文网都可以下载安......
  • vue2和vue3ref的区别(详解)
    Vue2和Vue3中ref的区别如下:在Vue2中,ref主要用于在模板中获取DOM元素或组件实例。而在Vue3中,虽然ref也可以获取DOM元素或组件实例,但更重要的是,它还可以将一个基本类型的变量转换成响应式的数据,无需再通过复杂的步骤来访问响应式数据。另外,Vue3的ref还支持对象属性和数组索引......
  • vue获取el-table当中选中行的各列数据
      首先在标签中声明@selection-change="handleSelectionChange"之后在script中的methods当中编写该方法console.log(this.$refs.cgTable.selection);这一行代码可以获取你所选择的所有行this.idList=this.$refs.cgTable.selection.map((item)=>item.id);运用map获......