3.2 前端环境
3.2.1 拷贝静态资源
js
由于代码量较多，可去自行去vue官网下载。如已经有js中的文件，直接导入即可。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="cls/list.html">班级管理2</a><br/> <a href="stu/list.html">学生管理2</a> </body> </html>
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 后端
package com.czxy.mapper; import com.czxy.domain.Classes; import tk.mybatis.mapper.common.Mapper; @org.apache.ibatis.annotations.Mapper public interface ClassesMapper extends Mapper<Classes> { }
- 编写service
—— 接口 ClassesService 【一口气写完所有增删改查，接口方法】
package com.czxy.service; import com.czxy.domain.Classes; import java.util.List; public interface ClassesService { //查询所有 List<Classes> 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<Classes> seleAll() { List<Classes> 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<Classes> 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页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <script src="../js/axios.js"></script> </head> <body> <div id="app"> <table border="1"> <tr> <td colspan="4" align="right"> <a href="/cls/add.html">添加</a> </td> </tr> <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> <a :href=" #">修改</a> <a href="#">删除</a> </td> </tr> </table> </div> </body> </html> <script> 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(); } }) </script>
—— 在swagger 查询地址步骤。【此次所涉及的地址路径，增删改查都和swagger上一致，以下操作，将不在对此进行解释】
