网站导航
> 文档中心 > Vue案例—学生管理系统—html版（上篇）

Vue案例—学生管理系统—html版（上篇）

网友: 文档中心 2022-03-24 21:13:21

目录

案例

1 概述

2 表结构

3 搭建环境

3.1 后端环境

3.1.1 项目名：day21_student

3.1.2 坐标

3.1.3 核心配置文件：

3.1.4 启动类

3.1.5 封装类

3.1.6 配置类（可选）

3.2 前端环境

3.2.1 拷贝静态资源

3.2.2 vs 打开资源

4 班级管理

4.1 JavaBean：Classes 

4.2 增删改查

4.2.1 后端

编写Mapper

编写service

编写controller 

 4.2.2 前端：axios+then

 4.2.2.1 查询所有 — list.html页面

 4.2.2.2 添加班级 — add.html页面

 4.2.2.3 修改班级 — edit.html页面

  4.2.2.4 删除班级—— html页面

 由于文章过长，先讲解班级管理增删改查，

下一篇在我更新讲解学生管理

案例

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 坐标

    4.0.0    com.czxy.ssm    day21_student    1.0-SNAPSHOT         org.springframework.boot spring-boot-starter-parent 2.2.5.RELEASE             UTF-8 1.8 Hoxton.SR3 1.1.0 2.2.1.RELEASE 1.3.2 2.0.2 1.2.5 5.1.32 1.1.10 3.4.0 2.7.0 0.9.0 2.9.7 1.9.3                         org.springframework.cloud  spring-cloud-dependencies  ${spring-cloud-release.version}  pom  import                 com.alibaba.nacos  nacos-client  ${nacos.version}                 com.alibaba.cloud  spring-cloud-starter-alibaba-nacos-discovery  ${alibaba.cloud.version}                 com.alibaba.cloud  spring-cloud-starter-alibaba-nacos-config  ${alibaba.cloud.version}                 com.alibaba.cloud  spring-cloud-starter-alibaba-sentinel  ${alibaba.cloud.version}                 org.mybatis.spring.boot  mybatis-spring-boot-starter  ${mybatis.starter.version}                 tk.mybatis  mapper-spring-boot-starter  ${mapper.starter.version}                 com.github.pagehelper  pagehelper-spring-boot-starter  ${pageHelper.starter.version}                 com.baomidou  mybatis-plus-boot-starter  ${mybatis.plus.version}            com.baomidou  mybatis-plus-annotation  ${mybatis.plus.version}                 mysql  mysql-connector-java  ${mysql.version}                 com.alibaba  druid-spring-boot-starter  ${durid.starter.version}                 io.springfox  springfox-swagger2  ${swagger.version}            io.springfox  springfox-swagger-ui  ${swagger.version}                      commons-beanutils  commons-beanutils  ${beanutils.version}                 io.jsonwebtoken  jjwt  ${jwt.jjwt.version}                 joda-time  joda-time  ${jwt.joda.version}                     org.springframework.boot     spring-boot-starter-web        org.mybatis.spring.boot     mybatis-spring-boot-starter        tk.mybatis     mapper-spring-boot-starter        com.github.pagehelper     pagehelper-spring-boot-starter        mysql     mysql-connector-java        com.alibaba     druid-spring-boot-starter        io.springfox     springfox-swagger2       io.springfox     springfox-swagger-ui

3.1.3 核心配置文件：

  • application.yml
#端口号server:  port: 8080#服务名spring:  datasource:    driverClassName: com.mysql.jdbc.Driver    url: jdbc:mysql://localhost:3306/数据库库名?useUnicode=true&characterEncoding=utf8    username: root    password: '1234'    druid:    #druid 连接池配置      initial-size: 1#初始化连接池大小      min-idle: 1    #最小连接数      max-active: 20 #最大连接数      test-on-borrow: true  #获取连接时候验证，会影响性能

3.1.4 启动类

  • StudentApplication
package com.czxy;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class StudentApplication {    public static void main(String[] args) { SpringApplication.run(StudentApplication.class,args);    }}

3.1.5 封装类

