JavaWeb商城项目笔记--- Day1 (商品分页思想)
这里首先通过之前做的Javaweb项目中的分页来做为例子,来梳理其中关于分页信息的思想
功能的样式
-
用户通过链接 or 其他方式发起一个请求,而这个请求响应回来的数据要以分页的方式呈现我们查询到的数据:每一页只显示指定数量的数据。
-
我们在****中随便进行一次测试
- 首先,我们发起一个会触发查询的请求(随便搜索一些东西)
- 然后我们观察这次请求呈现的结果
3.我们在观察点击了其他页面之的跳转请求
4.我们再次观察这次请求响应回来的数据(这里使用火狐浏览器的自带网络查看插件)- 可以看到,我们点击了某个页码之后,页面响应回来了这么多数据(查了一下页面的链接数量,我们能确定这次响应回来了10条数据)
- 我们在观察百度搜索中,随意搜索一些东西之后它的分页情况布局
- 首先,我们发起一个会触发查询的请求(随便搜索一些东西)
-
接下来我们需要思考,当用户点击了某个页码序号后:
1. 这次请求是如何发送的?是否传递了参数?传递了哪些参数?
2. 业务层进行了哪些操作?又向数据库发起了哪些操作?
3. 数据库操作结束之后返回了哪些数据?
4. 前端怎样接收这些数据?又如何以分页的格式最终呈现给用户?
功能的思考
-
在这整个的请求的发起,后台响应,前端渲染数据呈现给用户的过程中。
有一个极为重要的参数:即指定跳转的页码 *
例如我们上文测试中,默认的页码 1 和我们测试点击的页码 3
无论你是点击制定的页码,还是上一页,下一页,首页,尾页,都是页码 -
对于前端而言,当用户点击了某个页码,前端就会向后台索取一份数据,这份数据是所有数据按照一定的顺序排列之后,恰巧处于这一页的一份集合。然后前端将这份数据依照一定的布局(例如我们上面测试****搜索中,响应回来的数据经过关键字变色,超链接等方式,最终呈现的给用户的是左面的样式),呈现给用户。
-
现在问题来了:我们知道点击页码之后,响应回来了一份数据,那么这份数据都包括什么?
-
从上文的示例中,我们发现它包含了如下:
①:一共有多少条记录
②:一个数据集合,包含当前页的信息的集合 -
也可以有其他如当前页码、总页码、每页记录数等
-
这些数据是驳杂而分散的,因此我们考虑将这些可能会用到的数据封装到一起,组合成一个JavaBean。
-
每当用户点击了某个页码之后,我们返回这样一个Javabean,然后前端从这个返回的数据中拿出需要的信息,并呈现给用户。
一个简单的分页实例
- 首先是我们要做什么样的页面,由于是梳理分页思想,因此我们考虑尽可能多的实现分页模块中中可能出现的部分。因此我们尝试做这样一个类型的页面:
- 这其中包括的分页功能:数据集合,当前页,总页数,每页显示的数量,总记录数,首页,上一页,指定页,下一页,尾页。
- 在这其中,首页,上一页,指定页,下一页,尾页都属于页码,同属一类
- 因此,对于这个实例中,我们组合这样一个 Javabean
- 也就是说,当用户点击了某一页之后,我们返回这个一个 javabean 到前端。然后,我们从中抽取出List 集合放置到第一个红框中的学生信息显示。然后我们取出其他的信息,组成第二个红框中的内容。
代码的逻辑
-
前端请求的发起:
这里,我们点击某一个页面的时候,我们观察左下角的跳转路径,可以发现我们向 StudentListPage这个Servlet跳转,并且传递了一个名为 currentPage ,值为 3 的参数
-
Servlet 层
在 Serlvet 层,我们主要做了3件事情:
①:接收将要跳转的页码的数值
②:根据这个页码的数值,调用 Service 层,获取一份 Javabean 类型的数据
③:将数据响应回前端 -
Service 层
Service 层主要是对这个 Javabean 类进行封装,通过调用 dao 来得到 Javabean 需要的数据,并且赋值。最终传递回一个完整的 Javabean。
-
Dao 层
Dao 层主要是对 Service 层的一些需要的数据库操作进行了具体的实现。
-
前端如何接收和处理数据
1. 首先是方框1中学生数据的显示,这里使用 JSTL 语句遍历这里需要注意的是,Lsit集合是从属于Javabean的,调用时候需要取 baen中的List,然后再进行遍历
2. 其次是红框2中的部分这里主要就是根据前端的布局,从 bean 中获取需要的数据发,放到合适的位置即可。
功能的总结
- 这部分有两个需要注意的地方
- 如何根据需求组装Javabean
- 如何根据页码值,通过 sql 语句找到符合页码和每页显示数量两个条件约束下的数据
- 不管上一页,下一页,首页,尾页,都是通过页码找数据,本质上是一样的,因此前端只需要对页码进行加减之后传递这个参数到业务层即可
- 当获取到了这个 Javabean 之后,前端的布局就比较简单了,只需要将数据通过 Html+Css 的方式放置到要求的位置即可。
代码分享
- 具体下载链接和下载注意事项,以及可能出错的提示,请参考之前写的这篇博客:https://blog.****.net/qq_36654606/article/details/86633857
- Tip:这次的案例也是取自之前的博客中的项目