【基础篇】六、基于SpringBoot来整合SSM的案例（下）

忘是亡心i 2023-10-16 08:59 106阅读 0赞

文章目录

  • 1、前后端调用：axios发送异步请求
  • 2、添加功能
  • 3、删除功能
  • 4、修改功能
  • 5、异常消息处理
  • 6、分页功能
  • 7、分页Bug处理
  • 8、条件查询

接下来加入前端页面，使用axios发送异步请求调用上篇的接口。调前端代码时，发现还挺有趣，刷新、隐藏、调用、以及一些交互逻辑的代码翻译，等框架学完看看前端的东西。
在这里插入图片描述

1、前后端调用：axios发送异步请求

关于前端资源文件的位置：

  • 前后端分离结构设计中页面归属前端服务器
  • 单体工程中页面放置在resources目录下的static目录中（建议执行clean）

调用下上篇的getAll接口，并将结果打印到console控制台来先调试下。前端发送异步请求，调用后端接口：

  1. //列表
  2. getAll() {
  4.     axios.get("/books").then((res)=>{
  6.         console.log(res.data);
  7.     });
  8. },

created钩子函数用于初始化页面时发起调用，如页面加载完后要调接口查全部图书：

  1. //钩子函数，VUE对象初始化完成后自动执行
  2. created() {
  4.     //查全部
  5.     this.getAll();
  6. }

将查询数据返回到页面，利用前端数据双向绑定进行数据展示:

  1. //列表
  2. getAll() {
  4.     axios.get("/books").then((res)=>{
  6.         this.dataList = res.data.data;
  7.     });
  8. },

重启服务，刷新页面，列表功能实现。

在这里插入图片描述

2、添加功能

弹出添加窗口：

  1. //弹出添加窗口
  2. handleCreate() {
  4.     this.dialogFormVisible = true;  //true即弹出
  5. },

这样写，弹窗的窗口带有上次添加时的数据，需要在每次弹出前清除旧数据，即重置表单：

  1. //重置表单
  2. resetForm() {
  4.     this.formData = {
  5.     };
  6. },

因此，弹出窗口应该是：

  1. //弹出添加窗口
  2. handleCreate() {
  4.     this.dialogFormVisible = true;
  5.     this.resetForm();
  6. },

弹出添加窗口后，写数据，然后提交给后端：

  1. //添加
  2. handleAdd () {
  4.     //发送异步请求
  5.     axios.post("/books",this.formData).then((res)=>{
  7.         //如果操作成功，关闭弹层，显示数据
  8.         if(res.data.flag){
  10.             this.dialogFormVisible = false;
  11.             this.$message.success("添加成功");
  12.         }else {
  14.             this.$message.error("添加失败");
  15.         }
  16.     }).finally(()=>{
  18.         this.getAll();
  19.     });
  20. },

以上即添加成功，则关闭弹层并给用户一个message添加成功。添加失败时不关闭弹层，方便用户修改后继续添加。不管成功与否，最后finally都刷新下列表。最后，当点弹窗的取消时，给用户一个取消成功的提示：

  1. //取消
  2. cancel(){
  4.     this.dialogFormVisible = false;  //关闭弹窗
  5.     this.$message.info("当前操作取消");
  6. },

在这里插入图片描述

3、删除功能

基本逻辑和添加类似：删除接口返回成功时弹窗给用户提示删除成功，接口失败则返回删除失败。

  1. // 删除
  2. handleDelete(row) {
  4.     axios.delete("/books/"+row.id).then((res)=>{
  6.         if(res.data.flag){
  8.             this.$message.success("删除成功");
  9.         }else{
  11.             this.$message.error("删除失败");
  12.         }
  13.     }).finally(()=>{
  15.         this.getAll();
  16.     });
  17. }

这样一点删除按钮，就会调用删除接口，为了防止用户误操作，加$confirm，catch后面就是取消删除的逻辑：

  1. // 删除
  2. handleDelete(row) {
  4.     //1.弹出提示框
  5.     this.$confirm("确认要删除这条数据吗？","Tip",{
  6.     type:'info'}).then(()=>{
  8.         //2.做删除业务
  9.         axios.delete("/books/"+row.id).then((res)=>{
  11.         ……
  12.         }).finally(()=>{
  14.         this.getAll();
  15.         });
  16.     }).catch(()=>{
  18.         //3.取消删除
  19.         this.$message.info("取消删除操作");
  20.     });
  21. }

删除这块，注意三点：

  • row对象，删除操作需要传递当前行数据对应的id值到后台，row.id（row的数据可以log.console看下）
  • 删除操作结束后动态刷新页面加载数据
  • 删除操作前弹出提示框避免误操作

在这里插入图片描述

4、修改功能

首先是弹出修改窗口，里面包含当前这条数据的信息：

  1. //弹出编辑窗口
  2. handleUpdate(row) {
  4.     axios.get("/books/"+row.id).then((res)=>{
  6.         if(res.data.flag){
  8.             //展示弹层，加载数据
  9.             this.formData = res.data.data;
  10.             this.dialogFormVisible4Edit = true;
  11.         }else{
  13.             this.$message.error("数据不存在，已自动刷新页面");
  14.         }
  15.     });
  16. },

