javaEE010.02 分页三(下):实现分页、实现前端分页功能无价格区间查询版和有价格区间查询、项目第四阶段完结

系列文章目录

前言

在这里插入图片描述

一、实现前端分页功能

实际上很简单,只要把页码像上一篇文章那样,说清楚就好了
先把样式调出来,跟上一篇文章类似,可以参考上一篇

但是我们在那个基础上,做一个优化,就像百度一样,当然风格不一样,我们只做5个
在这里插入图片描述
我们看这5个页码怎么变化
在这里插入图片描述
肯定不能写死
那么怎么处理呢?我们写到循环里面
在这里插入图片描述
在这里插入图片描述
思路就是这样,
在这里插入图片描述

现在我们需要把页面改造一下,新建一个文件夹
在这里插入图片描述
在这里插入图片描述
client:表示客户端的页面
在这里插入图片描述
那在项目当中我们index一般怎么做呢?
删掉?不会吧不会吧,这么粗暴?
我们应该这么做,因为它没有显示的意义了,但是index我们不能完全删掉,因为它是默认页面呀(直接没有index页面会报404)
在这里插入图片描述
我们可以这样做 访问index的时候去请求servlet 然后 servlet 跳转到 book_client
我们用这种风格(或者用静态包含)
直接请求BookServlet好吗?其实不好
因为我们现在的BookServlet它的作用是处理后端的业务
如果项目比较大的情况下,业务交叉就不合适了,所以我们可以再造一个专门处理index跳转的servlet
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里的转发就很简单了,直接执行这个方法就行了

在这里插入图片描述
下一步怎么做呢?

在这里插入图片描述

F12看看
在这里插入图片描述
我们发现这个框是 b_list
我们需要做的就是删掉其它的(3个)
留一个了就可以了,,然后进行循环即可
在这里插入图片描述
严格来说还是要加requestScope
因为你加了,他就直接找这个域了,你要是没加
他会智能去找,先找pageScope,发现没有,就找第二个域,就是我们这个requestScope
所以,加了严格来说,效率会高一点点
在这里插入图片描述
然后就可以测试看看了(关于图片,我们暂时没有处理,全部图片都是默认的,我们也可以自己处理)
在这里插入图片描述
跟上一篇文章不同的就是风格不一样,
上一篇是横向显示的
这一篇是纵向显示的,并且有图片
接下来怎么做啥呢
分页,我们要去跟分页做对接
在这里插入图片描述
拿来主义,它不香吗
在这里插入图片描述
真实数据弄过来——>加真实页码——>实现分页
下面就是实现分页了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这一个模块,现在剩下最后一个步骤

动态显示页码——找规律以及解决办法

就是循环的时候,我们写死了,实际上不应该固定死只有5
在这里插入图片描述
应该是动态的才对
在这里插入图片描述
在这里插入图片描述
分析:
totalPageNo<5
begin=1
end=totalPageNo

totalPageNo>=5
pageNo<=3
begin=1
end=5

pageNo>3 && pageNo<=totalPageNo-2
begin=pageNo-2
end=pageNo+2

pageNo > totalPageNo-2
begin=totalPageNo-4
end=totalPageNo

分析清楚以后,我们就是el和jstl里面的 if-else - if(C#l里面直接用aspx的<% %> 就可以了)
怎么写呢?
在这里插入图片描述
变量随着条件 test 变化而变化
在这里插入图片描述
框架搭好,把条件放进来就好了
在这里插入图片描述
然后测试

在这里插入图片描述
完美,
不管以后我们写那种思路都是一样的,只是改一改条件那些而已
然后就是实现一下跳转
在这里插入图片描述
这个跟上一篇文章是一样的,可以直接复制
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、实现前端分页功能+有价格区间查询版

什么叫带价格区间查询
其实这个是跟分页没有直接关系的,但是他们可以有联系,严格来说就是一个扩展
比如我们在分页的时候,客户想加个条件,而我们这里的条件就是价格(虽然也可以是其它,我们这里条件以价格为例)
在这里插入图片描述
我们就做这么一个功能
第一步:在html里面 找到这个查询按钮 给它加id(精准定位,虽然在jquery里面直接加冒号也行,但是不止有一个button,所以并不好)
回忆一下jquery 空格是后代 大于号是子代
因为用id比较简单,我们这里为了回忆一下其它的知识点就用冒号吧
在这里插入图片描述
所以我们在servlet里面还得加一个带价格区间的分页查询
还得再写一个分页的方法
在这里插入图片描述
在这里插入图片描述
注意点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意写sql的时候要特别注意空格,因为没有空格可能会报错,而且你不注意的话,半天找不到原因
在这里插入图片描述
DAO写完了,接下来就是service了
在这里插入图片描述
然后就是service的实现类
在这里插入图片描述
下面就是servlet
在这里插入图片描述
在这里插入图片描述
取值,我们就看方法需要什么就取什么
前台先通过jquery传过来
在这里插入图片描述
在这里插入图片描述

servlet才能够取到
servlet:
在这里插入图片描述
现在我们开始测试,我们发现有很多bug
1、点完查询之后,我们输入的价格区间消失了,跳转之后数据没有带过来
2、价格区间查询完之后,由32页变成10页(假如),然后我们再点击下一页的时候又恢复到32页了,解决办法,之前的方法1都要替换掉
在这里插入图片描述
价格区间没有值,那就要全部数据,如果不处理,后台的sql肯定报错,只是你没有发现而已
在这里插入图片描述
它对应的实现类里面也改成double
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
还有价格区间写反了在sql里面是查不出来的,我们可以在后台处理一下
在这里插入图片描述
然后就是

在这里插入图片描述
至此全部完成

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值