SpringMVC-前后台协议联调

4，前后台协议联调

4.1 环境准备

• 创建一个Web的Maven项目
• pom.xml添加SSM整合所需jar包
• 创建对应的配置类
• 编写Controller、Service接口、Service实现类、Dao接口和模型类
• resources下提供jdbc.properties配置文件

最终创建好的项目结构如下:

1. 将资料\SSM功能页面下面的静态资源拷贝到webapp下。
   

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

• 新建SpringMvcSupport

  @Configuration
  public class SpringMvcSupport extends WebMvcConfigurationSupport {@Overrideprotected 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.itheima.controller","com.itheima.config"})
  @EnableWebMvc
  public class SpringMvcConfig {
  }
  

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

4.2 列表功能

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

1.找到页面的钩子函数，created()

2.created()方法中调用了this.getAll()方法

3.在getAll()方法中使用axios发送异步请求从后台获取数据

4.访问的路径为http://localhost/books

5.返回数据

返回数据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;});
}

4.3 添加功能

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

1.找到页面上的新建按钮，按钮上绑定了@click="handleCreate()"方法

2.在method中找到handleCreate方法，方法中打开新增面板

3.新增面板中找到确定按钮,按钮上绑定了@click="handleAdd()"方法

4.在method中找到handleAdd方法

5.在方法中发送请求和数据，响应成功后将新增面板关闭并重新查询数据

handleCreate打开新增面板

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

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

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

4.4 添加功能状态处理

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

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

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 {@Autowiredprivate 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();
}

4.5 修改功能

需求:完成图书信息的修改功能

1.找到页面中的编辑按钮，该按钮绑定了@click="handleUpdate(scope.row)"

2.在method的handleUpdate方法中发送异步请求根据ID查询图书信息

3.根据后台返回的结果，判断是否查询成功

​ 如果查询成功打开修改面板回显数据，如果失败提示错误信息

4.修改完成后找到修改面板的确定按钮，该按钮绑定了@click="handleEdit()"

5.在method的handleEdit方法中发送异步请求提交修改数据

6.根据后台返回的结果，判断是否修改成功

​ 如果成功提示错误信息，关闭修改面板，重新查询数据，如果失败提示错误信息

scope.row代表的是当前行的行数据，也就是说,scope.row就是选中行对应的json数据，如下:

{"id": 1,"type": "计算机理论","name": "Spring实战 第五版","description": "Spring入门经典教程，深入理解Spring原理技术内幕"
}

修改handleUpdate方法

//弹出编辑窗口
handleUpdate(row) {// console.log(row);   //row.id 查询条件//查询数据，根据id查询axios.get("/books/"+row.id).then((res)=>{if(res.data.code == 20041){//展示弹层，加载数据this.formData = res.data.data;this.dialogFormVisible4Edit = true;}else{this.$message.error(res.data.msg);}});
}

修改handleEdit方法

handleEdit() {//发送ajax请求axios.put("/books",this.formData).then((res)=>{//如果操作成功，关闭弹层，显示数据if(res.data.code == 20031){this.dialogFormVisible4Edit = false;this.$message.success("修改成功");}else if(res.data.code == 20030){this.$message.error("修改失败");}else{this.$message.error(res.data.msg);}}).finally(()=>{this.getAll();});
}

至此修改功能就已经完成。

4.6 删除功能

需求:完成页面的删除功能。

1.找到页面的删除按钮，按钮上绑定了@click="handleDelete(scope.row)"

2.method的handleDelete方法弹出提示框

3.用户点击取消,提示操作已经被取消。

4.用户点击确定，发送异步请求并携带需要删除数据的主键ID

5.根据后台返回结果做不同的操作

​ 如果返回成功，提示成功信息，并重新查询数据

​ 如果返回失败，提示错误信息，并重新查询数据

修改handleDelete方法

handleDelete(row) {//1.弹出提示框this.$confirm("此操作永久删除当前数据，是否继续？","提示",{type:'info'}).then(()=>{//2.做删除业务axios.delete("/books/"+row.id).then((res)=>{if(res.data.code == 20021){this.$message.success("删除成功");}else{this.$message.error("删除失败");}}).finally(()=>{this.getAll();});}).catch(()=>{//3.取消删除this.$message.info("取消删除操作");});
}

接下来，下面是一个完整页面

图书管理
查询新建
取消确定
取消确定