SpringBoot+Vue实现前后端分离的中学生日常行为评分管理系统

文末获取源码

开发语言:Java

使用框架:spring boot

前端技术:JavaScript、Vue 、css3

开发工具:IDEA/MyEclipse/Eclipse、Visual Studio Code

数据库:MySQL 5.7/8.0

数据库管理工具:phpstudy/Navicat

JDK版本:jdk1.8

Maven: apache-maven 3.8.1-bin

一、前言介绍 

本系统前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信,Element UI组件库使页面快速成型。后端部分:采用SpringBoot作为开发框架,同时集成MyBatis、Redis等相关技术。实现系统后台首页,系统用户(管理员、学生、教师)模块管理(校区管理、班级管理、年级管理、行为评分、评分项目、加分项目、扣分项目、学期总计)个人信息等功能。 

学生日常行为管理是学校管理的重要组成部分,学生的日常行为的好坏直接影响到个人的品行,注重学生日常行为管理才能帮助中学生全面发展。目前,中学生日常行为管理的方式主要是通过老师个人的记录,这样会造成中学生日常信息管理不全面,学生的加减分信息公布不及时等问题。开发中学生日常行为评分管理系统的目的是提高教师的工作效率,令老师和领导的日常管理事务得到有效缓解,也能让学生更全面、快速地掌握自身的信息,更好地约束学生。 

二、系统结构设计

整个系统是由多个功能模块组合而成的,要将所有的功能模块都一一列举出来,然后进行逐个的功能设计,使得每一个模块都有相对应的功能设计,然后进行系统整体的设计。

本系统结构图如图所示。

三、系统的E-R图

学习编程,我们都知道数据库设计是基于需要设计的系统功能,我们需要建立一个数据库关系模型,用于存储数据信息,这样当我们在程序中时,就没有必要为程序页面添加数据,从而提高系统的效率。数据库存储了很多信息,可以说是信息管理系统的核心和基础,数据库还提供了添加、删除、修改和检查,使系统能够快速找到自己想要的信息,而不是在程序代码中找到。数据库中信息表的每个部分根据一定的关系精确地组合,排列和组合成数据表。  

四、系统详细设计

4.1 管理员功能模块

管理员登录中学生日常行为评分管理系统,在登录页面输入用户名、密码、图片验证等进行登录,如图所示。 

管理员进入系统后台可以查看:后台首页,系统用户(管理员、学生、教师)模块管理(校区管理、班级管理、年级管理、行为评分、评分项目、加分项目、扣分项目、学期总计)个人信息等功能,还可进行相应的操作,如图所示。 

系统用户,在此页面可以查看用户信息,还可在该页面对注册的学生用户、教师用户以及管理员进行管控,如图所示。 

校区管理:管理员在此页面可以添加校区名称进行管理,可根据里进行详情、删除、查询等操作,如图所示。 

班级管理:管理员在此页面可以添加班级名称进行管理,可根据里进行详情、删除、查询等操作,如图所示。 

年级管理:管理员在此页面可以添加年级名称进行管理,可根据里进行详情、删除、查询等操作,如图所示。 

4.3 学生用户功能模块

不是中学生日常行为评分管理系统中正式用户的是可以在线进行注册的,如果你没有本中学生日常行为评分管理系统的账号的话,添加“注册”,当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号+身份+姓名+性别+学号+班级名称+年级名称+校区名称等信息后再点击“注册”按钮后将会先验证输入的有没有空数据,再次验证密码和确认密码是否是一样的,最后验证输入的账户名和数据库表中已经注册的账户名是否重复,只有都验证没问题后即可用户注册成功。注册成功后在登录页面输入用户名、密码、图片验证进行登录,如图所示。 

进入系统可以查看:后台首页,模块管理(行为评分、加分项目、扣分项目),个人信息等功能,还可进行相应的操作,如图所示。 

行为评分,在该页面可以查看校区名称、年级名称、班级名称、学生、学号、总分数、总扣分、实际分数等详细信息,如图所示。 

个人信息,在该页面可以查看用户名、用户组、状态等信息,可对昵称、手机号、邮箱和头像进行更改,如图所示。 

4.3 教师功能模块

教师进入系统后台可以查看:后台首页,模块管理(行为评分、加分项目、扣分项目、学期总计)个人信息等功能,还可进行相应的操作,如图所示。 

行为评分:教师在此页面查看评分日期、校区名称、年级名称、班级名称、学生、学号、评分类型的信息,可根据需要进行详情、加分、扣分等操作,如图所示。 

加分界面图

扣分界面图 

学期总计:教师在此页面可查看校区名称、年级名称、班级名称、学生、学号、评分学期、满分、扣分、加分、总分、合计等详细信息,可根据需要进行添加或导出等操作,如图所示。 

五、代码实现

@PostMapping("/add")
    @Transactional
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
        service.insert(service.readBody(request.getReader()));
        return success(1);
    }

    @Transactional
    public Map<String, Object> addMap(Map<String,Object> map){
        service.insert(map);
        return success(1);
}

    public Map<String,Object> readBody(BufferedReader reader){
        BufferedReader br = null;
        StringBuilder sb = new StringBuilder("");
        try{
            br = reader;
            String str;
            while ((str = br.readLine()) != null){
                sb.append(str);
            }
            br.close();
            String json = sb.toString();
            return JSONObject.parseObject(json, Map.class);
        }catch (IOException e){
            e.printStackTrace();
        }finally{
            if (null != br){
                try{
                    br.close();
                }catch (IOException e){
                    e.printStackTrace();
                }
            }
        }
        return null;
}

    public void insert(Map<String,Object> body){
        StringBuffer sql = new StringBuffer("INSERT INTO ");
        sql.append("`").append(table).append("`").append(" (");
        for (Map.Entry<String,Object> entry:body.entrySet()){
            sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
        }
        sql.deleteCharAt(sql.length()-1);
        sql.append(") VALUES (");
        for (Map.Entry<String,Object> entry:body.entrySet()){
            Object value = entry.getValue();
            if (value instanceof String){
                sql.append("'").append(entry.getValue()).append("'").append(",");
            }else {
                sql.append(entry.getValue()).append(",");
            }
        }
        sql.deleteCharAt(sql.length() - 1);
        sql.append(")");
        log.info("[{}] - 插入操作:{}",table,sql);
        Query query = runCountSql(sql.toString());
        query.executeUpdate();
    }

