【Spring MVC】如何运用应用分层思想实现简单图书管理系统前后端交互工作

用户11288949

发布于 2025-01-17 13:56:52

9400

代码可运行

文章被收录于专栏：学习学习

运行总次数：0

代码可运行

📚️1.图书管理系统

和之前的几次登录的前后端交互的思路是基本一致的，通过规定前后端交互的接口的实现，我们这里要明白，这个过程的重要意义；

1.1交互接口

登录接口

如下所示：

[URL] POST /user/login [请求参数] name=admin&password=admin [响应] true //账号密码验证成功 false//账号密码验证失败

图书列表展示

如下所示：

[URL] POST /book/getList [ 请求参数 ] ⽆ [ 响应 ] 返回图书列表 [ { "id": 1, "bookName": " 活着 ", "author": " 余华 ", "count": 270, "price": 20, "publish": " 北京⽂艺出版社 ", "status": 1, "statusCN": " 可借阅 " }, ... ]

1.2后端代码实现

1.对象属性的初始化

可以看到此时由于存在大量的是数据，所以我们需要把这些属性放在一个对象中，达到统一管理的目的；不可能直接在后端响应的参数中直接通过参数定义来进行操作；

代码如下所示：

public class BookInfo {
    //图书ID
    private Integer id;
    //书名
    private String bookName;
    //作者
    private String author;
    //数量
    private Integer count;
    //定价
    private BigDecimal price;
    //出版社
    private String publish;
    //状态 0-⽆效 1-允许借阅 2-不允许借阅
    private Integer status;
    private String statusCN;

解释：

这里小编没有定义构造函数，get与set方法，是因为：小编在上期讲解过，我们添加了lombok包中的Data的注解，所以这里进行了反编译（编译器生成代码的一种工具包），所以帮我们编写了get 与set方法；

2.实现用户登录

和之前的案例的样式基本是一致的，URL路由映射，判断拿到的参数是否符合要求，并进行对应的逻辑处理，返回对应的类型的值

代码如下所示：

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("/login")
    public boolean login(String userName, String password, HttpSession session){
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){
            return false;
        }
        if("admin".equals(userName) && "admin".equals(password)){
            return true;
        }
        return false;
    }
}

解释：

第一个if判断，拿到的参数是否是为空的，如果为空那么就返回false，反之进入下一个判断；

第二个if判断，这里的文本是否是我们规定的文本（这一步就是判断密码用户是否正确）（这里写死了！）

3.实现图书获取

由于没有连接数据库，所以这里小编将进行mock的数据方式，进行数据的模拟，方便我们通过postman进行测试

代码如下所示：

@RequestMapping("/book")
@RestController
public class BookController {
    @RequestMapping("/getList")
    public List<BookInfo> getList(){
        //获取数据
        List<BookInfo> books = mockData();
        //处理⻚⾯展⽰
        for (BookInfo book:books){
            if (book.getStatus()==1){
                book.setStatusCN("可借阅");
            }else {
                book.setStatusCN("不可借阅");
            }
        }
        return books;
    }
    public List<BookInfo> mockData() {
        List<BookInfo> books = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            BookInfo book = new BookInfo();
            book.setId(i);
            book.setBookName("书籍" + i);
            book.setAuthor("作者" + i);
            book.setCount(i * 5 + 3);
            book.setPrice(new BigDecimal(new Random().nextInt(100)));
            book.setPublish("出版社" + i);
            book.setStatus(1);
            books.add(book);
        }
        return books;
    }
}

解释：

这里的数据模拟，大家可以简单看看，具体的数据逻辑处理就是在判断书籍的借出的状态，当这里的状态是1的时候就是不可借阅的状态，反之如果是2，就是可以借阅的状态；

4.postman进行测试

此时我们用户登录的测试，输入正确的userName与password参数进行测试：

此时的返回的值就是true，说明我们的代码是没有问题的；

1.3前端代码实现

由于小编不是专业的前端程序员，所以小编主要讲解一下前端的核心代码即可：

<script>
  function login() {
    $.ajax({
      url:"user/login",
      type:"post",
      data:{
        userName:$("#userName").val(),
        password:$("#password").val()
      },
      success: function (result) {

        if(result){
          location.href="/book_list.html"
        }else {
          alert("用户名或密码错误")
        }
      }
    })
  }

解释：

这里主要是通过URL进行传递参数的地址，Ajax方法实现这里的要求，拿到这里的username与password，传递给后端服务器，，拿到返回值，进行对应事务的处理；

getBookList();
        function getBookList() {
            $.ajax({
                type: "get",
                url: "/book/getList",
                success: function (result) {
                    console.log(result);
                    if (result != null) {
                        var finalHtml = "";
                        for (var book of result) {
                            finalHtml += '<tr>';
                            finalHtml += '<td><input type="checkbox" name="selectBook"value="' + book.id + '" id="selectBook" class="book-select"></td>';
                            finalHtml += '<td>' + book.id + '</td>';
                            finalHtml += '<td>' + book.bookName + '</td>';
                            finalHtml += '<td>' + book.author + '</td>';
                            finalHtml += '<td>' + book.count + '</td>';
                            finalHtml += '<td>' + book.price + '</td>';
                            finalHtml += '<td>' + book.publish + '</td>';
                            finalHtml += '<td>' + book.statusCN + '</td>';
                            finalHtml += '<td><div class="op">';
                            finalHtml += '<a href="book_update.html?bookId=' + book.id
                                + '">修改</a>';
                            finalHtml += '<a href="javascript:void(0)"onclick="deleteBook(' + book.id + ')">删除</a>';
                            finalHtml += '</div></td>';
                            finalHtml += "</tr>";
                        }
                        $("tbody").html(finalHtml);
                    }
                }
            });
        }

