[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 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 getAll() { return bookDao.getAll(); } }
(4)测试错误情况，将图书类别长度设置超出范围即可

处理完新增后，会发现新增还存在一个问题，
新增成功后，再次点击 新增 按钮会发现之前的数据还存在，这个时候就需要在新增的时候将表单内容清空。
resetForm(){ this.formData = {}; } handleCreate() { this.dialogFormVisible = true; this.resetForm(); }

（1）新一代博客平台，可以全新的创作和管理体验；颜值最高的博客平台；新时代学生用WRITE-BUG；

（2）QQ群、微信群，内部分享文件的好去处：WRITE-BUG云频道，超大空间、在线预览、协同编辑；新一代的“轻社交”平台，专业做大学生交流！

（3）代码托管不用翻墙、不用魔法，不需要学习GIT命令，直接上传/下载代码，支持GIT 版本管理、内置代码质量评估，一键为代码体检

此外，您还可以加入自己感兴趣的“ 数字空间 ”(学习圈)，直接开聊、参与讨论。

WRITE-BUG数字空间用户体验极好，可以按需自由选择组合，是程序员同学必备的一款工具。