目录

🌲序言

🌴前端代码的引入

🎋约定前后端交互接口

🚩接口定义

🍃后端服务器代码实现

🚩登录接口

🚩图书列表接口

🎄前端代码实现

🚩登录页面

🚩图书列表页

---

🌲序言

由于目前所学知识还不足以完成图书管理系统的开发，后续我们会边学习新的内容，边进行开发

准备工作：创建项目

🌴前端代码的引入

由于本文章只讲述后端内容，前端就直接展示即可。

代码引入：

前端页面展示：

注意：图书列表显示的数据都是前端的假数据

🎋约定前后端交互接口

当前我们先完成登录功能和列表功能：

🚩接口定义

根据需求可以得知,后端需要提供两个接⼝

1. 账号密码校验接⼝:根据输⼊⽤⼾名和密码校验登录是否通过
2. 图书列表:提供图书列表信息

登录接口：

url：/user/login

type：post

参数：json/普通参数userName，password(这里我们定义为普通参数)

返回结果：验证成功返回" "，验证失败返回"用户名或者密码错误"

图书列表接口：

url：/book/getList

type：无要求

参数：无

返回结果：返回图书列表，List<BookInfo>

🍃后端服务器代码实现

由于目前还没有学习应用分层，我们将所创建的类还是存于同一文件下

🚩登录接口

代码：

postman测试：发现当前返回了一个空，请求成功

错误测试：

🚩图书列表接口

BookInfo字段定义：是由"添加图书"和"修改"以及"图书列表展示"信息的字段进行一个融合组成的BookInfo，当前这个三个所有的信息都一样。

图书列表接口代码：

由于这里没有真实数据返回，所以采用"mock"的方式，就是模拟的意思，对于当前也就是造假数据

postman测试：

🎄前端代码实现

🚩登录页面

ajax请求后端数据：

当我们把代码写完之后，我们查看一下登录页面的源代码：发现这里的代码并没有改变，也就是缓存的问题，通过crtl+f5强刷一下

再次查看源代码：此时就有了(若还是不行crtl+shift+delete删除数据，还是不行，查看后端target文件是否将前端代码正确加载，通过clean或者直接删除target文件，重新运行)

正确登录：发生页面跳转

错误登录：弹窗提示

🚩图书列表页

ajax请求数据：

访问book_list页面：

🌳应用分层

学习完该文章就可以对上述代码进行分层：【JavaEE进阶】应用分层-CSDN博客

• controller：里面存放接收前端发送的请求，对请求进⾏处理，并响应数据的代码
• service：里面存放处理具体的业务逻辑的代码。
• dao：里面负责数据访问操作，包括数据的增、删、改、查
• model：里面存放一些固体对象

接下来每个包下面创建以下文件

 

🚩UserController.java

UserController.java 里面存放的是登录相关的代码，负责实现登录用户名与密码的验证。这里并没有进行分层（后续会进行分层）

由于没有连接数据库，咱们这里只用字符串代替验证。访问路径遵守接口文档的规定即可。代码实现如下：

🚩BookController.java

关于图书列表展示这里我做了一个应用分层

BookController.java这里面实现的图书列表信息的返回。具体实现逻辑我放在了BookService.java里面。

因为当前阶段并没有导入数据库，所以我们这里也是使用内存进行存储。并在BookDao.java进行了数据增加操作

对于Book类我放在了BookInfo.java中进行实现，并且在管理对象方面，使用了spring进行管理

BookController.java调用BookService.java:

BookService.java调用BookDao:

BookInfo：