六、论文参考

七、项目总结

此时项目已经完成,即使实施的时间不是很长,但是这个过程中需要准备很长的一段时间去对系统设计开发所相关技术进行学习。在学习的过程中,我逐渐认识得到了我自身存在的一些不足。对于一些控制是必要的应用技能,能够理解,整个过程中仅仅是一个掌握了常用的性能和控制方法,我觉得挺容易的。从该系统中,系统的分析和设计的调查数据,并且已经经历了几个月,并努力几个月,该系统已经完成。很显然,该系统仍有很多不成熟的地方,在系统设计过程中有许多技术缺陷存在。在设计的过程中也涉及到了很多自己无法解决的问题,主要通过咨询老师解决这些问题,对于毕业设计的圆满完成,需要感谢老师们的指导。系统的开发环境和配置都是可以自行安装的,系统使用Java开发工具,使用比较成熟的Mysql数据库进行对系统前台及后台的数据交互,根据技术语言对数据库,结合需求进行修改维护,可以使得系统运行更具有稳定性和安全性,从而完成实现系统的开发。

回顾毕业设计的整个过程,既付出汗水也收获了很多。虽然经历了各种各样的困难,自己的不断研究探索,系统的实现仍有不足之处。

在以后的学习及工作中,我仍然继续学习计算机方面的技术,让我在后期的平台开发中可以更好更快的实现需求功能。我相信我可以让更多的好工作,做出更大的贡献。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以使用 Spring Boot + Vue + Webpack 来实现前后端分离的框架,具体代码如下:Spring Boot:<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>Vue:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Webpack:const path = require('path'); const webpack = require('webpack');module.exports = { entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] }; ### 回答2: 要实现Spring BootVue前后端分离,可以使用以下具体的框架和代码: 1. 后端使用Spring Boot框架实现RESTful API: - 创建一个Spring Boot项目,添加所需的依赖(如Spring Web、Spring Data JPA等)。 - 在项目中创建一个Controller类,使用`@RestController`注解标记。 - 编写各个API接口对应的方法,并使用`@RequestMapping`等注解进行路由映射。 - 可以使用Spring Data JPA来简化数据库操作,创建实体类和对应的Repository接口。 - 通过`@CrossOrigin`注解允许跨域请求。 2. 前端使用Vue框架实现单页应用: - 创建一个Vue项目,可以使用Vue CLI工具进行脚手架搭建。 - 在项目中创建相应的组件,用于展示数据和处理用户交互。 - 使用Vue Router进行前端路由管理。 - 使用Axios库进行前后端数据交互,发送HTTP请求获取后端API返回的数据。 - 使用Vue的生命周期钩子函数和Vue的数据绑定特性来处理页面逻辑。 3. 连接前后端: - 在Vue的组件中使用Axios发送请求到后端API。 - 接收后端返回的数据,并在页面上进行展示。 - 在触发某些事件时,调用Axios发送请求到后端API来更新数据。 这样,就可以实现前后端分离的架构。后端通过Spring Boot框架提供RESTful API,前端使用Vue框架构建单页应用,并通过Axios库发送HTTP请求和后端进行数据交互。通过这种方式,前后端可以独立开发和部署,提高了开发效率和灵活性。 ### 回答3: 要实现Spring BootVue前后端分离,可以采用以下具体的框架和代码实现。 1. 后端框架:Spring Boot Spring Boot是一种用于构建独立的、基于SpringJava应用程序的框架。它可以简化Spring应用程序的配置和部署,并提供了可集成的开发和测试工具。使用Spring Boot可以快速搭建后端API服务。 2. 前端框架:Vue.js Vue.js是一种用于构建用户界面的JavaScript框架,它可以实现响应式的数据绑定和组件化的开发。Vue.js使用简洁的语法和强大的生态系统,使得前端开发更加高效和可维护。 3. 框架整合 在实现前后端分离的过程中,可以通过Restful API进行前后端数据交互。后端使用Spring Boot提供API接口,前端使用Vue.js发起HTTP请求获取数据。 典型的框架代码结构如下: - 后端代码结构 - src/main/java - com.example.demo - controller - UserController.java:定义用户相关的API接口,处理HTTP请求。 - model - User.java:定义用户类,包含用户的属性和方法。 - service - UserService.java:定义用户相关的业务逻辑,如用户的增删改查。 - UserServiceImpl.java实现UserService接口的具体逻辑。 - repository - UserRepository.java:定义用户数据的访问方式,如数据库操作。 - src/main/resources - application.properties:配置Spring Boot应用的相关属性。 - 前端代码结构 - src - components - UserList.vue:用户列表组件,展示后端返回的用户数据。 - views - User.vue:用户界面,包含用户的增删改查等操作。 - router - index.js:前端路由配置文件,定义前端路由和页面的映射关系。 - App.vue:根组件,包含整个前端应用的布局和共享逻辑。 - main.js:入口文件,初始化Vue应用。 以上是一个简单的示例,可以根据实际需求和复杂程度进行相应的调整。通过Spring Boot提供API接口,Vue.js发起HTTP请求获取数据,实现前后端分离的开发模式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一季春秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值