在现代的软件开发中，学生管理系统是一个常见的应用场景。通过学生管理系统，学校能够方便地管理学生的信息、课程安排和成绩等数据。本文将介绍如何使用Java语言搭建一个学生管理系统的前后端环境，并提供一个简单的示例。
1.环境搭建
- 学生管理系统 Student manage system （sms）
1.1 后端环境
我们需要搭建后端环境来处理前端发送的请求并与数据库进行交互。我们可以使用Java语言搭建后端应用，并选择一个Java Web框架，如Spring Boot或Servlet来处理HTTP请求。同时，还需要选择一个关系型数据库，如MySQL或PostgreSQL，来存储学生和课程等数据。
-
项目名：day054_sms
-
pom文件：mysql驱动、MyBatis、通用mapper、PageHelper、web、test、swagger、lombok
-
yml文件：数据源、MyBatis驼峰、日志(sql语句)
-
启动类
-
配置类：swagger配置类、跨域配置类
-
项目名：day054_sms
-
pom文件：mysql驱动、MyBatis、通用mapper、PageHelper、web、test、swagger、lombok
<!--确定spring boot版本--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.5.RELEASE</version> <relativePath/> </parent> <properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> <mybatis.starter.version>1.3.2</mybatis.starter.version> <mysql.version>5.1.32</mysql.version> <swagger.version>2.7.0</swagger.version> <pageHelper.starter.version>1.2.5</pageHelper.starter.version> <mapper.starter.version>2.0.2</mapper.starter.version> </properties> <dependencies> <!--web开发启动器--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--test开发启动器--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> <!-- mybatis启动器 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>${mybatis.starter.version}</version> </dependency> <!-- 分页助手启动器 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>${pageHelper.starter.version}</version> </dependency> <!-- 通用Mapper启动器 --> <dependency> <groupId>tk.mybatis</groupId> <artifactId>mapper-spring-boot-starter</artifactId> <version>${mapper.starter.version}</version> </dependency> <!-- mysql驱动 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!--swagger2--> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>${swagger.version}</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>${swagger.version}</version> </dependency> </dependencies> -
yml文件：数据源、MyBatis驼峰、日志(sql语句)
#端口号 server: port: 8080 #数据源(连接池) spring: datasource: driverClassName: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/day054_sms?useUnicode=true&characterEncoding=utf8 username: root password: '1234' #javabean与表驼峰映射 mybatis: configuration: map-underscore-to-camel-case: true #日志，给com.czxy.mapper包设置自己的日志级别 logging: level: com: czxy: mapper: debug -
启动类
package com.czxy; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import tk.mybatis.spring.annotation.MapperScan; //【注意】tk包下的注解 /** * @author 桐叔 * @email liangtong@itcast.cn * @description */ @SpringBootApplication @MapperScan("com.czxy.mapper") //扫描指定包，将在到Spring容器。取代：@org.apache.ibatis.annotations.Mapper 【注意】扫描和@Mapper不能同时使用 public class SmsApplication { public static void main(String[] args) { SpringApplication.run(SmsApplication.class, args); } } -
配置类：swagger配置类、跨域配置类
1.2 数据库
create database day054_sms;
use day054_sms;
CREATE TABLE `tb_user` (
`u_id` VARCHAR(32) PRIMARY KEY NOT NULL COMMENT '用户编号',
`user_name` VARCHAR(50) UNIQUE DEFAULT NULL COMMENT '用户名',
`password` VARCHAR(32) DEFAULT NULL COMMENT '密码',
`gender` BIT(1) DEFAULT NULL COMMENT '性别,1表示男，0表示女',
`image` VARCHAR(300) DEFAULT NULL COMMENT '头像图片'
);
INSERT INTO `tb_user`(`u_id`,`user_name`,`password`,`gender`,`image`) VALUES ('u001','jack','1234',1,'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80');
INSERT INTO `tb_user`(`u_id`,`user_name`,`password`,`gender`,`image`) VALUES ('u002','rose','1234',0,'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80');
INSERT INTO `tb_user`(`u_id`,`user_name`,`password`,`gender`,`image`) VALUES ('u003','tom','1234',1,'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80');
CREATE TABLE `tb_teacher` (
`tid` INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`tname` VARCHAR(50) DEFAULT NULL COMMENT '老师姓名',
`type` INT(11) DEFAULT NULL COMMENT '老师类型：1.授课老师、2.助理老师、3.辅导员老师'
);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (1,'梁桐老师',1);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (2,'马坤老师',2);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (3,'仲燕老师',3);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (4,'袁新奇老师',1);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (5,'任林达老师',2);
INSERT INTO `tb_teacher`(`tid`,`tname`,`type`) VALUES (6,'王珊珊老师',3);
CREATE TABLE `tb_class` (
`cid` INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`cname` VARCHAR(50) DEFAULT NULL COMMENT '班级名称',
`teacher1_id` INT(11) DEFAULT NULL COMMENT '授课老师',
`teacher2_id` INT(11) DEFAULT NULL COMMENT '助理老师',
`teacher3_id` INT(11) DEFAULT NULL COMMENT '辅导员老师'
);
INSERT INTO `tb_class`(`cid`,`cname`,`teacher1_id`,`teacher2_id`,`teacher3_id`) VALUES (1,'Java56',1,2,3);
INSERT INTO `tb_class`(`cid`,`cname`,`teacher1_id`,`teacher2_id`,`teacher3_id`) VALUES (2,'Java78',1,2,3);
INSERT INTO `tb_class`(`cid`,`cname`,`teacher1_id`,`teacher2_id`,`teacher3_id`) VALUES (3,'Java12',4,5,6);
INSERT INTO `tb_class`(`cid`,`cname`,`teacher1_id`,`teacher2_id`,`teacher3_id`) VALUES (4,'Java34',4,5,6);
CREATE TABLE tb_city(
c_id VARCHAR(32) PRIMARY KEY COMMENT '城市ID',
city_name VARCHAR(20) COMMENT '城市名称' ,
parent_id VARCHAR(32) COMMENT '父ID'
);
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320000','江苏省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140000','山西省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130000','河北省','0');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320100','南京市','320000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320102','玄武区','320100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('320103','白下区','320100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321300','宿迁市','320000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321322','沭阳县','321300');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('321323','泗阳县','321300');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140100','太原市','140000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140106','迎泽区','140100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140108','尖草坪区','140100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140800','运城市','140000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140823','闻喜县','140800');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('140828','夏 县','140800');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130100','石家庄市','130000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130127','高邑县','130100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('130185','鹿泉市','130100');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131000','廊坊市','130000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131003','广阳区','131000');
INSERT INTO tb_city(c_id,city_name,parent_id) VALUES('131022','固安县','131000');
CREATE TABLE `tb_student` (
`s_id` INT NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '学生ID',
`sname` VARCHAR(50) DEFAULT NULL COMMENT '姓名',
`age` INT(11) DEFAULT NULL COMMENT '年龄',
`birthday` DATETIME DEFAULT NULL COMMENT '生日',
`gender` CHAR(1) DEFAULT NULL COMMENT '性别',
`c_id` INT DEFAULT NULL,
`city_ids` VARCHAR(32) DEFAULT NULL COMMENT '城市：320000,321300,321322'
);
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (1,'赵三33',21,'2001-01-17 00:00:00','1',1,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (2,'钱四444',1900,'2001-05-16 00:00:00','1',2,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (3,'孙五56',189,'2022-03-15 00:00:00','0',1,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (4,'张三',20,'2020-12-21 00:00:00','0',2,'320000,321300,321322');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (5,'xxx',18,'2020-12-21 00:00:00','0',2,'140000,140800,140823');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (6,'123',18,'2020-11-01 00:00:00','0',3,'130000,130100,130127');
INSERT INTO `tb_student`(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`,`city_ids`) VALUES (7,'xx',18,'2020-11-02 00:00:00','0',1,'130000,131000,131003');
CREATE TABLE `tb_course` (
`c_id` INT NOT NULL PRIMARY KEY COMMENT '课程ID',
`cname` VARCHAR(50) DEFAULT NULL COMMENT '课程名称',
`desc` VARCHAR(100) DEFAULT NULL COMMENT '课程描述'
);
INSERT INTO `tb_course`(`c_id`,`cname`,`desc`) VALUES (1,'Java基础','JavaSE所有课程');
INSERT INTO `tb_course`(`c_id`,`cname`,`desc`) VALUES (2,'JavaWeb','Java Web 所有课程');
INSERT INTO `tb_course`(`c_id`,`cname`,`desc`) VALUES (3,'SSM','Spring Mvc、Spring、MyBatis所有课程');
CREATE TABLE `tb_student_course` (
`s_id` INT NOT NULL COMMENT '学生ID',
`c_id` INT NOT NULL COMMENT '课程ID',
`score` DOUBLE DEFAULT NULL,
PRIMARY KEY (`s_id`,`c_id`)
);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(1,1,100);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(1,2,95);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(1,3,NULL);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(2,1,100);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(2,2,95);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(2,3,100);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(3,1,80);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(3,2,NULL);
INSERT INTO tb_student_course(s_id,c_id,score) VALUES(3,3,90);
1.3 前端环境
首先，我们需要搭建前端环境来实现用户界面和交互。在本教程中，我们选择使用Vue.js作为前端框架来构建学生管理系统的前端应用。首先，确保已安装Node.js和npm（Node包管理器）。
1.3.1 项目
-
创建项目
-
修改配置
1.3.2 axios
-
安装
-
配置
1.3.3 elementui
-
安装
-
配置
import Vue from 'vue' // 2 element ui // 2.1 导入element ui的所有组件 import ElementUI from 'element-ui'; // 2.2 导入组件配套的css样式 import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue' import router from './router' import store from './store' // 1.1 导入axios import axios from 'axios' // 1.2 设置访问路径前缀(baseURL) axios.defaults.baseURL = 'http://localhost:8080' // 1.3 设置到vue中，方便访问 Vue.prototype.$http = axios // 2.3 将element 所有组件应用到vue环境中 Vue.use(ElementUI); -
测试
1.3.4 布局
-
需求：
-
设置重置样式
-
创建首页
- 创建登录页
- 修改App.vue，设置一级路由
<template>
<div id="app">
<!-- 设置路由视图，用于显示指定的路由对应页面 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
/* 满屏填充样式 */
html, body, #app {
height: 100%;
}
</style>
- 修改Home.vue，用于显示布局页面
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
}
</script>
<style>
/* 满屏填充样式 */
.el-container {
height: 100%;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
</style>
-
修改Login.vue页面，暂时提供模板
<template> <div>登录页面</div> </template> <script> export default { } </script> <style> </style>
1.3.5 菜单
<!--菜单start-->
<el-menu
default-active="/"
class="el-menu-vertical-demo"
background-color="#545c64"
router
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="/classes">
<template slot="title">
<i class="el-icon-location"></i>
<span>班级管理</span>
</template>
<el-menu-item index="/classesList">班级列表</el-menu-item>
<el-menu-item index="/classesAdd">添加班级</el-menu-item>
</el-submenu>
<el-submenu index="/student">
<template slot="title">
<i class="el-icon-location"></i>
<span>学生管理</span>
</template>
<el-menu-item index="/studentList">学生列表</el-menu-item>
<el-menu-item index="/studentAdd">添加学生</el-menu-item>
</el-submenu>
</el-menu>
<!--菜单end-->
1.3.6 二级路由
-
当前路由配置的子路由，称为二级路由。二级路由可以显示当前路由所设置的路由视图中。
-
配置二级路由
const routes = [ { path: '/', name: '首页', component: () => import('../views/Home.vue'), children: [ { path: '/classesList', name: '班级列表', component: () => import('../views/classes/ClassesList.vue') }, { path: '/classesAdd', name: '添加班级', component: () => import('../views/classes/ClassesAdd.vue') }, { path: '/studentList', name: '学生列表', component: () => import('../views/student/StudentList.vue') }, { path: '/studentAdd', name: '添加学生', component: () => import('../views/student/StudentAdd.vue') } ] }, { path: '/login', name: '登录页面', component: () => import('../views/Login.vue') } ] -
编写二级路由显示视图
-
-
创建对应页面
通过本文，我们介绍了如何搭建学生管理系统的前后端环境。前端环境使用Vue.js作为主要的前端框架，并通过Vue CLI工具创建和管理项目。后端环境使用Java语言，借助Spring Boot和Spring Data JPA搭建Web应用并与数据库进行交互。