package com.czxy.vo;import java.util.HashMap;import java.util.Map;public class BaseResult {    //成功状态码    public static final int OK = 20000;    //失败状态码    public static final int ERROR = 0;    //返回码    private Integer code;    //返回消息    private String message;    //存放数据    private T data;    //其他数据    private Map 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 getOther() { return other;    }}

3.1.6 配置类（可选）

package com.czxy.vo;import java.util.HashMap;import java.util.Map;public class BaseResult {    //成功状态码    public static final int OK = 20000;    //失败状态码    public static final int ERROR = 0;    //返回码    private Integer code;    //返回消息    private String message;    //存放数据    private T data;    //其他数据    private Map 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 getOther() { return other;    }}

3.2 前端环境

3.2.1 拷贝静态资源

  js

由于代码量较多，可去自行去vue官网下载。如已经有js中的文件，直接导入即可。

index.html

        Title班级管理2
学生管理2

3.2.2 vs 打开资源

4 班级管理

4.1 JavaBean：Classes 

package com.czxy.domain;import lombok.Data;import javax.persistence.Column;import javax.persistence.Id;import javax.persistence.Table;@Table(name = "tb_class")  // “ ” 中填写数据库班级表名@Data   //该注解作用： 自动生成构造和get/set方法public class Classes {    @Id    @Column(name = "c_id")    private String cid ;    @Column(name = "c_name")    private String cname ;    @Column(name = "`desc`")    private String desc ;}

4.2 增删改查

4.2.1 后端

  • 编写Mapper

package com.czxy.mapper;import com.czxy.domain.Classes;import tk.mybatis.mapper.common.Mapper;@org.apache.ibatis.annotations.Mapperpublic interface ClassesMapper  extends Mapper {}

  • 编写service

        —— 接口 ClassesService 【一口气写完所有增删改查，接口方法】

package com.czxy.service;import com.czxy.domain.Classes;import java.util.List;public interface ClassesService {    //查询所有    List seleAll();    //查询详情    Classes selectById(String cid);    //添加    boolean add(Classes classes);    //更新    boolean update(Classes classes);    //删除    boolean delete(String cid);}

  —— 实现类 ClassesServiceImpl 【一口气写完所有增删改查,实现方法】

package com.czxy.service.impl;import com.czxy.domain.Classes;import com.czxy.mapper.ClassesMapper;import com.czxy.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 seleAll() { List list = classesMapper.selectAll(); return list;    }    //根据id查询    @Override    public Classes selectById(String cid) { Classes classes = classesMapper.selectByPrimaryKey(cid); return classes;    }    //添加    @Override    public boolean add(Classes classes) { int i = classesMapper.insert(classes); return i==1 ;    }    //修改    @Override    public boolean update(Classes classes) { int i = classesMapper.updateByPrimaryKey(classes); return i==1;    }    //删除    @Override    public boolean delete(String cid) { int i = classesMapper.deleteByPrimaryKey(cid); return i==1;    }}

  • 编写controller 

  • 一口气在表现层，写完所有增删改查代码。采用Restful风格的写法

 

package com.czxy.controller;import com.czxy.domain.Classes;import com.czxy.service.ClassesService;import com.czxy.vo.BaseResult;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;import java.util.List;@RestController@RequestMapping("/classes")public class ClassesController {    @Resource    private ClassesService classesService ;     //查询所有    @GetMapping    public BaseResult selectAll(){ List list = classesService.seleAll(); return BaseResult.ok("查询所有",list);    }    //根据id查询    @GetMapping("/{cid}")    public BaseResult selectById(@PathVariable("cid") String cid){ Classes classes = classesService.selectById(cid); return BaseResult.ok("查询详情",classes);    }    //添加    @PostMapping    public BaseResult add(@RequestBody Classes classes){ try {     boolean f = classesService.add(classes);     if (f){  return BaseResult.ok("添加成功");     }     return BaseResult.error("添加失败"); } catch (Exception e) {     e.printStackTrace();     return BaseResult.error(e.getMessage()); }    }    //修改    @PutMapping    public BaseResult update(@RequestBody Classes classes){ try {     boolean f = classesService.update(classes);     if (f){  return BaseResult.ok("更新成功");     }     return BaseResult.error("更新失败"); } catch (Exception e) {     e.printStackTrace();     return BaseResult.error(e.getMessage()); }    } //删除    @DeleteMapping("/{cid}")    public BaseResult delete(@PathVariable("cid") String cid){ try {     boolean f = classesService.delete(cid);     if (f){  return BaseResult.ok("删除成功");     }     return BaseResult.error("删除失败"); } catch (Exception e) {     e.printStackTrace();     return BaseResult.error(e.getMessage()); }    }}
  • 查询结果 【在swagger UI 中查看结果。需先打开运行项目，在复制网址进入进行查看】
  • ——  swagger ui 网址：http://localhost:8080/swagger-ui.html#/

 4.2.2 前端：axios+then

  • 编写页面、发送ajax、显示数据 【在静态资源包下编写页面】

 4.2.2.1 查询所有 — list.html页面

        Title        
    
 
       添加      
 
     编号     班级名称     班级描述     操作 
   
     {{classes.cid}}     {{classes.cname}}     {{classes.desc}}       修改  删除      
    
    new Vue({ el:'#app',  // 与div绑定挂载 data:{      // 数据区域     classesList:[] }, methods:{    //方法函数-查询所有      async selectAll(){      let {data:baseResult} = await axios.get(`http://localhost:8080/classes`);   if(baseResult.code == 20000){this.classesList = baseResult.data;   }      }, mounted(){  //页面加载完成时    this.selectAll(); }    })

—— 在swagger 查询地址步骤。【此次所涉及的地址路径，增删改查都和swagger上一致，以下操作，将不在对此进行解释】

—— 运行结果展示 【该数据库已经被我修改添加过，仅做参考】

 4.2.2.2 添加班级 — add.html页面

        Title        
    
 
     编号             
 
     班级名称             
 
     班级描述             
 
               
    
    new Vue({ el:'#app', data:{     classes:{} }, methods:{ //添加班级     async add_cls(){  let {data:baseResult} = await axios.post(`http://localhost:8080/classes`,this.classes);  if(baseResult.code == 20000){      //添加成功-跳转      location.href="/cls/list.html"  }else {      //添加失败，提示      alert(baseResult.message)  }     } }, mounted(){     this.add_cls(); }    })

—— swagger 

 —— 运行结果展示

 4.2.2.3 修改班级 — edit.html页面

 —— list.html页面，对修改a标签进行路径填写跳转到edit.html页面。

        Title        
    
 
     编号       {{classes.cid}}      
 
     班级名称             
 
     班级描述             
 
             
    
    new Vue({ el :"#app", data:{     classes:{},     classesId:"" }, methods:{//根据id进行查询//获取班级信息，用于在加载修改页面edit.html时对班级进行回显     async selectById(){  let {data:baseResult} = await axios.get(`http://localhost:8080/classes/${this.classesId}`);  //在路径上将id进行拼写上去，对应数据区域data中的classesId  if(baseResult.code == 20000){      this.classes = baseResult.data;  }     },     //更新     async update_cls(){  let {data:baseResult} = await axios.put(`http://localhost:8080/classes`,this.classes);  if (baseResult.code == 20000){      //更新成功      location.href = "/cls/list.html";  }else {      //更新失败      alert(baseResult.message)  }     } }, mounted(){     //获取id，从网页路径上进行获取分割     let arr = location.href.split("?cid=");     this.classesId = arr[1];     //查询详情     this.selectById(); }    })

 —— 运行结果展示

  4.2.2.4 删除班级—— html页面

—— 删除a标签修改

—— vue 函数书写

async delete_cls(cid){  //弹窗询问是否要删除   if(!confirm("您确定要删除吗？")) {return ;   }  let {data:baseResult} = await axios.delete(`http://localhost:8080/classes/${cid}`);   if (baseResult.code == 20000){      // 删除成功-调用查询所有函数，重新查询this.selectAll();   }else {      //删除失败— 错误提示alert(baseResult.message)   }     }  },

 —— 运行结果展示 【点击确定，即可删除指定班级】

 由于文章过长，先讲解班级管理增删改查，

下一篇在我更新讲解学生管理

网络标签：

相关问题