SpringBoot+Vue实现前后端分离的学生选课系统

文末获取源码

开发语言:Java

使用框架:spring boot

前端技术:JavaScript、Vue.js 、css3

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

数据库:MySQL 5.7/8.0

数据库管理工具:phpstudy/Navicat

JDK版本:Java jdk8

Maven:apache-maven 3.8.1-bin

目录

一、前言介绍 

二、主要功能模块设计

2.1用户管理模块

2.2登录模块

2.3课程信息管理模块

2.4课程成绩管理模块

2.5选课模块

2.6选课管理模块

三、管理员功能模块 

3.1系统登录界面

3.2学生用户管理模块

3.3选课信息管理模块 

3.4教室信息管理模块 

四、学生用户功能模块

4.1公告通知模块 

4.2课程信息模块

4.3成绩信息模块

五、教师功能模块 

5.1选课信息模块

六、部分核心代码 

6.1课程添加关键代码 

6.2选课添加关键代码

6.3成绩添加关键代码

6.4系统用户管理关键代码

6.5学院信息添加关键代码

6.6课程信息管理关键代码

6.7选课审核关键代码


一、前言介绍 

本系统使用的是现流行的开发语言,即Springboot技术。同时所有的信息都是以网页的形式展示,系统中的信息都可以在后台操作数据库达到数据更新的效果。用户只需要会计算机的基本操作或者会上网就可以使用本系统。系统布局较简单,功能操作不复杂,完全符合现代市场需求。 

本课题的研究对象是学生选课系统,该系统实现了系统用户管理、学生管理、教师管理、课程信息管理、选课管理、成绩管理、学院信息管理、教室信息管理等功能。本系统在设计上,考虑到系统内容以及系统的受众群体,在系统的美工方面采用了比较正规的设计,同时也提供了友好的页面以及简单的操作,系统采用Springboot、Mysql,这样的组合不但利用上了在大学中所学到的知识,并且能够使系统真正的发布到互联网上,而不是一个单纯的演示系统。

本系统经过测试,运行效果稳定,操作方便、快捷。在具体的应用过程中,有可能会出现一些问题,今后还会对本系统不断地进行完善、更新,使其功能更强大,应用更广泛。

二、主要功能模块设计

2.1用户管理模块

该模块包括普通用户管理和系统用户管理,系统用户主要是普通管理员,对用户信息进行管理,只有普通用户才可在该系统上进行相应的操作。用户对个人信息可进行修改;管理员可对自己的个人信息进行维护,同时可对用户的密码信息进行修改,也可删除系统中的用户 

2.2登录模块

根据用户输入的 Id 和密码到数据库中查找该用户,如果未能找到该用户则做出 提醒“用户名或密码错误”,如果找到该用户,则要判断用户的类别然后根据用户类别进入相应的页面。 

2.3课程信息管理模块

(1)课程添加:必须填写课程编号、课程名称、课程负责账号、课程负责人必须是唯一的, 提交后判断某一项是否为填写, 如果是则做出提醒, 填写符合规则后方可添加到数据库。

(2)课程规查询:可以根据课程编号等信息对课程进行查询,查询结果可能有多个。

(3)课程修改:除了课程编号外,其他信息均可以修改。

(4)课程删除:首先找到要删除的课程(一个或多个),然后删除即可。

2.4课程成绩管理模块

教师选中某个选课,点击添加成绩,填写成绩数据,点击添加按钮,完成选课成绩操作,每次成绩录入,列表将生成新的成绩信息,供管理员管理。 

2.5选课模块

用户查询课程规划信息,选择课程规划进入该课程规划的详细页面,点击选课按钮,填写选课表单,添加选课记录。 

2.6选课管理模块

用户选课课程规划模块主要实现的是对课程规划的选课功能,同时可查看自己的选课记录,并对选课可进行取消选课操作。管理员登录系统后,可查看用户的选课信息,也可搜索选课信息,同时可对选课信息进行确认或删除的操作。 

三、管理员功能模块 

3.1系统登录界面

3.2学生用户管理模块

3.3选课信息管理模块 

3.4教室信息管理模块 

四、学生用户功能模块

4.1公告通知模块 

4.2课程信息模块

4.3成绩信息模块

五、教师功能模块 

5.1选课信息模块

六、部分核心代码 

6.1课程添加关键代码 

@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();

    }

6.2选课添加关键代码

@RequestMapping(value = {"/avg_group", "/avg"})

public Map<String, Object> avg(HttpServletRequest request) {

        Query count = service.avg(service.readQuery(request), service.readConfig(request));

        return success(count.getResultList());

}

6.3成绩添加关键代码

 @RequestMapping("/get_list")

    public Map<String, Object> getList(HttpServletRequest request) {

        Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));

        return success(map);

}

6.4系统用户管理关键代码

@RestController

@RequestMapping("auth")

public class AuthController extends BaseController<Auth, AuthService> {

    /**

     * 服务对象

     */

    @Autowired

    public AuthController(AuthService service) {

        setService(service);

    }

}

6.5学院信息添加关键代码

public class FindConfig {

    public static String PAGE = "page";

    public static String SIZE = "size";

    public static String LIKE = "like";

    public static String ORDER_BY = "orderby";

    public static String FIELD = "field";

    public static String GROUP_BY = "groupby";

    public static String MIN_ = "_min";

    public static String MAX_ = "_max";

}

6.6课程信息管理关键代码

@SpringBootApplication

@EnableJpaRepositories

public class Application {

    public static void main(String[] args) {

        SpringApplication.run(Application.class,args);

    }

}

6.7选课审核关键代码

@RequestMapping(value = {"/sum_group", "/sum"})

    public Map<String, Object> sum(HttpServletRequest request) {

        Query count = service.sum(service.readQuery(request), service.readConfig(request));

        return success(count.getResultList());

}
  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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、付费专栏及课程。

余额充值