基于Spring Boot的SSMP整合案例中

导读:本篇文章讲解 基于Spring Boot的SSMP整合案例中,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、表现层开发

1. 创建表现层的包和类

表现层基于restful制作接口开发:

package com.jf.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.jf.domain.Book;
import com.jf.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

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

    @Autowired
    private IBookService bookService;

    @GetMapping
    public List<Book> getAll(){
        return bookService.list();
    }

    @PostMapping
    public Boolean save(@RequestBody Book book){
        return bookService.save(book);
    }

    @PutMapping
    public Boolean update(@RequestBody Book book){
        return bookService.updateById(book);
    }

    @DeleteMapping("{id}")
    public Boolean delete(@PathVariable Integer id){
        return bookService.removeById(id);
    }

    @GetMapping("{id}")
    public Book getById(@PathVariable Integer id){
        return bookService.getById(id);
    }

    @GetMapping("{currentPage}/{pageSize}")
    public IPage<Book> getPage(@PathVariable int currentPage,int pageSize){
        return bookService.getPage(currentPage,pageSize);
    }
}

接收参数:

  • 实体数据:@RequestBody
  • 路径变量:@PathVariable

postman测试 

基于Spring Boot的SSMP整合案例中

基于Spring Boot的SSMP整合案例中

二、表现层消息一致性处理(R对象)

        目前代码出来的数据有的是json数组,有的是单条json,前端处理起来很麻烦,此时我们可以处理一下表现层消息

        设计表现层返回结果的模型类,用于后端与前端进行数据格式统一,也称为前后端数据协议。

package com.jf.controller.utils;

import lombok.Data;

@Data
public class R {
    private Boolean flag;
    private Object data;

    public R(Boolean flag){
        this.flag = flag;
    }

    public R(){

    }

    public R(Boolean flag,Object data){
        this.flag = flag;
        this.data = data;
    }
}

        表现层接口统一返回值类型结果

package com.jf.controller;

import com.jf.controller.utils.R;
import com.jf.domain.Book;
import com.jf.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

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

    @Autowired
    private IBookService bookService;

    @GetMapping
    public R getAll(){
        return new R(true,bookService.list());
    }

    @PostMapping
    public R save(@RequestBody Book book){
//        R r = new R();
//        boolean flag = bookService.save(book);
//        r.setFlag(flag);
        return new R(bookService.save(book));
    }

    @PutMapping
    public R update(@RequestBody Book book){
        return new R(bookService.updateById(book));
    }

    @DeleteMapping("{id}")
    public R delete(@PathVariable Integer id){
        return new R(bookService.removeById(id));
    }

    @GetMapping("{id}")
    public R getById(@PathVariable Integer id){
        return new R(true,bookService.getById(id));
    }

    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,int pageSize){
        return new R(true,bookService.getPage(currentPage,pageSize));
    }
}

三、前后端协议联调

前后端分离结构设计中页面归属前端服务器

单体工程中页面放置在resources目录下的static目录中(建议执行clean)

1. 前端发送异步请求,调用后端接口

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

        将查询的数据返回到页面,利用前端数据双向绑定进行数据展示。 

基于Spring Boot的SSMP整合案例中

2. 新增功能

2.1 弹出添加窗口

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

