devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-05-13 11:53:50

赞

踩

vue3学生管理系统源码

目录

1.概述

2.表结构

3.搭建环境

        3.1后端环境

                3.1.1项目名：student

                3.1.2坐标

                3.1.3核心配置文件

                3.1.4启动类

                3.1.5封装类

                3.1.6配置类(可选)

        3.2前端环境

                3.2.1拷贝静态资源

                3.2.2vs打开资源

4.班级管理

        4.1JavaBean:Class

        4.2查询所有

                4.2.1后端

                4.2.2前端：axios+then

                4.2.3前端：async+await

        4.3添加班级

                4.3.1需求：

                4.3.2后端

                4.3.3前端

        4.4修改班级

                4.4.1需求：

                4.4.2后端

                4.4.3前端

        4.5删除班级

                4.5.1分析

                4.5.2后端

                4.5.3前端

                4.5.4完善后端：级联删除

1.概述

  • 学生管理系统

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

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

2.表结构

  1. create database ssm_db3;
  2. use ssm_db3;
  3.  
  4. -- 班级表
  5. create table tb_class(
  6.   `c_id` varchar(32) primary key comment '班级ID',
  7.   `c_name` varchar(50) comment '班级名称',
  8.   `desc` varchar(200) comment '班级描述'
  9. );
  10. insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','。。。。');
  11. insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','。。。。');
  12.  
  13. # 学生表
  14. create table tb_student(
  15.   s_id varchar(32) primary key comment '学生ID',
  16.   sname varchar(50) comment '姓名',
  17.   age int comment '年龄',
  18.   birthday datetime comment '生日',
  19.   gender char(1) comment '性别',
  20.   c_id varchar(32)
  21. );
  22. alter table tb_student add constraint foreign key (c_id) references tb_class (c_id);
  23.  
  24. insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s001','赵三',19,'2001-01-17','1','c001');
  25. insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s002','钱四',19,'2001-05-16','1','c001');
  26. insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s003','孙五',18,'2002-03-15','1','c001');
  27. insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s004','李三',19,'2001-04-14','0','c002');
  28. insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s005','周四',19,'2001-02-13','0','c002');
  29. 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坐标

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <modelVersion>4.0.0</modelVersion>
  6.  
  7.     <groupId>com.czxy.ssm</groupId>
  8.     <artifactId>day21_student</artifactId>
  9.     <version>1.0-SNAPSHOT</version>
  10.  
  11.     <!-- 1 确定spring boot的版本-->
  12.     <parent>
  13.         <groupId>org.springframework.boot</groupId>
  14.         <artifactId>spring-boot-starter-parent</artifactId>
  15.         <version>2.2.5.RELEASE</version>
  16.     </parent>
  17.  
  18.     <!--2  确定版本-->
  19.     <properties>
  20.         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  21.         <java.version>1.8</java.version>
  22.         <spring-cloud-release.version>Hoxton.SR3</spring-cloud-release.version>
  23.         <nacos.version>1.1.0</nacos.version>
  24.         <alibaba.cloud.version>2.2.1.RELEASE</alibaba.cloud.version>
  25.         <mybatis.starter.version>1.3.2</mybatis.starter.version>
  26.         <mapper.starter.version>2.0.2</mapper.starter.version>
  27.         <pageHelper.starter.version>1.2.5</pageHelper.starter.version>
  28.         <mysql.version>5.1.32</mysql.version>
  29.         <durid.starter.version>1.1.10</durid.starter.version>
  30.         <mybatis.plus.version>3.4.0</mybatis.plus.version>
  31.         <swagger.version>2.7.0</swagger.version>
  32.         <jwt.jjwt.version>0.9.0</jwt.jjwt.version>
  33.         <jwt.joda.version>2.9.7</jwt.joda.version>
  34.         <beanutils.version>1.9.3</beanutils.version>
  35.     </properties>
  36.  
  37.     <!-- 3 锁定版本-->
  38.     <dependencyManagement>
  39.         <dependencies>
  40.             <!-- sprig cloud-->
  41.             <dependency>
  42.                 <groupId>org.springframework.cloud</groupId>
  43.                 <artifactId>spring-cloud-dependencies</artifactId>
  44.                 <version>${spring-cloud-release.version}</version>
  45.                 <type>pom</type>
  46.                 <scope>import</scope>
  47.             </dependency>
  48.             <!--nacos -->
  49.             <dependency>
  50.                 <groupId>com.alibaba.nacos</groupId>
  51.                 <artifactId>nacos-client</artifactId>
  52.                 <version>${nacos.version}</version>
  53.             </dependency>
  54.  
  55.             <!--nacos cloud 发现 -->
  56.             <dependency>
  57.                 <groupId>com.alibaba.cloud</groupId>
  58.                 <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
  59.                 <version>${alibaba.cloud.version}</version>
  60.             </dependency>
  61.  
  62.             <!--nacos cloud 配置 -->
  63.             <dependency>
  64.                 <groupId>com.alibaba.cloud</groupId>
  65.                 <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
  66.                 <version>${alibaba.cloud.version}</version>
  67.             </dependency>
  68.  
  69.             <!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->
  70.             <dependency>
  71.                 <groupId>com.alibaba.cloud</groupId>
  72.                 <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>
  73.                 <version>${alibaba.cloud.version}</version>
  74.             </dependency>
  75.  
  76.             <!-- mybatis启动器 -->
  77.             <dependency>
  78.                 <groupId>org.mybatis.spring.boot</groupId>
  79.                 <artifactId>mybatis-spring-boot-starter</artifactId>
  80.                 <version>${mybatis.starter.version}</version>
  81.             </dependency>
  82.             <!-- 通用Mapper启动器 -->
  83.             <dependency>
  84.                 <groupId>tk.mybatis</groupId>
  85.                 <artifactId>mapper-spring-boot-starter</artifactId>
  86.                 <version>${mapper.starter.version}</version>
  87.             </dependency>
  88.             <!-- 分页助手启动器 -->
  89.             <dependency>
  90.                 <groupId>com.github.pagehelper</groupId>
  91.                 <artifactId>pagehelper-spring-boot-starter</artifactId>
  92.                 <version>${pageHelper.starter.version}</version>
  93.             </dependency>
  94.  
  95.             <!-- mybatis plus-->
  96.             <dependency>
  97.                 <groupId>com.baomidou</groupId>
  98.                 <artifactId>mybatis-plus-boot-starter</artifactId>
  99.                 <version>${mybatis.plus.version}</version>
  100.             </dependency>
  101.             <dependency>
  102.                 <groupId>com.baomidou</groupId>
  103.                 <artifactId>mybatis-plus-annotation</artifactId>
  104.                 <version>${mybatis.plus.version}</version>
  105.             </dependency>
  106.  
  107.             <!-- mysql驱动 -->
  108.             <dependency>
  109.                 <groupId>mysql</groupId>
  110.                 <artifactId>mysql-connector-java</artifactId>
  111.                 <version>${mysql.version}</version>
  112.             </dependency>
  113.  
  114.             <!-- Druid连接池 -->
  115.             <dependency>
  116.                 <groupId>com.alibaba</groupId>
  117.                 <artifactId>druid-spring-boot-starter</artifactId>
  118.                 <version>${durid.starter.version}</version>
  119.             </dependency>
  120.  
  121.             <!--swagger2-->
  122.             <dependency>
  123.                 <groupId>io.springfox</groupId>
  124.                 <artifactId>springfox-swagger2</artifactId>
  125.                 <version>${swagger.version}</version>
  126.             </dependency>
  127.             <dependency>
  128.                 <groupId>io.springfox</groupId>
  129.                 <artifactId>springfox-swagger-ui</artifactId>
  130.                 <version>${swagger.version}</version>
  131.             </dependency>
  132.  
  133.             <!--jwt-->
  134.             <!--JavaBean工具类，用于JavaBean数据封装-->
  135.             <dependency>
  136.                 <groupId>commons-beanutils</groupId>
  137.                 <artifactId>commons-beanutils</artifactId>
  138.                 <version>${beanutils.version}</version>
  139.             </dependency>
  140.  
  141.             <!--jwt工具-->
  142.             <dependency>
  143.                 <groupId>io.jsonwebtoken</groupId>
  144.                 <artifactId>jjwt</artifactId>
  145.                 <version>${jwt.jjwt.version}</version>
  146.             </dependency>
  147.  
  148.             <!--joda 时间工具类 -->
  149.             <dependency>
  150.                 <groupId>joda-time</groupId>
  151.                 <artifactId>joda-time</artifactId>
  152.                 <version>${jwt.joda.version}</version>
  153.             </dependency>
  154.  
  155.         </dependencies>
  156.  
  157.     </dependencyManagement>
  158.  
  159.     <dependencies>
  160.         <!--web起步依赖-->
  161.         <dependency>
  162.             <groupId>org.springframework.boot</groupId>
  163.             <artifactId>spring-boot-starter-web</artifactId>
  164.         </dependency>
  165.         <!-- mybatis启动器 -->
  166.         <dependency>
  167.             <groupId>org.mybatis.spring.boot</groupId>
  168.             <artifactId>mybatis-spring-boot-starter</artifactId>
  169.         </dependency>
  170.         <!-- 通用Mapper启动器 -->
  171.         <dependency>
  172.             <groupId>tk.mybatis</groupId>
  173.             <artifactId>mapper-spring-boot-starter</artifactId>
  174.         </dependency>
  175.         <!-- 分页助手启动器 -->
  176.         <dependency>
  177.             <groupId>com.github.pagehelper</groupId>
  178.             <artifactId>pagehelper-spring-boot-starter</artifactId>
  179.         </dependency>
  180.         <!-- mysql驱动 -->
  181.         <dependency>
  182.             <groupId>mysql</groupId>
  183.             <artifactId>mysql-connector-java</artifactId>
  184.         </dependency>
  185.         <!-- Druid连接池 -->
  186.         <dependency>
  187.             <groupId>com.alibaba</groupId>
  188.             <artifactId>druid-spring-boot-starter</artifactId>
  189.         </dependency>
  190.         <!--swagger2-->
  191.         <dependency>
  192.             <groupId>io.springfox</groupId>
  193.             <artifactId>springfox-swagger2</artifactId>
  194.         </dependency>
  195.         <dependency>
  196.             <groupId>io.springfox</groupId>
  197.             <artifactId>springfox-swagger-ui</artifactId>
  198.         </dependency>
  199.     </dependencies>
  200.  
  201.  
  202. </project>

                3.1.3核心配置文件

  • application.properties

  1.  #端口号
  2. server.port=8080
  3.  
  4. #数据库基本配置
  5. spring.datasource.driverClassName=com.mysql.jdbc.Driver
  6. spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm_db3?useUnicode=true&characterEncoding=utf8
  7. spring.datasource.username=root
  8. spring.datasource.password=1234
  9.  
  10. #druid 连接池配置
  11. #驱动
  12. #spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  13. #初始化连接池大小
  14. spring.datasource.druid.initial-size=1
  15. #最小连接数
  16. spring.datasource.druid.min-idle=1
  17. #最大连接数
  18. spring.datasource.druid.max-active=20
  19. #获取连接时候验证，会影响性能
  20. spring.datasource.druid.test-on-borrow=true
  21.  
  22. # mybatis
  23. # mybatis.type-aliases-package=com.czxy.domain.base
  24. # mybatis.mapper-locations=classpath:mappers/*.xml
  25. #mapper
  26. mapper.not-empty=false
  27. mapper.identity=MYSQL
  28. #开启驼峰映射
  29. mybatis.configuration.map-underscore-to-camel-case=true
  30. mybatis.mapper-locations=classpath*:mapper/*.xml
  31. #开启log4j打印SQL语句
  32. logging.level.com.czxy.dao=debug

                3.1.4启动类

  1. package com.czxy.ssm;
  2.  
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5.  
  6.  
  7. @SpringBootApplication
  8. public class StudentApplication {
  9.     public static void main(String[] args) {
  10.         SpringApplication.run(StudentApplication.class, args);
  11.     }
  12. }

                3.1.5封装类

  1. package com.czxy.ssm.vo;
  2.  
  3. import java.util.HashMap;
  4. import java.util.Map;
  5.  
  6.  
  7. public class BaseResult<T> {
  8.  
  9.     //成功状态码
  10.     public static final int OK = 1;
  11.     //失败状态码
  12.     public static final int ERROR = 0;
  13.  
  14.     //返回码
  15.     private Integer code;
  16.     //返回消息
  17.     private String message;
  18.  
  19.     //存放数据
  20.     private T data;
  21.     //其他数据
  22.     private Map<String,Object> other = new HashMap<>();
  23.  
  24.     public BaseResult() {
  25.  
  26.     }
  27.  
  28.     public BaseResult(Integer code, String message) {
  29.         this.code = code;
  30.         this.message = message;
  31.     }
  32.     public BaseResult(Integer code, String message, T data) {
  33.         this.code = code;
  34.         this.message = message;
  35.         this.data = data;
  36.     }
  37.  
  38.     /**
  39.      * 快捷成功BaseResult对象
  40.      * @param message
  41.      * @return
  42.      */
  43.     public static BaseResult ok(String message){
  44.         return new BaseResult(BaseResult.OK , message);
  45.     }
  46.  
  47.     public static BaseResult ok(String message, Object data){
  48.         return new BaseResult(BaseResult.OK , message, data );
  49.     }
  50.  
  51.     /**
  52.      * 快捷失败BaseResult对象
  53.      * @param message
  54.      * @return
  55.      */
  56.     public static BaseResult error(String message){
  57.         return new BaseResult(BaseResult.ERROR , message);
  58.     }
  59.  
  60.     /**
  61.      * 自定义数据区域
  62.      * @param key
  63.      * @param msg
  64.      * @return
  65.      */
  66.     public BaseResult append(String key , Object msg){
  67.         other.put(key , msg);
  68.         return this;
  69.     }
  70.  
  71.     public Integer getCode() {
  72.         return code;
  73.     }
  74.  
  75.     public String getMessage() {
  76.         return message;
  77.     }
  78.  
  79.     public T getData() {
  80.         return data;
  81.     }
  82.  
  83.     public Map<String, Object> getOther() {
  84.         return other;
  85.     }
  86. }

                3.1.6配置类(可选)

  1. package com.czxy.student.config;
  2.  
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import springfox.documentation.builders.ApiInfoBuilder;
  6. import springfox.documentation.builders.PathSelectors;
  7. import springfox.documentation.builders.RequestHandlerSelectors;
  8. import springfox.documentation.service.*;
  9. import springfox.documentation.spi.DocumentationType;
  10. import springfox.documentation.spi.service.contexts.SecurityContext;
  11. import springfox.documentation.spring.web.plugins.Docket;
  12. import springfox.documentation.swagger2.annotations.EnableSwagger2;
  13.  
  14. import java.util.ArrayList;
  15. import java.util.List;
  16.  
  17. /**
  18.  * Swagger2 配置类，
  19.  * 访问路径：swagger-ui.html
  20.  * 自动注册：
  21.  *     位置：resources/META-INF/spring.factories
  22.  *     内容：
  23.  *        org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
  24.  *          com.czxy.config.Swagger2Configuration
  25.  */
  26. @Configuration
  27. @EnableSwagger2
  28. public class Swagger2ConfigurationV3 {
  29.  
  30.     @Bean
  31.     public Docket createRestApi() {
  32.         // 1 确定文档Swagger版本
  33.         Docket docket = new Docket(DocumentationType.SWAGGER_2);
  34.         // 2 设置 api基本信息
  35.         docket.apiInfo(apiInfo());
  36.         // 3 设置自定义加载路径
  37.         docket = docket.select()
  38.                 .apis(RequestHandlerSelectors.basePackage("com.czxy"))
  39.                 .paths(PathSelectors.any())
  40.                 .build();
  41.         //4 设置权限
  42.         docket.securitySchemes(securitySchemes());
  43.         docket.securityContexts(securityContexts());
  44.  
  45.         return docket;
  46.     }
  47.  
  48.     private ApiInfo apiInfo() {
  49.         return new ApiInfoBuilder()
  50.                 .title("API")
  51.                 .description("基于swagger接口文档")
  52.                 .contact(new Contact("梁桐","http://www.javaliang.com","liangtong@itcast.cn"))
  53.                 .version("1.0")
  54.                 .build();
  55.     }
  56.  
  57.     private List<ApiKey> securitySchemes() {
  58.         List<ApiKey> list = new ArrayList<>();
  59.         // name 为参数名  keyname是页面传值显示的 keyname， name在swagger鉴权中使用
  60.         list.add(new ApiKey("Authorization", "Authorization", "header"));
  61.         return list;
  62.     }
  63.  
  64.     private List<SecurityContext> securityContexts() {
  65.         List<SecurityContext> list = new ArrayList<>();
  66.         list.add(SecurityContext.builder()
  67.                 .securityReferences(defaultAuth())
  68.                 .forPaths(PathSelectors.regex("^(?!auth).*$"))
  69.                 .build());
  70.         return list;
  71.     }
  72.  
  73.     private List<SecurityReference> defaultAuth() {
  74.         AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything");
  75.         AuthorizationScope[] authorizationScopes = new AuthorizationScope[1];
  76.         authorizationScopes[0] = authorizationScope;
  77.         List<SecurityReference> list = new ArrayList();
  78.         list.add(new SecurityReference("Authorization", authorizationScopes));
  79.         return list;
  80.     }
  81.  
  82. }

        3.2前端环境

                3.2.1拷贝静态资源

      

                3.2.2vs打开资源