（以下这个场景复现：复制页面，在一个页面后删除后，另一个页面未刷新，在这个页面点编辑，即编辑一条不存在的数据。PS：前面的删除应该也有这个场景，需要加个else）
在这里插入图片描述
以上：

  • 加载要修改数据通过传递当前行数据对应的id值到后台查询数据
  • 利用前端数据双向绑定将查询到的数据进行回显

写修改的逻辑：

  1. //修改
  2. handleEdit() {
  4.     axios.put("/books",this.formData).then((res)=>{
  6.         //如果操作成功，关闭弹层并刷新页面
  7.         if(res.data.flag){
  9.             this.dialogFormVisible4Edit = false;
  10.             this.$message.success("修改成功");
  11.         }else {
  13.             this.$message.error("修改失败，请重试");
  14.         }
  15.     }).finally(()=>{
  17.         this.getAll();
  18.     });
  19. },

取消编辑：

  1. //和之前的取消复用一个函数
  2. cancel(){
  4.     this.dialogFormVisible = false;    //关闭新增弹窗窗口
  5.     this.dialogFormVisible4Edit = false;  //关闭编辑弹窗窗口
  6.     this.$message.info("操作取消");
  7. },

到此，基本的增删改查的接口与页面完成。

5、异常消息处理

当接口请求出现异常时，返回体如下，和统一结果类R不一样，影响前端取值：

  1. {
  3. "timestamp": "2021-09-15T03:27:31.038+00:00",
  4. "status": 500,
  5. "error": "Internal Server Error",
  6. "path": "/books"
  7. }

鉴于此，加统一异常处理器，将异常处理成统一结果类返回给前端。修改R类，加msg字段：

  1. @Data
  2. public class R{
  4.     private Boolean flag;
  5.     private Object data;
  6.     private String msg;
  7.     public R(Boolean flag,Object data){
  9.         this.flag = flag;
  10.         this.data = data;
  11.     }
  12.     public R(Boolean flag,String msg){
  14.         this.flag = flag;
  15.         this.msg = msg;
  16.     }
  17.     //也可以定义个静态方法，里面封装构造方法
  18.     public static R success(Object data){
  20.         return new R(ture,data)
  21.     }
  22.     public static R error (String msg){
  24.         return new R(false,msg);
  25.     }
  28. }

定义全局异常处理器：

  1. @RestControllerAdvice
  2. public class ProjectExceptionAdvice {
  4.     @ExceptionHandler(Exception.class)
  5.     public R doException(Exception ex){
  7.         //记录日志
  8.         //发送消息给运维
  9.         //发送邮件给开发人员,ex对象发送给开发人员
  10.         ex.printStackTrace();
  11.         return R.error("服务异常，请稍后重试！");
  12.     }
  13. }

此时，前端的msg就别写死了，从响应里拿res.data.msg：

  1. //添加
  2. handleAdd () {
  4.     //发送异步请求
  5.     axios.post("/books",this.formData).then((res)=>{
  7.         //如果操作成功，关闭弹层，显示数据
  8.         if(res.data.flag){
  10.             this.dialogFormVisible = false;
  11.             this.$message.success("添加成功");
  12.         }else {
  14.             this.$message.error(res.data.msg);
  15.         }
  16.     }).finally(()=>{
  18.         this.getAll();
  19.     });
  20. },

当然，响应成功的提示也可以改为res.data.msg，后端返回结果加msg：

  1. @PostMapping
  2. public R save(@RequestBody Book book) throws IOException {
  4.     Boolean flag = bookService.insert(book);
  5.     return new R(flag , flag ? "添加成功^_^" : "添加失败-_-!");
  6. }

在这里插入图片描述
最后，小总结：

  • 使用注解@RestControllerAdvice定义SpringMVC异常处理器用来处理异常的
  • 异常处理器必须被扫描加载，否则无法生效（当然@RestControllerAdvice注解里面包含了@Component，你注意扫描范围就好）
  • 表现层返回结果的模型类中添加消息属性msg用来传递消息到页面

6、分页功能

页面使用el分页组件添加分页功能：

  1. <!--分页组件-->
  2. <div class="pagination-container">
  3.     <el-pagination
  4.         class="pagiantion"
  5.         @current-change="handleCurrentChange"
  6.         :current-page="pagination.currentPage"
  7.         :page-size="pagination.pageSize"
  8.         layout="total, prev, pager, next, jumper"
  9.         :total="pagination.total">
  10.     </el-pagination>
  11. </div>

定义分页组件需要使用的数据并将数据绑定到分页组件：

  1. data:{
  3.     pagination: {
  4.      //分页相关模型数据
  5.         currentPage: 1, //当前页码
  6.         pageSize:10, //每页显示的记录数
  7.         total:0, //总记录数
  8.     }
  9. },

将之前的查全部接口改为调用分页功能的接口，传入上面定义的currentPage、pageSize

  1. getAll() {
  3.     axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => {
  5.     });
  6. },

