Java SSM实现前后端协议联调详解上篇

更新时间：2022年08月19日 14:28:34 作者：十八岁讨厌编程

首先我们已经知道，在现在流行的“前后端完全分离”架构中，前后端联调是一个不可能避免的问题，这篇文章主要介绍了Java SSM实现前后端协议联调过程

环境准备

项目结构与前文相同：

我们添加新的静态资源：

因为添加了静态资源，SpringMVC会拦截，所有需要在SpringConfig的配置类中将静态资源进行放行：

我们新建SpringMvcSupport

@Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
    }
}

配置完成后，我们要在SpringMvcConfig中扫描SpringMvcSupport：

@Configuration
@ComponentScan({"com.nefu.controller","com.nefu.config"})
@EnableWebMvc
public class SpringMvcConfig {
}

接下来我们就需要将所有的列表查询、新增、修改、删除等功能一个个来实现下。

列表功能

需求:页面加载完后发送异步请求到后台获取列表数据进行展示。

找到页面的钩子函数，created()
created()方法中调用了this.getAll()方法
在getAll()方法中使用axios发送异步请求从后台获取数据
访问的路径为http://localhost/books
返回数据

返回数据res.data的内容如下:

{
"data": [
{
"id": 1,
"type": "计算机理论",
"name": "Spring实战第五版",
"description": "Spring入门经典教程，深入理解Spring原理技术内幕"
},
{
"id": 2,
"type": "计算机理论",
"name": "Spring 5核心原理与30个类手写实践",
"description": "十年沉淀之作，手写Spring精华思想"
},...
],
"code": 20041,
"msg": ""
}

发送方式:

getAll() {
    //发送ajax请求
    axios.get("/books").then((res)=>{
        this.dataList = res.data.data;
    });
}

添加功能

需求:完成图片的新增功能模块

找到页面上的新建按钮，按钮上绑定了@click="handleCreate()"方法
在method中找到handleCreate方法，方法中打开新增面板
新增面板中找到确定按钮,按钮上绑定了@click="handleAdd()"方法
在method中找到handleAdd方法
在方法中发送请求和数据，响应成功后将新增面板关闭并重新查询数据

handleCreate打开新增面板

handleCreate() {
    this.dialogFormVisible = true;
},

handleAdd方法发送异步请求并携带数据

handleAdd () {
    //发送ajax请求
    //this.formData是表单中的数据，最后是一个json数据
    axios.post("/books",this.formData).then((res)=>{
        this.dialogFormVisible = false;
        this.getAll();
    });
}

添加功能状态处理

基础的新增功能已经完成，但是还有一些问题需要解决下:

需求:新增成功是关闭面板，重新查询数据，那么新增失败以后该如何处理?

1.在handlerAdd方法中根据后台返回的数据来进行不同的处理

2.如果后台返回的是成功，则提示成功信息，并关闭面板

3.如果后台返回的是失败，则提示错误信息

(1)修改前端页面

handleAdd () {
    //发送ajax请求
    axios.post("/books",this.formData).then((res)=>{
        //如果操作成功，关闭弹层，显示数据
        if(res.data.code == 20011){
            this.dialogFormVisible = false;
            this.$message.success("添加成功");
        }else if(res.data.code == 20010){
            this.$message.error("添加失败");
        }else{
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getAll();
    });
}

(2)后台返回操作结果，将Dao层的增删改方法返回值从void改成int

public interface BookDao {
//    @Insert("insert into tbl_book values(null,#{type},#{name},#{description})")
    @Insert("insert into tbl_book (type,name,description) values(#{type},#{name},#{description})")
    public int save(Book book);
    @Update("update tbl_book set type = #{type}, name = #{name}, description = #{description} where id = #{id}")
    public int update(Book book);
    @Delete("delete from tbl_book where id = #{id}")
    public int delete(Integer id);
    @Select("select * from tbl_book where id = #{id}")
    public Book getById(Integer id);
    @Select("select * from tbl_book")
    public List<Book> getAll();
}

(3)在BookServiceImpl中，增删改方法根据DAO的返回值来决定返回true/false

@Service
public class BookServiceImpl implements BookService {
    @Autowired
    private BookDao bookDao;
    public boolean save(Book book) {
        return bookDao.save(book) > 0;
    }
    public boolean update(Book book) {
        return bookDao.update(book) > 0;
    }
    public boolean delete(Integer id) {
        return bookDao.delete(id) > 0;
    }
    public Book getById(Integer id) {
        if(id == 1){
            throw new BusinessException(Code.BUSINESS_ERR,"请不要使用你的技术挑战我的耐性!");
        }
//        //将可能出现的异常进行包装，转换成自定义异常
//        try{
//            int i = 1/0;
//        }catch (Exception e){
//            throw new SystemException(Code.SYSTEM_TIMEOUT_ERR,"服务器访问超时，请重试!",e);
//        }
        return bookDao.getById(id);
    }
    public List<Book> getAll() {
        return bookDao.getAll();
    }
}

(4)测试错误情况，将图书类别长度设置超出范围即可

处理完新增后，会发现新增还存在一个问题，

新增成功后，再次点击新增按钮会发现之前的数据还存在，这个时候就需要在新增的时候将表单内容清空。

resetForm(){
	this.formData = {};
}
handleCreate() {
    this.dialogFormVisible = true;
    this.resetForm();
}

到此这篇关于Java SSM实现前后端协议联调详解上篇的文章就介绍到这了,更多相关Java前后端协议联调内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

SpringBoot中的分布式追踪及使用详解
随着互联网应用程序的复杂性不断增加，分布式系统已经成为了许多企业级应用程序的标配，由于服务之间的调用关系错综复杂，很难追踪到一个请求在整个系统中的执行路径和时间，为了解决这个问题，本文将介绍SpringBoot中的分布式追踪技术及其使用方法
2023-07-07
java必学必会之方法的重载(overload)
java必学必会之方法的重载，介绍了方法的重载、构造方法的重载，想要学好java方法的重载的朋友一定要好好阅读这篇文章
2015-12-12
spring boot对敏感信息进行加解密的项目实现
本文主要介绍了spring boot对敏感信息进行加解密的项目实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
java实现Xml与json之间的相互转换操作示例
这篇文章主要介绍了java实现Xml与json之间的相互转换操作,结合实例形式分析了Java xml与json相互转换工具类的定义与使用相关操作技巧,需要的朋友可以参考下
2019-06-06
Java多线Condition条件变量正确使用方法详解
这篇文章主要为大家,介绍了Java多线Condition条件变量正确使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
JUnit5常用注解的使用
注解是JUnit的标志性技术，本文就来对它的20个注解，以及元注解和组合注解进行学习，感兴趣的可以了解一下
2021-07-07
Spring事件监听机制观察者模式详解
这篇文章主要为大家介绍了Spring事件监听机制观察者模式实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
SpringBoot如何优雅实现接口参数验证
为了保证参数的正确性,我们需要使用参数验证机制,来检测并处理传入的参数格式是否符合规范,所以本文就来和大家聊聊如何优雅实现接口参数验证吧
2023-08-08
基于binarywang封装的微信工具包生成二维码
这篇文章主要介绍了基于binarywang封装的微信工具包生成二维码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Springboot程序在使用Maven下载依赖时失效的解决方法
以前能成功创建SpringBoot项目并运行,但是现在再创建新项目时Maven下载依赖失败,且maven依赖刷新按键一直没反应,所以本文给大家介绍了Springboot程序在使用Maven下载依赖时失效的解决方法,需要的朋友可以参考下
2024-05-05