5. 学生管理
5.1 增删改查（含条件/分页）
- 需求
5.1.1 后端实现
- 编写JavaBean：表对应 Student、条件封装 StudentVo
—— Student
package com.czxy.domain; import lombok.Data; import javax.persistence.Column; import javax.persistence.Id; import javax.persistence.Table; @Table(name = "tb_student") @Data //该注解作用：自动生成构造和set/get方法 public class Student { @Id @Column(name = "s_id") private String sid ; @Column(name = "sname") private String sname ; @Column(name = "age") private Integer age ; @Column(name = "birthday") private String birthday ; @Column(name = "gender") private String gender ; @Column(name = "c_id") private String cid ; @Column(name = "city_ids") private String city_ids ; private Classes classes; }
—— StudentVo 【条件封装类】
package com.czxy.domain; import lombok.Data; import javax.persistence.Column; import javax.persistence.Id; import javax.persistence.Table; @Table(name = "tb_student") @Data //该注解作用：自动生成构造和set/get方法 public class Student { @Id @Column(name = "s_id") private String sid ; @Column(name = "sname") private String sname ; @Column(name = "age") private Integer age ; @Column(name = "birthday") private String birthday ; @Column(name = "gender") private String gender ; @Column(name = "c_id") private String cid ; @Column(name = "city_ids") private String city_ids ; private Classes classes; }
—— StudentVo 【条件封装类】
package com.czxy.vo; import lombok.Data; @Data public class StudentVo { private String cid; //班级id private String sname; //学生姓名 private String startAge; //开始年龄 private String endAge; //结束年龄 }
编写Mapper：StudentMapper
package com.czxy.mapper; import com.czxy.domain.Student; import tk.mybatis.mapper.common.Mapper; @org.apache.ibatis.annotations.Mapper public interface StudentMapper extends Mapper<Student> { }
- 编写service
—— SetudentService接口
package com.czxy.service; import com.czxy.domain.Student; import com.czxy.vo.StudentVo; import com.github.pagehelper.PageInfo; public interface StudentService { //查询详情 Student selectById(String sid); //添加或修改 boolean saveOrupdate(Student student); //删除 boolean delete(String sid); //分页条件查询 PageInfo<Student> condition(StudentVo studentVo, Integer pageSize, Integer pageNum); }
——StudentServiceImp实现类
package com.czxy.service.impl; import com.czxy.domain.Classes; import com.czxy.domain.Student; import com.czxy.mapper.ClassesMapper; import com.czxy.mapper.StudentMapper; import com.czxy.service.StudentService; import com.czxy.vo.StudentVo; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import tk.mybatis.mapper.entity.Example; import javax.annotation.Resource; import java.util.List; @Service @Transactional public class StudentServiceImpl implements StudentService { @Resource private StudentMapper studentMapper; @Resource private ClassesMapper classesMapper; //查询详情 @Override public Student selectById(String sid) { Student student = studentMapper.selectByPrimaryKey(sid); return student; } //添加或修改 @Override public boolean saveOrupdate(Student student) { Student stu = studentMapper.selectByPrimaryKey(student.getSid()); int result = -1 ; if (stu == null){ //添加 result = studentMapper.insert(student); }else { //修改 result = studentMapper.updateByPrimaryKey(student); } return result==1; } //删除 @Override public boolean delete(String sid) { int i = studentMapper.deleteByPrimaryKey(sid); return i==1; } //分页查询 @Override public PageInfo<Student> condition(StudentVo studentVo, Integer pageSize, Integer pageNum) { //条件 Example example = new Example(Student.class); Example.Criteria c = example.createCriteria(); //班级id if(studentVo.getCid() != null && !studentVo.getCid().equals("")){ c.andLike("cid","%"+studentVo.getCid()+"%"); } //姓名 if(studentVo.getSname() != null && !studentVo.getSname().equals("")){ c.andEqualTo("sname",studentVo.getSname()); } //开始年龄 if(studentVo.getStartAge() != null && !studentVo.getStartAge().equals("")){ c.andGreaterThanOrEqualTo("age",studentVo.getStartAge()); } //结束年龄 if(studentVo.getEndAge() != null && !studentVo.getEndAge().equals("")){ c.andLessThanOrEqualTo("age",studentVo.getEndAge()); } //分页 PageHelper.startPage(pageNum,pageSize); //查询 List<Student> list = studentMapper.selectByExample(example); //关联 list.forEach(student -> { Classes classes = classesMapper.selectByPrimaryKey(student.getCid()); student.setClasses(classes); //对生日进行字符串截取 String[] s = student.getBirthday().split(" "); student.setBirthday(s[0]); }); //封装 PageInfo<Student> pageInfo = new PageInfo<>(list); return pageInfo; } }
- 编写controller
—— StudentController
package com.czxy.controller; import com.czxy.domain.Classes; import com.czxy.domain.Student; import com.czxy.service.ClassesService; import com.czxy.service.StudentService; import com.czxy.vo.BaseResult; import com.czxy.vo.StudentVo; import com.github.pagehelper.PageInfo; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import java.util.List; @RestController @RequestMapping("/student") @CrossOrigin public class StudentController { @Resource private StudentService studentService; //分页条件查询 @PostMapping("/condition/{pageSize}/{pageNum}") public BaseResult condition( @RequestBody StudentVo studentVo, @PathVariable("pageSize") Integer pageSize, @PathVariable("pageNum") Integer pageNum ){ //查询 PageInfo<Student> pageInfo = studentService.condition(studentVo,pageSize,pageNum); //处理 return BaseResult.ok("查询成功",pageInfo); } @PostMapping("/saveOrupdate") public BaseResult addOrupdate(@RequestBody Student student) { try { boolean f = studentService.saveOrupdate(student); if (f){ return BaseResult.ok("编辑成功！"); }else { return BaseResult.ok("编辑失败！"); } } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } //根据id查询 @GetMapping("/{sid}") public BaseResult selectById(@PathVariable("sid") String sid){ Student student = studentService.selectById(sid); return BaseResult.ok("查询详情",student); } //删除 @DeleteMapping("/{sid}") public BaseResult delete(@PathVariable("sid") String sid){ try { boolean f = studentService.delete(sid); if (f){ return BaseResult.ok("删除成功"); } return BaseResult.error("删除失败"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } }
5.1.2 前端实现 [ 采用修改和添加共用一个页面 ]
—— 静态页面编写
结构：
—— list.html 学生列表页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "../js/axios.js"></script> <script src = "../js/vue.js"></script> </head> <body> <div id="app"> <table border="1"> <tr> <td>学生id</td> <td> <input type="text" :readonly = "sid != ''" v-model="student.sid"/> </td> </tr> <tr> <td>选择班级</td> <td> <select v-model="student.cid"> <option v-for="(classes,index) in classesList" :value="classes.cid ">{{classes.cname}}</option> </select> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" v-model="student.sname"/> </td> </tr> <tr> <td>年龄</td> <td> <input type="text" v-model="student.age"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" value = "0" name="gender" v-model="student.gender"/> 男 <input type="radio" value = "1" name="gender" v-model="student.gender"/> 女 </td> </tr> <tr> <td>生日</td> <td> <input type="text" v-model="student.birthday"/> </td> </tr> <tr> <td colspan="2"> <input type="button" :value="sid==''? '添加': '修改'" @click="saveOrupdate_stu()"/> </td> </tr> </table> </div> </body> </html> <script> new Vue({ el : '#app', data :{ classesList: [], sid: '', // id值 student: {} //查询结果，表单绑定对象 }, methods: { async selectAll_Cls() { var url = `http://localhost:8080/classes`; let {data: baseResult } = await axios.get(url); if (baseResult.code == 20000 ) { this.classesList = baseResult.data; }else { alter(baseResult.message); } }, async selectById() { let {data: baseResult } = await axios.get(`http://localhost:8080/student/${this.sid}`); if (baseResult.code == 20000) { this.student = baseResult.data; }else { alter(baseResult.message); } }, //编辑案例事件 async saveOrupdate_stu() { let {data: baseResult } = await axios.post(`http://localhost:8080/student/saveOrupdate`,this.student); if(baseResult.code == 20000 ) { //成功-- 列表页面 location.href = "/stu/list.html"; }else { alter(baseResult.message); } } }, mounted() { this.selectAll_Cls(); //获得sid this.sid = location.href.split("?sid=")[1]; //判断是否有id.有就查询 if (this.sid) { //修改 this.selectById(); } else { //添加 this.sid = ''; } }, }) </script>
—— 查询分页效果页面结果展示
—— SaveOrUpdate.html 添加和修改页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src = "../js/axios.js"></script> <script src = "../js/vue.js"></script> </head> <body> <div id="app"> <table border="1"> <tr> <td>学生id</td> <td> <input type="text" :readonly = "sid != ''" v-model="student.sid"/> </td> </tr> <tr> <td>选择班级</td> <td> <select v-model="student.cid"> <option v-for="(classes,index) in classesList" :value="classes.cid ">{{classes.cname}}</option> </select> </td> </tr> <tr> <td>姓名</td> <td> <input type="text" v-model="student.sname"/> </td> </tr> <tr> <td>年龄</td> <td> <input type="text" v-model="student.age"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" value = "0" name="gender" v-model="student.gender"/> 男 <input type="radio" value = "1" name="gender" v-model="student.gender"/> 女 </td> </tr> <tr> <td>生日</td> <td> <input type="text" v-model="student.birthday"/> </td> </tr> <tr> <td colspan="2"> <input type="button" :value="sid==''? '添加': '修改'" @click="saveOrupdate_stu()"/> </td> </tr> </table> </div> </body> </html> <script> new Vue({ el : '#app', data :{ classesList: [], sid: '', // id值 student: {} //查询结果，表单绑定对象 }, methods: { async selectAll_Cls() { var url = `http://localhost:8080/classes`; let {data: baseResult } = await axios.get(url); if (baseResult.code == 20000 ) { this.classesList = baseResult.data; }else { alter(baseResult.message); } }, async selectById() { let {data: baseResult } = await axios.get(`http://localhost:8080/student/${this.sid}`); if (baseResult.code == 20000) { this.student = baseResult.data; }else { alter(baseResult.message); } }, //编辑案例事件 async saveOrupdate_stu() { let {data: baseResult } = await axios.post(`http://localhost:8080/student/saveOrupdate`,this.student); if(baseResult.code == 20000 ) { //成功-- 列表页面 location.href = "/stu/list.html"; }else { alter(baseResult.message); } } }, mounted() { this.selectAll_Cls(); //获得sid this.sid = location.href.split("?sid=")[1]; //判断是否有id.有就查询 if (this.sid) { //修改 this.selectById(); } else { //添加 this.sid = ''; } }, }) </script>
—— 添加页面结果展示
—— 修改页面结果展示