之前的分页接口：

  1. @GetMapping("/{currentPage}/{pageSize}")
  2. public R getAll(@PathVariable Integer currentPage,@PathVariable Integer pageSize){
  5.     IPage<Book> pageBook = bookService.getPage(currentPage, pageSize);
  6.     return new R(null != pageBook ,pageBook);
  8. }

加载分页数据，并给组件的页码和pageSize赋值，否则页码显示不对：

  1. getAll() {
  3.     axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => {
  5.         this.pagination.total = res.data.data.total;
  6.         this.pagination.currentPage = res.data.data.current;
  7.         this.pagination.pagesize = res.data.data.size;
  8.         this.dataList = res.data.data.records;
  9.     });
  10. },

从第一页切换到第二页，即切换页码的实现，就改下currentPage，并调用getAll：

  1. //切换页码
  2. handleCurrentChange(currentPage) {
  4.     this.pagination.currentPage = currentPage;
  5.     this.getAll();
  6. },

效果：

在这里插入图片描述
分页功能的实现流程：

  • 使用el分页组件
  • 定义分页组件绑定的数据模型
  • 异步调用获取分页数据
  • 分页数据页面回显

7、分页Bug处理

场景：

一共两页数据，第二页仅有一条数据，删除这条数据后，实际只有一页数据，但前端页面仍停留在第二页。以下是查询接口的返回结果：

在这里插入图片描述

F12看到此时前端传参currentPage为2，后端接口修改下：对查询结果进行校验，当当前页码值大于总页码值时，就重新查询，使用最大页码值当作currentPage来查。（IPage对象中就有数据总共能有几页的数据pages）

  1. @GetMapping("{currentPage}/{pageSize}")
  2. public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
  5.     //先按传的查，拿到IPage对象
  6.     IPage<Book> page = bookService.getPage(currentPage, pageSize);
  8.     //如果当前页码值大于了总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
  9.     if( currentPage > page.getPages()){
  11.         page = bookService.getPage((int)page.getPages(), pageSize);
  12.     }
  13.     return new R(true, page);
  14. }

8、条件查询

查询条件数据封装，可单独封装，也可和之前的分页一起封装：

  1. pagination: {
  2.      //分页相关模型数据
  3.     currentPage: 1, //当前页码
  4.     pageSize:10, //每页显示的记录数
  5.     total:0, //总记录数
  6.     name: "",
  7.     type: "",
  8.     description: ""
  9. }

页面数据模型绑定：

  1. <div class="filter-container">
  2.     <el-input placeholder="图书类别" v-model="pagination.type" class="filter-item"/>
  3.     <el-input placeholder="图书名称" v-model="pagination.name" class="filter-item"/>
  4.     <el-input placeholder="图书描述" v-model="pagination.description" class="filter-item"/>
  5.     <el-button @click="getAll()" class="dalfBut">查询</el-button>
  6.     <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
  7. </div>

组织数据成为get请求发送的数据，拼出一个请求路径，log.console看下param拼接是否正常：

  1. getAll() {
  3.     //1.获取查询条件,拼接查询条件
  4.     param = "?name="+this.pagination.name;
  5.     param += "&type="+this.pagination.type;
  6.     param += "&description="+this.pagination.description;
  7.     console.log("-----------------"+ param);
  8.     axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param)
  9.         .then((res) => {
  11.         this.pagination.total = res.data.data.total;
  12.         this.pagination.currentPage = res.data.data.current;
  13.         this.pagination.pagesize = res.data.data.size;
  14.         this.dataList = res.data.data.records;
  15.     });
  16. },

修改Controller，接收条件查询的参数，GET下接收对象，不加@RequestBody：

  1. @GetMapping("{currentPage}/{pageSize}")
  2. public R getAll(@PathVariable int currentPage,@PathVariable int pageSize,Book book) {
  5.     IPage<Book> pageBook = bookService.getPage(currentPage,pageSize);
  6.     return new R(null != pageBook ,pageBook);
  8. }

修改Service层，使用LamdbaQueryWrapper对象拼接查询条件：

  1. public interface IBookService extends IService<Book> {
  3.     IPage<Book> getPage(Integer currentPage,Integer pageSize,Book queryBook);
  4. }
  6. @Service
  7. public class BookServiceImpl2 extends ServiceImpl<BookDao,Book> implements IBookService {
  9.     public IPage<Book> getPage(Integer currentPage,Integer pageSize,Book queryBook){
  11.         IPage page = new Page(currentPage,pageSize);
  12.         LambdaQueryWrapper<Book> lqw = new LambdaQueryWrapper<Book>();
  13.         lqw.like(Strings.isNotEmpty(queryBook.getName()),Book::getName,queryBook.getName());
  14.         lqw.like(Strings.isNotEmpty(queryBook.getType()),Book::getType,queryBook.getType());
  15.         lqw.like(Strings.isNotEmpty(queryBook.getDescription()),
  16.         Book::getDescription,queryBook.getDescription());
  17.         return bookDao.selectPage(page,lqw);
  18.     }
  19. }

最终效果：

在这里插入图片描述

到此，基础篇结束。

发表评论

表情：
评论列表 （有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读