SSM整合-前后台协议联调（列表功能、添加功能、添加功能状态处理、修改功能、删除功能）

目录

一、列表功能

二、添加功能

​三、添加功能状态处理

四、修改功能

五、删除功能

---

一、列表功能

SpringMVC设定拦截了所有路径，它把页面的请求也拦截了，如果去访问页面，一定找不到，过不了SpringMVC，所以需要加一个新的配置类，进行资源的放行。

SpringMvcSupport配置类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@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/");
    }
}

写完配置之后，要让SpringMVC加载上，在@ComponentScan进行加载。

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

发送ajax请求，得到返回值，让当前的数据模型加载从后台传进来的数据

books.html

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

页面列表展示效果

 二、添加功能

弹出添加窗口功能

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

添加功能

//添加
           handleAdd () {
               //发送ajax请求
               axios.post("/books",this.formData).then((res)=>{
                   //如果操作成功，关闭弹层，显示数据
                       this.dialogFormVisible = false;
                       this.getAll();
               });
           },

添加功能效果

 添加成功后效果 

三、添加功能状态处理

给添加功能状态处理，如有异常进行状态显示，无异常成功。

//添加
           handleAdd () {
               //发送ajax请求
               axios.post("/books",this.formData).then((res)=>{
                   console.log(res.data);
                   //如果操作成功，关闭弹层，显示数据
                   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();
               });
           },

 添加成功效果

 

 在BookServiceImpl中添加受影响行数大于0，受影响行数大于0为真，等于0为假

    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;
    }

添加操作时输入大于数据表要求字段的最大长度20，既能得到失败效果

 

 因为做了双向绑定，所以会进行回显，进行重置表单，在弹出添加功能进行调用。

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

四、修改功能

弹出编辑窗口，根据id查询，进行展示弹层，加载数据。

//弹出编辑窗口
           handleUpdate(row) {
               //查询数据，根据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);
                   }
               });
           },

 编辑窗口效果

 编辑功能与添加功能差不多，修改put请求及修改相应的状态码和对应的提示信息即可。

//编辑
           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();
               });
           },

修改成功功能效果

 

 修改失败功能效果

 

 五、删除功能

弹出提示框，提示操作，根据id进行删除，还进行取消删除操作提示。

// 删除
           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("取消删除操作");
               });
           }

删除提示框效果

删除成功效果

 删除取消效果