Vue入门项目：学生管理系统之班级管理 【含源码】

4.5.2后端

4.5.3前端

4.5.4完善后端：级联删除

---

1.概述

====

• 学生管理系统

——班级管理：添加班级、修改班级、查询班级、删除班级

——学生管理：添加学生、修改学生、查询学生（含条件）、删除学生

2.表结构

=====

create database ssm_db3;

use ssm_db3;



-- 班级表

create table tb_class(

  `c_id` varchar(32) primary key comment '班级ID',

  `c_name` varchar(50) comment '班级名称',

  `desc` varchar(200) comment '班级描述'

);

insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','。。。。');

insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','。。。。');



# 学生表

create table tb_student(

  s_id varchar(32) primary key comment '学生ID',

  sname varchar(50) comment '姓名',

  age int comment '年龄',

  birthday datetime comment '生日',

  gender char(1) comment '性别',

  c_id varchar(32)

);

alter table tb_student add constraint foreign key (c_id) references tb_class (c_id);



insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s001','赵三',19,'2001-01-17','1','c001');

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s002','钱四',19,'2001-05-16','1','c001');

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s003','孙五',18,'2002-03-15','1','c001');

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s004','李三',19,'2001-04-14','0','c002');

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s005','周四',19,'2001-02-13','0','c002');

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s006','王五',18,'2002-06-12','1','c002');

3.搭建环境

======

3.1后端环境

---

3.1.1项目名：day21_student

3.1.2坐标

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>



    <groupId>com.czxy.ssm</groupId>

    <artifactId>day21_student</artifactId>

    <version>1.0-SNAPSHOT</version>



    <!-- 1 确定spring boot的版本-->

    <parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>2.2.5.RELEASE</version>

    </parent>



    <!--2  确定版本-->

    <properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <java.version>1.8</java.version>

        <spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version>

        <nacos.version>1.1.0</nacos.version>

        <alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version>

        <mybatis.starter.version>1.3.2</mybatis.starter.version>

        <mapper.starter.version>2.0.2</mapper.starter.version>

        <pageHelper.starter.version>1.2.5</pageHelper.starter.version>

        <mysql.version>5.1.32</mysql.version>

        <durid.starter.version>1.1.10</durid.starter.version>

        <mybatis.plus.version>3.4.0</mybatis.plus.version>

        <swagger.version>2.7.0</swagger.version>

        <jwt.jjwt.version>0.9.0</jwt.jjwt.version>

        <jwt.joda.version>2.9.7</jwt.joda.version>

        <beanutils.version>1.9.3</beanutils.version>

    </properties>



    <!-- 3 锁定版本-->

    <dependencyManagement>

        <dependencies>

            <!-- sprig cloud-->

            <dependency>

                <groupId>org.springframework.cloud</groupId>

                <artifactId>spring-cloud-dependencies</artifactId>

                <version>${spring-cloud-release.version}</version>

                <type>pom</type>

                <scope>import</scope>

            </dependency>

            <!--nacos -->

            <dependency>

                <groupId>com.alibaba.nacos</groupId>

                <artifactId>nacos-client</artifactId>

                <version>${nacos.version}</version>

            </dependency>



            <!--nacos cloud 发现 -->

            <dependency>

                <groupId>com.alibaba.cloud</groupId>

                <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>

                <version>${alibaba.cloud.version}</version>

            </dependency>



            <!--nacos cloud 配置 -->

            <dependency>

                <groupId>com.alibaba.cloud</groupId>

                <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>

                <version>${alibaba.cloud.version}</version>

            </dependency>



            <!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->

            <dependency>

                <groupId>com.alibaba.cloud</groupId>

                <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>

                <version>${alibaba.cloud.version}</version>

            </dependency>



            <!-- mybatis启动器 -->

            <dependency>

                <groupId>org.mybatis.spring.boot</groupId>

                <artifactId>mybatis-spring-boot-starter</artifactId>

                <version>${mybatis.starter.version}</version>

            </dependency>

            <!-- 通用Mapper启动器 -->

            <dependency>

                <groupId>tk.mybatis</groupId>

                <artifactId>mapper-spring-boot-starter</artifactId>

                <version>${mapper.starter.version}</version>

            </dependency>

            <!-- 分页助手启动器 -->

            <dependency>

                <groupId>com.github.pagehelper</groupId>

                <artifactId>pagehelper-spring-boot-starter</artifactId>

                <version>${pageHelper.starter.version}</version>

            </dependency>



            <!-- mybatis plus-->

            <dependency>

                <groupId>com.baomidou</groupId>

                <artifactId>mybatis-plus-boot-starter</artifactId>

                <version>${mybatis.plus.version}</version>

            </dependency>

            <dependency>

                <groupId>com.baomidou</groupId>

                <artifactId>mybatis-plus-annotation</artifactId>

                <version>${mybatis.plus.version}</version>

            </dependency>



            <!-- mysql驱动 -->

            <dependency>

                <groupId>mysql</groupId>

                <artifactId>mysql-connector-java</artifactId>

                <version>${mysql.version}</version>

            </dependency>



            <!-- Druid连接池 -->

            <dependency>

                <groupId>com.alibaba</groupId>

                <artifactId>druid-spring-boot-starter</artifactId>

                <version>${durid.starter.version}</version>

            </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>



            <!--jwt-->

            <!--JavaBean工具类，用于JavaBean数据封装-->

            <dependency>

                <groupId>commons-beanutils</groupId>

                <artifactId>commons-beanutils</artifactId>

                <version>${beanutils.version}</version>

            </dependency>



            <!--jwt工具-->

            <dependency>

                <groupId>io.jsonwebtoken</groupId>

                <artifactId>jjwt</artifactId>

                <version>${jwt.jjwt.version}</version>

            </dependency>



            <!--joda 时间工具类 -->

            <dependency>

                <groupId>joda-time</groupId>

                <artifactId>joda-time</artifactId>

                <version>${jwt.joda.version}</version>

            </dependency>



        </dependencies>



    </dependencyManagement>



    <dependencies>

        <!--web起步依赖-->

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

        <!-- mybatis启动器 -->

        <dependency>

            <groupId>org.mybatis.spring.boot</groupId>

            <artifactId>mybatis-spring-boot-starter</artifactId>

        </dependency>

        <!-- 通用Mapper启动器 -->

        <dependency>

            <groupId>tk.mybatis</groupId>

            <artifactId>mapper-spring-boot-starter</artifactId>

        </dependency>

        <!-- 分页助手启动器 -->

        <dependency>

            <groupId>com.github.pagehelper</groupId>

            <artifactId>pagehelper-spring-boot-starter</artifactId>

        </dependency>

        <!-- mysql驱动 -->

        <dependency>

            <groupId>mysql</groupId>

            <artifactId>mysql-connector-java</artifactId>

        </dependency>

        <!-- Druid连接池 -->

        <dependency>

            <groupId>com.alibaba</groupId>

            <artifactId>druid-spring-boot-starter</artifactId>

        </dependency>

        <!--swagger2-->

        <dependency>

            <groupId>io.springfox</groupId>

            <artifactId>springfox-swagger2</artifactId>

        </dependency>

        <dependency>

            <groupId>io.springfox</groupId>

            <artifactId>springfox-swagger-ui</artifactId>

        </dependency>

    </dependencies>