解释：

本段代码主要是负责，拿到后端数据对象中的数据，通过循环遍历，然后拿到每一个对象后，进行每个属性的拼接；

成果展示：

点击登录后：

注意：

1.这里的数据是小编进行模拟的数据，是没有实际意义的

2.这里的前端代码是小编这里自己的模版，需要的uu可以私信小编哦~~~

📚️2.应用分层

通过上⾯的练习, 我们学习了Spring MVC简单功能的开发, 但是我们也发现了⼀些问题⽬前我们程序的代码有点"杂乱", 然⽽当前只是"⼀点点功能"的开发. 如果我们把整个项⽬功能完成呢?

代码会更加的"杂乱⽆章"(⽂件乱, 代码内容乱)

2.1介绍

阿⾥开发⼿册中, 关于⼯程结构部分, 定义了常⻅⼯程的应⽤分层结构:

但是这个仅供参考即可；

1.什么是应用分层

应⽤分层是⼀种软件开发设计思想, 它将应⽤程序分成N个层次, 这N个层次分别负责各⾃的职责, 多个层次之间协同提供完整的功能. 根据项⽬的复杂度, 把项⽬分成三层, 四层或者更多层.

常⻅的MVC设计模式, 就是应⽤分层的⼀种具体体现.

2.为什么要分层

⼤量的代码混在⼀起，会出现逻辑不清晰、各模块相互依赖、代码扩展性差、改动⼀处就牵⼀发⽽动全⾝等问题

总结就是：“高内聚，低耦合”；

3.如何分层(三层架构)

Model（模型）， View（视图）和Controller（控制器）三个层次，也就是将⽤⼾视图和业务处理隔离开，并且通过控制器连接起来，很好地实现了表现和逻辑的解耦，是⼀种标准的软件分层构。

如下图所示：

可以看到这是一个标准的MVC架构思想；

由于现在的前后端分离的原因：

所以对于Java后端开发者, ⼜有了⼀种新的分层架构: 把整体架构分为表现层、业务逻辑层和数据层. 这种分层⽅式也称之为"三层架构".

1. 表现层: 就是展⽰数据结果和接受⽤⼾指令的，是最靠近⽤⼾的⼀层； 2. 业务逻辑层: 负责处理业务逻辑, ⾥⾯有复杂业务的具体实现； 3. 数据层: 负责存储和管理与应⽤程序相关的数据

按照上⾯的层次划分, Spring MVC 站在后端开发⼈员的⻆度上, 也进⾏了⽀持, 把上⾯的代码划分为三个部分:

• Controller：控制层。接收前端发送的请求，对请求进⾏处理，并响应数据。 • • Service：业务逻辑层。处理具体的业务逻辑。 • Dao：数据访问层，也称为持久层。负责数据访问操作，包括数据的增、删、改、查

4.MVC 和三层架构的区别和联系

MVC模式：强调数据和视图分离, 将数据展⽰和数据处理分开, 通过控制器对两者进⾏组合. 三层架构：强调不同维度数据处理的⾼内聚和低耦合, 将交互界⾯, 业务处理和数据库操作的逻辑分开.⻆度不同也就谈不上互相替代了，在⽇常的开发中可以经常看到两种共存的情况

但是两者的目的：都是"解耦，分层，代码复⽤"（高内聚，低耦合）

2.2代码重构

此时我们实现分层应用的思想实现上述代码的改进：

1.建立各个功能的包

此时就对应了三层架构的思想模式；

这里多了一个包就是实体类，用model来进行存储；

2.Dao数据层

此时就是负责拿到每个数据的存储：

public class BookDao {
    public List<BookInfo> mockData(){
        List<BookInfo> books=new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            BookInfo book = new BookInfo();
            book.setId(i);
            book.setBookName("书籍" + i);
            book.setAuthor("作者" + i);
            book.setCount(i * 5 + 3);
            book.setPrice(new BigDecimal(new Random().nextInt(100)));
            book.setPublish("出版社" + i);
            book.setStatus(1);
            books.add(book);
        }
        return books;
    }
}

将这里的模拟mock数据进行存储在列表里；

3.Service业务逻辑层

这里就是进行业务逻辑处理，这里要处理的数据就是判断这本书的状态，判断为1还是为2；

代码如下：

public class BookService {
    public List<BookInfo> getBookList(){
        BookDao bookDao=new BookDao();
        List<BookInfo> books=bookDao.mockData();
        for (BookInfo book : books) {
            if (book.getStatus() == 1) {
                book.setStatusCN("可借阅");
            } else {
                book.setStatusCN("不可借阅");
            }
        }
        return books;
    }

解释：

这里要注意，这里的数据是从哪里来的，很明显是从模拟数据包这类里来的，所以要先创建一个对象，拿到这里面的数据，然后进行相应的数据逻辑处理；

4.Controller表现层

这里就是负责数据的获取，从前端拿到数据，并返回处理过后的数据：

这里的数据的获取就是如下的：

@RequestMapping("/book")
@RestController
public class BookController {
    @RequestMapping("/getList")
    public List<BookInfo> getList() {
        //获取数据
        BookService bookService = new BookService();
        List<BookInfo> books = bookService.getBookList();
        //处理⻚⾯展⽰
        return books;
    }
}

解释：

这里就是拿到业务逻辑处理过后的数据，所以要拿到这个对应的对象，然后返回给前端，实现数据的交互；

这里的用户也是没有变动的，小编就不在进行演示了；