4.班级管理

        4.1JavaBean:Classes

  1. package com.czxy.ssm.domain;
  2.  
  3. import javax.persistence.Column;
  4. import javax.persistence.Id;
  5. import javax.persistence.Table;
  6.  
  7.  
  8. @Table(name = "tb_class")
  9. public class Classes {
  10.     /*
  11.     CREATE TABLE tb_class(
  12.       `c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',
  13.       `c_name` VARCHAR(50) COMMENT '班级名称',
  14.       `desc` VARCHAR(200) COMMENT '班级描述'
  15.     );
  16.      */
  17.  
  18.     @Id
  19.     @Column(name = "c_id")
  20.     private String cid;
  21.  
  22.     @Column(name = "c_name")
  23.     private String cname;
  24.  
  25.     @Column(name = "`desc`")
  26.     private String desc;
  27.  
  28.     public String getCid() {
  29.         return cid;
  30.     }
  31.  
  32.     public void setCid(String cid) {
  33.         this.cid = cid;
  34.     }
  35.  
  36.     public String getCname() {
  37.         return cname;
  38.     }
  39.  
  40.     public void setCname(String cname) {
  41.         this.cname = cname;
  42.     }
  43.  
  44.     public String getDesc() {
  45.         return desc;
  46.     }
  47.  
  48.     public void setDesc(String desc) {
  49.         this.desc = desc;
  50.     }
  51.  
  52.     public Classes() {
  53.     }
  54.  
  55.     public Classes(String cid, String cname, String desc) {
  56.         this.cid = cid;
  57.         this.cname = cname;
  58.         this.desc = desc;
  59.     }
  60.  
  61.     @Override
  62.     public String toString() {
  63.         return "Classes{" +
  64.                 "cid='" + cid + '\'' +
  65.                 ", cname='" + cname + '\'' +
  66.                 ", desc='" + desc + '\'' +
  67.                 '}';
  68.     }
  69. }

        4.2查询所有

                4.2.1后端

  • 编写Mapper
  1.  package com.czxy.ssm.mapper;
  2.  
  3. import com.czxy.ssm.domain.Classes;
  4. import tk.mybatis.mapper.common.Mapper;
  5.  
  6. @org.apache.ibatis.annotations.Mapper
  7. public interface ClassesMapper extends Mapper<Classes> {
  8. }
  • 编写service
  • 接口
  1.  package com.czxy.ssm.service;
  2.  
  3. import com.czxy.ssm.domain.Classes;
  4.  
  5. import java.util.List;
  6.  
  7.  
  8. public interface ClassesService {
  9.  
  10.     /**
  11.      * 查询所有
  12.      * @return
  13.      */
  14.     public List<Classes> selectAll() ;
  15. }

        -实现类

  1.  package com.czxy.ssm.service.impl;
  2.  
  3. import com.czxy.ssm.domain.Classes;
  4. import com.czxy.ssm.mapper.ClassesMapper;
  5. import com.czxy.ssm.service.ClassesService;
  6. import org.springframework.stereotype.Service;
  7. import org.springframework.transaction.annotation.Transactional;
  8.  
  9. import javax.annotation.Resource;
  10. import java.util.List;
  11.  
  12. @Service
  13. @Transactional
  14. public class ClassesServiceImpl implements ClassesService {
  15.  
  16.     @Resource
  17.     private ClassesMapper classesMapper;
  18.  
  19.     @Override
  20.     public List<Classes> selectAll() {
  21.         List<Classes> list = classesMapper.selectAll();
  22.         return list;
  23.     }
  24. }

  •  编写Controller

  1.  package com.czxy.ssm.controller;
  2.  
  3. import com.czxy.ssm.domain.Classes;
  4. import com.czxy.ssm.service.ClassesService;
  5. import com.czxy.ssm.vo.BaseResult;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RestController;
  9.  
  10. import javax.annotation.Resource;
  11. import java.util.List;
  12.  
  13.  
  14. @RestController
  15. @RequestMapping("/classes")
  16. public class ClassesController {
  17.  
  18.     @Resource
  19.     private ClassesService classesService;
  20.  
  21.     @GetMapping
  22.     public BaseResult<List<Classes>> list() {
  23.         // 查询所有
  24.         List<Classes> list = classesService.selectAll();
  25.         // 返回
  26.         /*
  27.         BaseResult baseResult = new BaseResult();
  28.         baseResult.setCode(1);  // 0 错误， 20000 成功
  29.         baseResult.setMessage("提示信息");
  30.         baseResult.setData(list);
  31.         return baseResult;
  32.         */
  33.         return BaseResult.ok("查询成功", list);
  34.     }
  35.  
  36. }
  • 查询结果

                4.2.2前端：axios+then

  • 编写页面、发送ajax、显示数据
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.     <title>Document</title>
  7.     <script src="js/vue.js"></script>
  8.     <script src="js/axios.js"></script>
  9. </head>
  10. <body>
  11.     <div id="app">
  12.         <table border="1">
  13.             <tr>
  14.                 <td>编号</td>
  15.                 <td>名称</td>
  16.                 <td>描述</td>
  17.             </tr>
  18.             <tr v-for="(classes,index) in classesList">
  19.                 <td>{{classes.cid}}</td>
  20.                 <td>{{classes.cname}} </td>
  21.                 <td>{{classes.desc}}</td>
  22.             </tr>
  23.         </table>
  24.     </div>
  25. </body>
  26. </html>
  27. <script>
  28.     new Vue({
  29.         el: '#app',
  30.         data: {
  31.             classesList: []
  32.         },
  33.         methods: {
  34.             selectAllClasses() {
  35.                 // ajax 查询
  36.                 var url = 'http://localhost:8080/classes'
  37.                 axios.get(url)
  38.                 .then(res => {
  39.                     
  40.                     // 获得查询结果 BaseResult
  41.                     var baseResult = res.data
  42.                     // 判断
  43.                     if(baseResult.code == 1) {
  44.                         // 成功 -- 将结果存放到数据区域
  45.                         this.classesList = baseResult.data
  46.                     } else {
  47.                         // 失败
  48.                         alert(baseResult.message)
  49.                     }
  50.                 })
  51.                 .catch(err => {
  52.                     console.error(err); 
  53.                 })
  54.             }
  55.         },
  56.         created() {   //mounted()
  57.             // 查询所有
  58.             this.selectAllClasses()
  59.         },
  60.     })
  61. </script>

                4.2.3前端：async+await

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>班级列表</title>
  6.     <script src="../js/axios.js"></script>
  7.     <script src="../js/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <table border="1">
  12.             <tr>
  13.                 <td>编号</td>
  14.                 <td>班级名称</td>
  15.                 <td>描述</td>
  16.                 <td>操作</td>
  17.             </tr>
  18.             <tr v-for="(classes,index) in classesList">
  19.                 <td>{{classes.cid}}</td>
  20.                 <td>{{classes.cname}}</td>
  21.                 <td>{{classes.desc}}</td>
  22.                 <td>
  23.                     修改
  24.                     删除
  25.                 </td>
  26.             </tr>
  27.         </table>
  28.     </div>
  29. </body>
  30. </html>
  31. <script>
  32.     new Vue({
  33.         el: '#app',
  34.         data: {
  35.             classesList: [],            //所有班级
  36.         },
  37.         methods: {
  38.             async findAllClasses() {
  39.                 // response.data
  40.                 let { data: baseResult } = await axios.get(`http://localhost:8080/classes`)
  41.                 // 判断
  42.                 if(baseResult.code == 20000) {
  43.                     this.classesList = baseResult.data
  44.                 }
  45.             }
  46.         },
  47.         mounted() {
  48.             // 查询所有班级
  49.             this.findAllClasses()
  50.         }
  51.     })
  52. </script>

        4.3添加班级

                4.3.1需求：

  • 完成班级的添加
  • 后端
    • 获得提交的班级数据（json数据）
    • 保存班级数据（controller-service）
    • 根据操作结果提示：成功true-->添加成功，失败false-->添加失败
  • 前端
    • 绘制表单，数据绑定
    • 点击添加，发送ajax完成添加
    • 成功，跳转到列表页面。失败，给出提示

                4.3.2后端

  • 步骤1：编写service，完成添加
  • 接口
  1.  /**
  2.      * 添加班级
  3.      * @param classes
  4.      * @return
  5.      */
  6.     public boolean add(Classes classes);
  • 实现类
  1.     @Override
  2.     public boolean add(Classes classes) {
  3.         int result = classesMapper.insert(classes);
  4.         return result == 1;
  5.     }
  • 步骤2：编写controller，处理结果BaseResult
  1.  /**
  2.      * 添加班级
  3.      * @param classes
  4.      * @return
  5.      */
  6.     @PostMapping
  7.     public BaseResult add(@RequestBody Classes classes) {
  8.         // 添加
  9.         boolean result =classesService.add(classes);
  10.         // 提示
  11.         if(result) {
  12.             // 成功
  13.             return BaseResult.ok("添加成功");
  14.         }
  15.         // 失败
  16.         return BaseResult.error("添加失败");
  17.     }

              4.3.3前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>班级列表</title>
  6.     <script src="../js/axios.js"></script>
  7.     <script src="../js/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <table>
  12.             <tr>
  13.                 <td>编号</td>
  14.                 <td>
  15.                     <input type="text" v-model="classes.cid" />
  16.                 </td>
  17.             </tr>
  18.             <tr>
  19.                 <td>班级名称</td>
  20.                 <td>
  21.                     <input type="text" v-model="classes.cname" />
  22.                 </td>
  23.             </tr>
  24.             <tr>
  25.                 <td>班级描述</td>
  26.                 <td>
  27.                     <textarea cols="30" rows="10" v-model="classes.desc"></textarea>
  28.                 </td>
  29.             </tr>
  30.             <tr>
  31.                 <td>
  32.                     <input type="button" value="添加" @click="addClasses" />
  33.                 </td>
  34.                 <td></td>
  35.             </tr>
  36.         </table>
  37.     </div>
  38. </body>
  39. </html>
  40. <script>
  41.     new Vue({
  42.         el: '#app',
  43.         data: {
  44.             classes: {
  45.  
  46.             }
  47.         },
  48.         methods: {
  49.             async addClasses() {
  50.                 let { data: baseResult } = await axios.post(`http://localhost:8080/classes`, this.classes)
  51.                 // 提示
  52.                 if(baseResult.code == 20000) {
  53.                     //成功
  54.                     location.href = '/classes/list.html'
  55.                 } else {
  56.                     //失败
  57.                     alert(baseResult.message)
  58.                 }
  59.             }
  60.         },
  61.         mounted() {
  62.  
  63.         }
  64.     })
  65. </script>

        4.4修改班级

                4.4.1需求：

  • 完成班级的修改
    • 表单的回显：通过id查询详情
    • 修改功能：通过id更新

                4.4.2后端

  • 步骤
    • 编写service：selectById、update
      • 接口
      • 实现类
    • 编写controller：selectById、update
  • 编写service：selectById、update
  • 接口
  1.  /**
  2.      * 通过id查询详情
  3.      * @param cid
  4.      * @return
  5.      */
  6.     public Classes selectById(String cid);
  7.  
  8.     /**
  9.      * 更新班级
  10.      * @param classes
  11.      * @return
  12.      */
  13.     public boolean update(Classes classes);

  • 实现类

  1.  @Override
  2.     public Classes selectById(String cid) {
  3.         return classesMapper.selectByPrimaryKey(cid);
  4.     }
  5.  
  6.     @Override
  7.     public boolean update(Classes classes) {
  8.         int result = classesMapper.updateByPrimaryKeySelective(classes);
  9.         return result == 1;
  10.     }
  • 编写controller：selectById、update
  1.  /**
  2.      * 查询详情
  3.      * @param cid
  4.      * @return
  5.      */
  6.     @GetMapping("/{cid}")
  7.     public BaseResult<Classes> selectById(@PathVariable("cid") String cid) {
  8.         //查询
  9.         Classes classes = classesService.selectById(cid);
  10.  
  11.         //返回
  12.         return BaseResult.ok("查询详情成功", classes);
  13.     }
  14.  
  15.     /**
  16.      * 更新
  17.      * @param classes
  18.      * @return
  19.      */
  20.     @PutMapping
  21.     public BaseResult update(@RequestBody Classes classes) {
  22.         try {
  23.             // 更新
  24.             boolean result = classesService.update(classes);
  25.  
  26.             // 提示
  27.             if(result) {
  28.                 return BaseResult.ok("更新成功");
  29.             }
  30.             return BaseResult.error("更新失败");
  31.         } catch (Exception e) {
  32.             e.printStackTrace();
  33.             return BaseResult.error(e.getMessage());
  34.         }
  35.     }

              4.4.3前端

  • 步骤：
    • 列表页面点击“修改”，添加到修改页面 edit.html?cid=c001
    • 页面加载成功时，通过id查询详情
    • 回显：将查询结果绑定表单（添加已经完成，采用复制）
    • 点击确定进行更新
  • 修改list.html页面

  <a :href="'/cls/edit.html?cid=' + classes.cid">修改</a>
  • 编写edit.html页面        
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>班级列表</title>
  6.     <script src="../js/axios.js"></script>
  7.     <script src="../js/vue.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         <!--3 表单回显 -->
  12.         <table>
  13.             <tr>
  14.                 <td>编号</td>
  15.                 <td>
  16.                     {{classes.cid}}
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td>班级名称</td>
  21.                 <td>
  22.                     <input type="text" v-model="classes.cname" />
  23.                 </td>
  24.             </tr>
  25.             <tr>
  26.                 <td>班级描述</td>
  27.                 <td>
  28.                     <textarea cols="30" rows="10" v-model="classes.desc"></textarea>
  29.                 </td>
  30.             </tr>
  31.             <tr>
  32.                 <td>
  33.                     <!--4 更新 -->
  34.                     <input type="button" value="修改" @click="updateClasses" />
  35.                 </td>
  36.                 <td></td>
  37.             </tr>
  38.         </table>
  39.     </div>
  40. </body>
  41. </html>
  42. <script>
  43.     new Vue({
  44.         el: '#app',
  45.         data: {
  46.             classes: {
  47.             },
  48.             classesId: ''
  49.         },
  50.         methods: {
  51.             async selectClassesById() {  //2 查询详情
  52.                 let { data: baseResult } = await axios.get(`http://localhost:8080/classes/${this.classesId}`)
  53.                 // 将查询结果存放classes对象，将自动回显
  54.                 if( baseResult.code == 20000) {
  55.                     this.classes = baseResult.data
  56.                 }
  57.             },
  58.             async updateClasses() {   // 4 更新函数
  59.                 let { data: baseResult } = await axios.put(`http://localhost:8080/classes`, this.classes)
  60.                 // 提示
  61.                 if(baseResult.code == 20000) {
  62.                     //成功
  63.                     location.href = '/cls/list.html'
  64.                 } else {
  65.                     //失败
  66.                     alert(baseResult.message)
  67.                 }
  68.             }
  69.         },
  70.         mounted() {
  71.             // 2.1 获得id
  72.             let arr = location.href.split("?cid=")
  73.             this.classesId = arr[1]
  74.  
  75.             // 2.2 查询详情
  76.             this.selectClassesById()
  77.         }
  78.     })
  79. </script>

        4.5删除班级

                4.5.1分析

  • 需求：通过id删除班级
  • 思路：
    • 确定访问路径：delete /classes/c001
    • 点击发送ajax进行删除（成功：刷新页面；失败：提示）
    • 编写controller获得id
    • 编写service通过id删除

                4.5.2后端

  • 步骤：
    • 编写controller获得id
    • 编写service通过id删除
  • 编写controller获得id
  1.      @DeleteMapping("/{classesId}")
  2.     public BaseResult delete(@PathVariable("classesId") String classesId) {
  3.         // 删除
  4.         boolean result = classesService.deleteById(classesId);
  5.  
  6.         // 处理
  7.         // 提示
  8.         if(result) {
  9.             return BaseResult.ok("删除成功");
  10.         }
  11.         return BaseResult.error("删除失败");
  12.  
  13.     }
  • 编写service通过id删除
    • 接口
  1.   /**
  2.      * 通过id删除
  3.      * @param classesId
  4.      * @return
  5.      */
  6.     boolean deleteById(String classesId);
  7.  
  8. –实现类
  9.      @Override
  10.     public boolean deleteById(String classesId) {
  11.         int result = classesMapper.deleteByPrimaryKey(classesId);
  12.         return result == 1 ;
  13.     }

                4.5.3前端

  • 需求：点击发送删除ajax
  1. <a href="" @click.prevent="deleteClasses(classes.cid)">删除</a>
  2.             async deleteClasses( cid ) {
  3.                 // 询问
  4.                 if(!confirm("您确定要删除么？")) {
  5.                     return
  6.                 }
  7.                 let { data: baseResult } = await axios.delete(`http://localhost:8080/classes/${cid}`)
  8.                 if(baseResult.code == 20000) {
  9.                     // 成功
  10.                     this.findAllClasses()
  11.                 } else {
  12.                     // 失败
  13.                     alert(baseResult.message)
  14.                 }
  15.             }

                4.5.4完善后端：级联删除

  • 级联删除：删除班级前，先删除所关联的学生。
  • 需求：完善班级删除的service，先删除指定班级的所有学生。
  • 步骤：
    • 编写JavaBen：Student
    • 编写Mapper：StudentMapper
    • 修改班级的service
    • 编写JavaBen：Student
  1.  package com.czxy.student.domain;
  2.  
  3. import lombok.Data;
  4.  
  5. import javax.persistence.Column;
  6. import javax.persistence.Id;
  7. import javax.persistence.Table;
  8. import java.util.Date;
  9.  
  10. @Table(name = "tb_student")
  11. @Data
  12. public class Student {
  13.     @Id
  14.     @Column(name = "s_id")
  15.     private String sid;
  16.  
  17.     private String sname;
  18.     private Integer age;
  19.     private Date birthday;
  20.  
  21.     @Column(name = "c_id")
  22.     private String cid;
  23. }
  24.  
  25. /*
  27. Create Table
  29. CREATE TABLE `tb_student` (
  30.   `s_id` varchar(32) NOT NULL COMMENT '学生ID',
  31.   `sname` varchar(50) DEFAULT NULL COMMENT '姓名',
  32.   `age` int(11) DEFAULT NULL COMMENT '年龄',
  33.   `birthday` datetime DEFAULT NULL COMMENT '生日',
  34.   `gender` char(1) DEFAULT NULL COMMENT '性别',
  35.   `c_id` varchar(32) DEFAULT NULL,
  36.   PRIMARY KEY (`s_id`),
  37.   KEY `c_id` (`c_id`),
  38.   CONSTRAINT `tb_student_ibfk_1` FOREIGN KEY (`c_id`) REFERENCES `tb_class` (`c_id`)
  39. ) ENGINE=InnoDB DEFAULT CHARSET=utf8
  41.  */
  • 编写Mapper：StudentMapper
  1.  package com.czxy.student.mapper;
  2.  
  3. import com.czxy.student.domain.Student;
  4. import tk.mybatis.mapper.common.Mapper;
  5.  
  6.  
  7. @org.apache.ibatis.annotations.Mapper
  8. public interface StudentMapper extends Mapper<Student> {
  9. }
  10.  
  11. •修改班级的service
  12.  	@Resource
  13.     private StudentMapper studentMapper;    
  14.  
  15. 	@Override
  16.     public boolean deleteById(String classesId) {
  17.         // 先删除班级中的学生
  18.         Example example = new Example(Student.class);
  19.         Example.Criteria criteria = example.createCriteria();
  20.         criteria.andEqualTo("cid", classesId);
  21.         studentMapper.deleteByExample(example);
  22.  
  23.  
  24.         // 删除班级
  25.         int result = classesMapper.deleteByPrimaryKey(classesId);
  26.         return result == 1 ;
  27.     }

 5.后期更新学生管理系统之学生管理

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号