</project>

3.1.3核心配置文件

• application.properties

 #端口号

server.port=8080



#数据库基本配置

spring.datasource.driverClassName=com.mysql.jdbc.Driver

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm_db3?useUnicode=true&characterEncoding=utf8

spring.datasource.username=root

spring.datasource.password=1234



#druid 连接池配置

#驱动

#spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#初始化连接池大小

spring.datasource.druid.initial-size=1

#最小连接数

spring.datasource.druid.min-idle=1

#最大连接数

spring.datasource.druid.max-active=20

#获取连接时候验证，会影响性能

spring.datasource.druid.test-on-borrow=true



# mybatis

# mybatis.type-aliases-package=com.czxy.domain.base

# mybatis.mapper-locations=classpath:mappers/*.xml

#mapper

mapper.not-empty=false

mapper.identity=MYSQL

#开启驼峰映射

mybatis.configuration.map-underscore-to-camel-case=true

mybatis.mapper-locations=classpath*:mapper/*.xml

#开启log4j打印SQL语句

logging.level.com.czxy.dao=debug

3.1.4启动类

package com.czxy.ssm;



import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;





@SpringBootApplication

public class StudentApplication {

    public static void main(String[] args) {

        SpringApplication.run(StudentApplication.class, args);

    }

}

3.1.5封装类

package com.czxy.ssm.vo;



import java.util.HashMap;

import java.util.Map;





public class BaseResult<T> {



    //成功状态码

    public static final int OK = 1;

    //失败状态码

    public static final int ERROR = 0;



    //返回码

    private Integer code;

    //返回消息

    private String message;



    //存放数据

    private T data;

    //其他数据

    private Map<String,Object> other = new HashMap<>();



    public BaseResult() {



    }



    public BaseResult(Integer code, String message) {

        this.code = code;

        this.message = message;

    }

    public BaseResult(Integer code, String message, T data) {

        this.code = code;

        this.message = message;

        this.data = data;

    }



    /**

     * 快捷成功BaseResult对象

     * @param message

     * @return

     */

    public static BaseResult ok(String message){

        return new BaseResult(BaseResult.OK , message);

    }



    public static BaseResult ok(String message, Object data){

        return new BaseResult(BaseResult.OK , message, data );

    }



    /**

     * 快捷失败BaseResult对象

     * @param message

     * @return

     */

    public static BaseResult error(String message){

        return new BaseResult(BaseResult.ERROR , message);

    }



    /**

     * 自定义数据区域

     * @param key

     * @param msg

     * @return

     */

    public BaseResult append(String key , Object msg){

        other.put(key , msg);

        return this;

    }



    public Integer getCode() {

        return code;

    }



    public String getMessage() {

        return message;

    }



    public T getData() {

        return data;

    }



    public Map<String, Object> getOther() {

        return other;

    }

}

