SSM整合——前后端协议联调

之前写的整合没有前端页面，这次添加上前端页面之后，在实现数据的增，删，查，改功能，使前后台可以联合起来，不会SSM整合的朋友可以看博主的前两篇文章

前端页面代码的链接小伙伴们可以自行提取

链接：https://pan.baidu.com/s/13CU3JwNPTQCJxo0pt1YDzA?pwd=6ssm 
提取码：6ssm

1.添加功能

1.在数据层接口中，加入增，删，查，改功能的方法

2.在业务层的接口中，同样定义增，删，查，改功能的方法

3.接着，在业务层中定义这些方法的实现类

4.在控制类中定义请求路径和返回体

package com.example.Controller;

import com.example.Pojo.Book;
import com.example.Service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.xml.crypto.Data;
import java.util.List;

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

    @Autowired
    private BookService bookService;

    @GetMapping("/{id}")
    public Result getById(@PathVariable Integer id) {
        Book book = bookService.getById(id);
        Integer code = book != null? Code.GET_OK:Code.GET_ERR;
        String msg = book != null? "查询成功":"查询失败";
        Result result = new Result(code,book,msg);
        return result;
    }

    @GetMapping("/all")
    public Result getAll() {
        List<Book> all_book = bookService.getAll();
        Integer code = all_book != null? Code.GET_OK:Code.GET_ERR;
        String msg = all_book != null? "查询成功":"查询失败";
        Result result = new Result(code,all_book,msg);
        return result;
    }

    @PostMapping("/save")
    public Result save(@RequestBody Book book) {
        boolean flag = bookService.save(book);
        return new Result(flag?Code.SAVE_OK:Code.SAVE_ERR,flag);
    }

    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable Integer id) {
        boolean flag = bookService.delete(id);
        return new Result(flag?Code.DELETE_OK:Code.DELETE_ERR,flag);
    }

    @PutMapping("/update")
    public Result update(@RequestBody Book book) {
        boolean flag = bookService.update(book);
        return new Result(flag?Code.UPDATE_OK:Code.UPDATE_ERR,flag);
    }
}

2.放行页面请求

我们所以的请求路径都会被SpringMvc 给拦截下来，以至于会导致加载不出来页面，所以对于页面的请求路径需要放行

2.1定义放行配置类

2.2在SpringMvc配置类中加载放行配置类

3.定义功能执行成功或失败的代号

4.在books.html中编写前后台协议

4.1展示全部列表

当我们访问页面首页时，希望在页面首页看到所以的数据信息，我们就发送查询全部的请求，将得到的数据绑定到页面列表

后端协议：

前端展示：

4.2新建功能

4.2.1弹出新建窗口

点击新建之后，可以弹出添加数据的窗口，如果在上一次添加成功之后，不清除里面的数据，会导致在下一次窗口弹出时，会携带上一次的信息，所以弹出窗口的同时，需要重置表单

后端协议：

前端展示：

4.2.2添加数据

在弹出的添加数据的窗口里面写数据，写完后点击确定，如果添加失败则会显示“添加失败”，如果添加成功则会显示“添加成功”，同时会关闭新建窗口，同时调用 getAll() 方法刷新首页的列表，使新增数据能显示

后端协议：

4.3编辑功能

4.3.1弹出编辑窗口

编辑是为了对已有的数据进行修改，所以在编辑窗口中，要显示出之前的数据，可以先获取当前编辑行的 id ，然后根据 id 查询出数据，再把数据绑定到编辑窗口里面，最后再弹出编辑窗口

后端协议：

前端展示：

4.3.2修改数据

在弹出的编辑数据的窗口里面修改数据，修改完后点击确定，如果修改失败则会显示“修改失败”，如果修改成功则会显示“修改成功”，同时会关闭编辑窗口，最后调用 getAll() 方法刷新首页的列表，使修改后的数据能显示

后端协议：

4.4删除数据

点击删除，先弹出提示框，是否确定删除，如果不确定，点击取消，弹出消息“取消删除”，如果确定，点击确定按钮，会获取当前删除行的 id ，然后发送请求进行删除，如果删除失败则会显示“删除失败”，如果删除成功则会显示“删除成功”，最后调用 getAll() 方法刷新首页的列表，使删除后的列表能显示

后端协议：

前端展示：

5.整体架构