在现代的软件开发中,学生办理体系是一个常见的运用场景。经过学生办理体系,校园能够便利地办理学生的信息、课程组织和成果等数据。本文将介绍怎么运用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 薛慕昭
     * @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装备类、跨域装备类

Java项目学生办理体系一前后端环境建立

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://www.6hu.cc/storage/2023/12/223741-R5K4pg.gif?imageView2/1/w/80/h/80');
INSERT  INTO `tb_user`(`u_id`,`user_name`,`password`,`gender`,`image`) VALUES ('u002','rose','1234',0,'https://www.6hu.cc/storage/2023/12/223741-R5K4pg.gif?imageView2/1/w/80/h/80');
INSERT  INTO `tb_user`(`u_id`,`user_name`,`password`,`gender`,`image`) VALUES ('u003','tom','1234',1,'https://www.6hu.cc/storage/2023/12/223741-R5K4pg.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 项目

  • 创立项目

Java项目学生办理体系一前后端环境建立

  • 修正装备

Java项目学生办理体系一前后端环境建立

1.3.2 axios

  • 装置

Java项目学生办理体系一前后端环境建立

  • 装备
    Java项目学生办理体系一前后端环境建立

1.3.3 elementui

  • 装置

Java项目学生办理体系一前后端环境建立

  • 装备

Java项目学生办理体系一前后端环境建立
“`js 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);
```
  • 测验

Java项目学生办理体系一前后端环境建立

1.3.4 布局

  • 需求:

Java项目学生办理体系一前后端环境建立
  • 设置重置款式

Java项目学生办理体系一前后端环境建立
  • 创立首页

Java项目学生办理体系一前后端环境建立
  • 创立登录页

Java项目学生办理体系一前后端环境建立
  • 修正App.vue,设置一级路由

Java项目学生办理体系一前后端环境建立
```vue
<template>
  <div id="app">
    <!-- 设置路由视图,用于显现指定的路由对应页面 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>
<style>
  /* 满屏填充款式 */
  html, body, #app {
    height: 100%;
  }
</style>
```
  • 修正Home.vue,用于显现布局页面

Java项目学生办理体系一前后端环境建立
```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 菜单

Java项目学生办理体系一前后端环境建立

Java项目学生办理体系一前后端环境建立

<!--菜单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 二级路由

  • 当时路由装备的子路由,称为二级路由。二级路由能够显现当时路由所设置的路由视图中。

    • 装备二级路由

Java项目学生办理体系一前后端环境建立
    ```js
    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')
      }
    ]
    ```
*   编写二级路由显现视图

Java项目学生办理体系一前后端环境建立

  • 创立对应页面

Java项目学生办理体系一前后端环境建立

经过本文,咱们介绍了怎么建立学生办理体系的前后端环境。前端环境运用Vue.js作为首要的前端结构,并经过Vue CLI工具创立和办理项目。后端环境运用Java言语,凭借Spring Boot和Spring Data JPA建立Web运用并与数据库进行交互。