3.1.6配置类(可选)

package com.czxy.student.config;



import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import springfox.documentation.builders.ApiInfoBuilder;

import springfox.documentation.builders.PathSelectors;

import springfox.documentation.builders.RequestHandlerSelectors;

import springfox.documentation.service.*;

import springfox.documentation.spi.DocumentationType;

import springfox.documentation.spi.service.contexts.SecurityContext;

import springfox.documentation.spring.web.plugins.Docket;

import springfox.documentation.swagger2.annotations.EnableSwagger2;



import java.util.ArrayList;

import java.util.List;



/**

 * Swagger2 配置类，

 * 访问路径：swagger-ui.html

 * 自动注册：

 *     位置：resources/META-INF/spring.factories

 *     内容：

 *        org.springframework.boot.autoconfigure.EnableAutoConfiguration=\

 *          com.czxy.config.Swagger2Configuration

 */

@Configuration

@EnableSwagger2

public class Swagger2ConfigurationV3 {



    @Bean

    public Docket createRestApi() {

        // 1 确定文档Swagger版本

        Docket docket = new Docket(DocumentationType.SWAGGER_2);

        // 2 设置 api基本信息

        docket.apiInfo(apiInfo());

        // 3 设置自定义加载路径

        docket = docket.select()

                .apis(RequestHandlerSelectors.basePackage("com.czxy"))

                .paths(PathSelectors.any())

                .build();

        //4 设置权限

        docket.securitySchemes(securitySchemes());

        docket.securityContexts(securityContexts());



        return docket;

    }



    private ApiInfo apiInfo() {

        return new ApiInfoBuilder()

                .title("API")

                .description("基于swagger接口文档")

                .contact(new Contact("梁桐","http://www.javaliang.com","liangtong@itcast.cn"))

                .version("1.0")

                .build();

    }



    private List<ApiKey> securitySchemes() {

        List<ApiKey> list = new ArrayList<>();

        // name 为参数名  keyname是页面传值显示的 keyname， name在swagger鉴权中使用

        list.add(new ApiKey("Authorization", "Authorization", "header"));

        return list;

    }



    private List<SecurityContext> securityContexts() {

        List<SecurityContext> list = new ArrayList<>();

        list.add(SecurityContext.builder()

                .securityReferences(defaultAuth())

                .forPaths(PathSelectors.regex("^(?!auth).*$"))

                .build());

        return list;

    }



    private List<SecurityReference> defaultAuth() {

        AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything");

        AuthorizationScope[] authorizationScopes = new AuthorizationScope[1];

        authorizationScopes[0] = authorizationScope;

        List<SecurityReference> list = new ArrayList();

        list.add(new SecurityReference("Authorization", authorizationScopes));

        return list;

    }



}

3.2前端环境

---

3.2.1拷贝静态资源

3.2.2vs打开资源

4.班级管理

======

4.1JavaBean:Classes

---

package com.czxy.ssm.domain;



import javax.persistence.Column;

import javax.persistence.Id;

import javax.persistence.Table;





@Table(name = "tb_class")

public class Classes {

    /*

    CREATE TABLE tb_class(

      `c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',

      `c_name` VARCHAR(50) COMMENT '班级名称',

      `desc` VARCHAR(200) COMMENT '班级描述'

    );

     */



    @Id

    @Column(name = "c_id")

    private String cid;



    @Column(name = "c_name")

    private String cname;



    @Column(name = "`desc`")

    private String desc;



    public String getCid() {

        return cid;

    }



    public void setCid(String cid) {

        this.cid = cid;

    }



    public String getCname() {

        return cname;

    }



    public void setCname(String cname) {

        this.cname = cname;

    }



    public String getDesc() {

        return desc;

    }



    public void setDesc(String desc) {

        this.desc = desc;

    }



    public Classes() {

    }



    public Classes(String cid, String cname, String desc) {

        this.cid = cid;

        this.cname = cname;

        this.desc = desc;

    }



    @Override