2.2 添加

        添加操作结束后动态刷新页面加载数据,根据操作结果不同,显示对应的提示信息

            //添加
            handleAdd () {
                axios.post("/books", this.formData).then(res => {
                    // 判断当前操作是否成功
                    if(res.data.flag) {
                        // 1.关闭弹层
                        this.dialogFormVisible = false;
                        this.$message.success(res.data.msg);
                        //this.$message({message: '恭喜你,添加成功',type: 'success' });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    // 2.重新加载数据
                    this.getAll();
                });
            },

2.3 清除数据

        弹出添加div时清除表单数据

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

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

2.4 取消添加

            //取消
            cancel(){
                this.dialogFormVisible = false;
                this.$message.info("当前操作取消!");
            },

3. 删除功能

        删除操作需要传递当前行数据对应的id值到后台;删除操作结束后动态刷新页面加载数据;根据操作结果不同,显示对应的提示信息;删除操作前弹出提示框避免误操作

            // 删除
            handleDelete(row) {
                // console.log(row);
                //1.弹出提示框,防止看错删除别的数据
                this.$confirm("删除的数据将不可恢复,是否继续?", "提示", {type: "info"}).then(() => {
                    //2.删除业务
                    axios.delete("/books/" + row.id).then(res => {
                        if (res.data.flag) {
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).finally(() => {
                        this.getAll();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消操作");
                });
            },

4. 修改功能

        弹出修改窗口,加载要修改数据通过传递当前行数据对应的id值到后台查询数据;利用前端数据双向绑定将查询到的数据进行回显。

            //弹出编辑窗口
            handleUpdate(row) {
                // 发送异步请求
                axios.get("/books/" + row.id).then(res => {
                    // console.log(res.data);
                    if (res.data.flag && res.data.data != null) {
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },

         修改,请求方式使用PUT调用后台对应操作;修改操作结束后动态刷新页面加载数据(同新增);根据操作结果不同,显示对应的提示信息(同新增);修改取消功能在取消功能添一行代码即可。

            //修改
            handleEdit() {
                axios.put("/books", this.formData).then(res => {
                    // 判断当前操作是否成功
                    if(res.data.flag) {
                        // 1.关闭弹层
                        this.dialogFormVisible4Edit = false;
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    // 2.重新加载数据
                    this.getAll();
                });
            },
            //取消
            cancel(){
                this.dialogFormVisible = false;
                this.dialogFormVisible4Edit = false;
                this.$message.info("当前操作取消!");
            },

5. 异常消息处理

        对异常进行统一处理,出现异常后,返回指定信息,使用注解@RestControllerAdvice定义SpringMVC异常处理器用来处理异常的,异常处理器必须被扫描加载,否则无法生效。

package com.jf.controller.utils;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RestControllerAdvice;

/**
 * springmvc的异常处理器
 */
//@ControllerAdvice
@RestControllerAdvice
public class ProjectExceptionAdvice {
    // 拦截所有的异常信息
    @ExceptionHandler(Exception.class)
    public R doException(Exception ex) {
        // 记录日志
        // 通知运维
        // 通知开发
        ex.printStackTrace();
        return new R(false,null,"服务器故障,请稍后再试");
    }
}

        修改表现层返回结果的模型类,封装出现异常后对应的信息。表现层返回结果的模型类中添加消息属性用来传递消息到页面。

package com.jf.controller.utils;

import lombok.Data;

/**
 * @Description 发给前端的统一数据格式
 */
@Data
public class R {
    private Boolean flag;
    private Object data;
    private String msg;

    public R(Boolean flag){
        this.flag = flag;
    }

    public R(){

    }

    public R(Boolean flag, String msg) {
        this.flag = flag;
        this.msg = msg;
    }

    public R(String msg) {
        this(false, msg);
    }

    public R(Boolean flag, Object data) {
        this.flag = flag;
        this.data = data;
    }

    public R(Boolean flag, Object data,String msg) {
        this.flag = flag;
        this.data = data;
        this.msg = msg;
    }
}

        页面消息处理,没有传递消息加载默认消息,传递消息后加载指定消息

基于Spring Boot的SSMP整合案例中

        可以在表现层中进行消息统一处理

    @PostMapping
    public R save(@RequestBody Book book) throws IOException {
        Boolean flag = bookService.save(book);
        return new R(flag,flag ? "添加成功":"添加失败");
    }

基于Spring Boot的SSMP整合案例下_萧篱衣的博客-CSDN博客 

下载地址:基于SpringBoot的SSMP整合案例-Java文档类资源-CSDN下载

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/111721.html

(0)
Java光头强的头像Java光头强

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!