SpringBoot(5)学习笔记表现层标准开发&消息一致性处理&axios&异常处理器

最新推荐文章于 2022-11-12 10:21:30 发布
最新推荐文章于 2022-11-12 10:21:30 发布
阅读量122 收藏
点赞数
分类专栏： spring boot 文章标签： spring boot 学习 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53121751/article/details/126135732
版权

表现层标准开发

package com.zxd.ssmp.controller;

import com.zxd.ssmp.domain.Book;
import com.zxd.ssmp.service.Iservice.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/books")
public class BookController {

    @Autowired
    private IBookService iBookService;

    @GetMapping
    public List<Book> getAll(){
        List<Book> list = iBookService.list();
        return  list;
    }

    @PostMapping
    public Boolean save(@RequestBody Book book){
        boolean save = iBookService.save(book);
        return save;
    }

    @PutMapping
    public Boolean update(@RequestBody  Book book){
        boolean b = iBookService.updateById(book);
        return b;
    }

    @DeleteMapping("{id}")
    public Boolean delete(@PathVariable Integer id){
        boolean b = iBookService.removeById(id);
        return b;
    }

    @GetMapping("{id}")
    public Book getById(@PathVariable Integer id){
        Book book = iBookService.getById(id);
        return  book;
    }

}

用postman测试

添加分页查询

//表现层
@GetMapping("{currentPage}/{size}")
    public IPage<Book> getById(@PathVariable Integer currentPage,@PathVariable Integer size){
        IPage<Book> page = iBookService.getPage(currentPage, size);
        return  page;
    }

//业务层
IPage<Book> getPage(int currentPage, int size);
//业务实现层
@Autowired
    private BookDao bookDao;
    @Override
    public IPage<Book> getPage(int currentPage, int size) {
        IPage page = new Page<Book>(currentPage,size);
        IPage iPage = bookDao.selectPage(page, null);
        return iPage;
    }
//如果没有写分页拦截器记得添加配置类
@Configuration
public class MPconfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //加载分页拦截器
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return  interceptor;
    }
}

 测试

表现层数据一致性处理（返回数据封装）

package com.zxd.ssmp.util;

import lombok.Data;

@Data
public class R {
    private Boolean flag;
    private Object data;


    public R(){
    }
    public R(Boolean flag){
        this.flag = flag;
    }
    public R(Boolean flag,Object data){
        this.flag = flag;
        this.data = data;
    }
}


 @GetMapping
    public R getAll(){
        List<Book> list = iBookService.list();
        return  new R(true,list,"查询所有成功");
    }

测试结果

1.设置统一的返回值结果类型便于前端开发读取数据

2.返回值结果类型可以根据自行设定，没有固定格式

3.返回值结果模型用于后端与前端进行数据格式统一，也成为前后端数据协议 

编写前端

部分代码：主要是axios异步调用

<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>基于SpringBoot整合SSM案例</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

    <div class="content-header">

        <h1>图书管理</h1>

    </div>

    <div class="app-container">

        <div class="box">

            <div class="filter-container">
                <el-input placeholder="图书类别" v-model="pagination.type" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="图书描述" v-model="pagination.description" style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>

            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                <el-table-column type="index" align="center" label="序号"></el-table-column>

                <el-table-column prop="type" label="图书类别" align="center"></el-table-column>

                <el-table-column prop="name" label="图书名称" align="center"></el-table-column>

                <el-table-column prop="description" label="描述" align="center"></el-table-column>

                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

                    </template>

                </el-table-column>

            </el-table>

            <!--分页组件-->
            <div class="pagination-container">

                <el-pagination
                        class="pagiantion"

                        @current-change="handleCurrentChange"

                        :current-page="pagination.currentPage"

                        :page-size="pagination.pageSize"

                        layout="total, prev, pager, next, jumper"

                        :total="pagination.total">

                </el-pagination>

            </div>

            <!-- 新增标签弹层 -->

            <div class="add-form">

                <el-dialog title="新增图书" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!-- 编辑标签弹层 -->

            <div class="add-form">

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel()">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                type: "",
                name: "",
                description: ""
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            //调用查询全部数据的操作
            this.getAll();
        },

        methods: {
            //列表
            // getAll() {
            //     //发送异步请求
            //     axios.get("/books").then((res)=>{
            //         // console.log(res.data);
            //         this.dataList = res.data.data;
            //     });
            // },

            //分页查询
            getAll() {
                //组织参数，拼接url请求地址
                // console.log(this.pagination.type);
                param = "?type="+this.pagination.type;
                param +="&name="+this.pagination.name;
                param +="&description="+this.pagination.description;
                // console.log(param);

                //发送异步请求
                axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
                    console.log(res.data);
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;

                    this.dataList = res.data.data.records;
                });
            },

            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },

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

            //重置表单
            resetForm() {
                this.formData = {};
            },

            //添加
            handleAdd () {
                axios.post("/books",this.formData).then((res)=>{
                    //判断当前操作是否成功
                    if(res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisible = false;
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });
            },

            //取消
            cancel(){
                this.dialogFormVisible = false;
                this.dialogFormVisible4Edit = false;
                this.$message.info("当前操作取消");
            },

            // 删除
            handleDelete(row) {
                // console.log(row);
                this.$confirm("此操作永久删除当前信息，是否继续？","提示",{type:"info"}).then(()=>{
                    axios.delete("/books/"+row.id).then((res)=>{
                        if(res.data.flag){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.error("数据同步失败，自动刷新");
                        }
                    }).finally(()=>{
                        //2.重新加载数据
                        this.getAll();
                    });
                }).catch(()=>{
                    this.$message.info("取消操作");
                });
            },

            //弹出编辑窗口
            handleUpdate(row) {
                axios.get("/books/"+row.id).then((res)=>{
                    if(res.data.flag && res.data.data != null ){
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    }else{
                        this.$message.error("数据同步失败，自动刷新");
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });
            },

            //修改
            handleEdit() {
                axios.put("/books",this.formData).then((res)=>{
                    //判断当前操作是否成功
                    if(res.data.flag){
                        //1.关闭弹层
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    }else{
                        this.$message.error("修改失败");
                    }
                }).finally(()=>{
                    //2.重新加载数据
                    this.getAll();
                });
            },

            //条件查询
        }
    })