    public String toString() {

        return "Classes{" +

                "cid='" + cid + '\'' +

                ", cname='" + cname + '\'' +

                ", desc='" + desc + '\'' +

                '}';

    }

}

4.2查询所有

---

4.2.1后端

• 编写Mapper

 package com.czxy.ssm.mapper;



import com.czxy.ssm.domain.Classes;

import tk.mybatis.mapper.common.Mapper;



@org.apache.ibatis.annotations.Mapper

public interface ClassesMapper extends Mapper<Classes> {

}

• 编写service

• 接口

 package com.czxy.ssm.service;



import com.czxy.ssm.domain.Classes;



import java.util.List;





public interface ClassesService {



    /**

     * 查询所有

     * @return

     */

    public List<Classes> selectAll() ;

}

-实现类

 package com.czxy.ssm.service.impl;



import com.czxy.ssm.domain.Classes;

import com.czxy.ssm.mapper.ClassesMapper;

import com.czxy.ssm.service.ClassesService;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;



import javax.annotation.Resource;

import java.util.List;



@Service

@Transactional

public class ClassesServiceImpl implements ClassesService {



    @Resource

    private ClassesMapper classesMapper;



    @Override

    public List<Classes> selectAll() {

        List<Classes> list = classesMapper.selectAll();

        return list;

    }

}

• 编写Controller

 package com.czxy.ssm.controller;



import com.czxy.ssm.domain.Classes;

import com.czxy.ssm.service.ClassesService;

import com.czxy.ssm.vo.BaseResult;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;



import javax.annotation.Resource;

import java.util.List;





@RestController

@RequestMapping("/classes")

public class ClassesController {



    @Resource

    private ClassesService classesService;



    @GetMapping

    public BaseResult<List<Classes>> list() {

        // 查询所有

        List<Classes> list = classesService.selectAll();

        // 返回

        /*

        BaseResult baseResult = new BaseResult();

        baseResult.setCode(1);  // 0 错误， 20000 成功

        baseResult.setMessage("提示信息");

        baseResult.setData(list);

        return baseResult;

        */

        return BaseResult.ok("查询成功", list);

    }



}

• 查询结果

4.2.2前端：axios+then

• 编写页面、发送ajax、显示数据

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="js/vue.js"></script>

    <script src="js/axios.js"></script>

</head>

<body>

    <div id="app">

        <table border="1">

            <tr>

                <td>编号</td>

                <td>名称</td>

                <td>描述</td>

            </tr>

            <tr v-for="(classes,index) in classesList">

                <td>{{classes.cid}}</td>

                <td>{{classes.cname}} </td>

                <td>{{classes.desc}}</td>

            </tr>

        </table>

    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            classesList: []

        },

        methods: {

            selectAllClasses() {

                // ajax 查询

                var url = 'http://localhost:8080/classes'

                axios.get(url)

                .then(res => {

                    

                    // 获得查询结果 BaseResult

                    var baseResult = res.data

                    // 判断

                    if(baseResult.code == 1) {

                        // 成功 -- 将结果存放到数据区域

                        this.classesList = baseResult.data

                    } else {

                        // 失败

                        alert(baseResult.message)

                    }

                })

                .catch(err => {

                    console.error(err); 

                })

            }

        },

        created() {   //mounted()

            // 查询所有

            this.selectAllClasses()

        },

    })

</script>

4.2.3前端：async+await

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>班级列表</title>

    <script src="../js/axios.js"></script>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <table border="1">

            <tr>

                <td>编号</td>

                <td>班级名称</td>

                <td>描述</td>

                <td>操作</td>

            </tr>

            <tr v-for="(classes,index) in classesList">

                <td>{{classes.cid}}</td>

                <td>{{classes.cname}}</td>

                <td>{{classes.desc}}</td>

                <td>

                    修改

                    删除

                </td>

            </tr>

        </table>

    </div>

</body>

</html>

<script>

    new Vue({

        el: '#app',

        data: {

            classesList: [],            //所有班级

        },

        methods: {

            async findAllClasses() {

                // response.data

                let { data: baseResult } = await axios.get(`http://localhost:8080/classes`)

                // 判断

                if(baseResult.code == 20000) {

                    this.classesList = baseResult.data

                }

            }

        },

        mounted() {


### 最后

推荐一些系统学习的途径和方法。  

![路线图](https://img-blog.csdnimg.cn/img_convert/abffda3a0cfe5b9baa70f132ab55f248.png)

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

HTML 和 CSS：

![html5知识](https://img-blog.csdnimg.cn/img_convert/2ee0d943c2e65e1bf84360c1c8a40cf6.png)

![css基础知识](https://img-blog.csdnimg.cn/img_convert/f660a2fef40322a6e2c45716d4a97e02.png)