怎样设计静态网站页面营销网站建设选择
目录
🌲序言
🌴前端代码的引入
🎋约定前后端交互接口
🚩接口定义
🍃后端服务器代码实现
🚩登录接口
🚩图书列表接口
🎄前端代码实现
🚩登录页面
🚩图书列表页
🌲序言
由于目前所学知识还不足以完成图书管理系统的开发，后续我们会边学习新的内容，边进行开发
准备工作：创建项目
🌴前端代码的引入
由于本文章只讲述后端内容，前端就直接展示即可。
代码引入：
前端页面展示：
注意：图书列表显示的数据都是前端的假数据
🎋约定前后端交互接口
当前我们先完成登录功能和列表功能：
🚩接口定义
根据需求可以得知,后端需要提供两个接⼝
- 账号密码校验接⼝:根据输⼊⽤⼾名和密码校验登录是否通过
- 图书列表:提供图书列表信息
登录接口：
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：