</script>

</html>

异常处理器

package com.zxd.ssmp.util;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

//作为SpringMVC异常处理器
//@ControllerAdvice
@RestControllerAdvice
public class ProjectExcetionAdvice {

    @ExceptionHandler(Exception.class)
    private R doException(Exception e){
        //记录日志
        e.printStackTrace();
        return new R(false,null,"服务器故障，请稍后再试");
    }
}

解决分页删除最后会空值

@GetMapping("{currentPage}/{size}")
public R getALl(@PathVariable Integer currentPage,@PathVariable Integer size) throws IOException {
    IPage<Book> page = iBookService.getPage(currentPage, size);
    //如果当前页码值大于总页码值，那么重新执行查询操作，使用最大页码作为页码值
    if(currentPage>page.getCurrent()){
        page = iBookService.getPage(currentPage, size);
    }
    return  new R(true,page);
}

努力的小玖心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【SpringBoot】表现层消息一致性处理
STATICHIT静砸的博客
11-03 145
今天写项目配置了axios，一直想把前后端跑通，封装好了前端的请求和axios方法，可以触发后端的接口方法但是无法把数据传回前端，然后师傅的话提醒了我，是我忘记了写统一返回类。这个时候不知道该告诉用户“查询不到数据”还是“查询失败请重试”，这是有本质上的区别的。所以我们可以涉及表现层返回结果的模型类，用于后端与前端进行数据格式统一，也称为。所以光有数据不够，还得设置一个flag变量返回是否成功查询。合作开发项目时，前后端一定要设定前后端数据协议。但是 有时候会查不到东西，得到null。
表现层数据一致性处理，后端传至前端
qq_44760653的博客
02-11 386
表现层数据一致性处理，后端传至前端
表现层消息一致性处理
qq_44798321的博客
11-20 345
一、原因 后端返回的数据格式千篇一律，前端不好处理 数据格式统一后： 解决办法： 第一步：编写工具类 package com.xiaoxu.ssmp.utils; import lombok.Data; @lombok.Data public class Result { private Boolean flag; private Object data; public Result(){ } public Result(Boolean flag
28、表现层消息一致性处理（再使用一个类来整理格式（也就是返回结果模型））
分享java学习路上的一些笔记，不足之处多多见谅。
10-22 111
表现层消息一致性处理（再使用一个类来整理格式（也就是返回结果模型）） 第一步： 第二步：@Data就不用写get/set方法了 第三步：改动controller的BookController方法 第四步：优化（在R类中用构造方法）且所有方法都变为R类型 后面这里不同是因为其中的后数据返回即data 运行结果： 小结
毕业设计&amp;课设-springboot+axios医院信息管理系统.zip
最新发布
06-09
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
结合Vue+axios+SpringBoot开发的用户管理系统
12-15
综上所述，&quot;结合Vue+axios+SpringBoot开发的用户管理系统&quot;是一个涵盖前端开发、后端开发、数据库操作和API设计的综合项目，对于学习和掌握现代Web开发技术具有很高的实践价值。通过这个项目，开发者可以深入理解前后...
基于SpringBoot，Spring Security，JWT，Vue &amp; Element 的前后端分离的.zip
02-04
标题中的&ldquo;基于SpringBoot，Spring Security，JWT，Vue &amp; Element 的前后端分离&rdquo;是指一个现代Web应用程序的构建框架和技术栈。下面将详细解释这些技术及其在实现前后端分离中的作用。 1. **Spring Boot**: Spring ...
VUE学习笔记(五) 引入axios
01-07
VUE学习笔记(一) 环境 VUE学习笔记(二) Visual Studio Code VUE学习笔记(三) 运行VUE VUE学习笔记(四) 引用element-ui VUE学习笔记(五) 引入axios Axios 是一个基于 promise 的 HTTP 库 VUE前端与服务端进行数据交互...
ajax-day01.rar_达内开发学习笔记
09-20
在&ldquo;ajax-day01.rar_达内开发学习笔记&rdquo;这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
springboot前后端统一数据交互方式+统一异常处理
少年Dream
03-21 940
1 前后端统一数据交互方式 1.1 统一结果集 package com.zhmsky.result; import io.swagger.annotations.ApiModelProperty; import lombok.Data; import java.io.Serializable; /** * @author zhmsky * @description 前后端数据统一交互方式 * @date 2022/3/21 0:50 */ @Data public class Result&l
SpringBoot -基于SpringBoot的SSMP整合案例（四）-表现层开发（前后端数据协议统一）
qq_39123467的博客
05-05 479
SpringBoot -基于SpringBoot的SSMP整合案例（四）-表现层开发（前后端数据协议统一）
表现层消息一致性，前后端数据协议
qq_45298704的博客
02-08 374
package com.lele.Controller.utils; import lombok.Data; @Data public class R { private Boolean flag; private Object data; public R(){}; public R(Boolean flag){ this.flag = flag; } public R(Boolean flag,Object data){
python接口自动化脚本_使用 python 进行快速搭建接口自动化测试脚本实战总结
weixin_39772652的博客
11-20 649
一、测试需求介绍：通常，在我们的项目中，我们的接口测试需求一般都是构造不同的请求数据，然后发送请求到接口，拿到接口返回后，对返回的字段进行提取和校验，最后将结果存放在excel表格中方便查阅。接口一般是http或https请求，发送的结构一般是json body或json结合一些文件附件，请求的返回结果都是json格式，我们的测试case可以用Excel或者数据库保存，结果可以保存在数据库或者直接...
springboot 服务最终一致性方案
maple_son的专栏
09-22 1546
目前市面上现有的最终一致性方案有： 1.分布式事务 一致性第一个想到的方案，但性能低下，数据源限制，等等问题，基本没用 2.RPC直调 最便宜，最省事，也是最没有保障的一种方案 3.MQ,KAFKA中间件 使用得最多，也是最容易入坑的方式，看看你的项目中是否有注意以下问题： 0.埋点问题，在一个复杂的业务中，是写个拦截器呢还是所有地方都来埋个点呢？ 1.发送端埋点上报与数据库事务非原子性操作问题，先操作数据库，还是先上报MQ? 2.发送端发送消息是否有确认机制？ 3.发送端发送消息在内存重试过程中
SpringBoot SpringBoot 基础篇 4 基于 SpringBoot 的SSMP 整合案例 4.11 表现层数据一致性处理【R对象】
谢谢你们的关注
11-12 496
SpringBoot SpringBoot 基础篇 4 基于 SpringBoot 的SSMP 整合案例 4.11 表现层数据一致性处理【R对象】
SpringBoot表现层消息一致处理
weixin_51351637的博客
04-18 420
我们以前的表现层开发的模样： http://t.csdn.cn/xitP8 如今表现层开发的模样： 返回null的两种情况 ①id不存在，返回null ② 查询过程中抛异常，catch中返回null 为了避免第二种情况所造成的null，我们可以创建一个R类 创建一个R类（这个类名随便自己定义） import lombok.Data; @Data //get+set+toString+ha......
springboot整合SSMP+Vue+Element-ui+Axios项目 学习笔记2
qq_63708623的博客
04-21 1202
首先，给数据库的表做一下初始化 实体类的开发 在写pojo类时，我们通常的方法是定义一个类，类的成员变量跟表的字段相对应，但在这里我们提供一个更加简便的方法：Lombot 我们先在pom配置文件中添加一个Lombot的坐标 &lt;dependency&gt; &lt;groupId&gt;org.projectlombok&lt;/groupId&gt; &lt;artifactId&gt;lombok&lt;/artifactId&gt; &lt;/dependency&g
Springboot进行SSMP整合案例笔记
weixin_46636063的博客
04-25 1083
学习链接
axios中统一处理异常
06-10
在axios中，我们可以通过在拦截器中统一处理请求和响应的异常来实现异常处理的统一管理。具体来说，我们可以通过axios.interceptors.request.use()和axios.interceptors.response.use()方法来注册请求和响应拦截器。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值