IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> 做黑马旅游项目的难点概括tomcat+json+jquery+html+css -> 正文阅读

[Java知识库]做黑马旅游项目的难点概括tomcat+json+jquery+html+css

【1】在我做黑马的旅游项目的时候,虽然跟着视频做,但是做完后还是对自己写的代码不太熟悉,主要就是思路的问题,其他问题都好解决

【2】首先就是网站的分页功能

??????? 思路:

????????1.当我们做分页的时候,第一步不应该是想这个分页应该长什么样,那是前端干的事儿,而是应该,立刻想到,currentPage ,totalPage,startPage,pageSize这几个变量,因为我们需要这几个变量来去写dao中的sql语句,例如

??????? select? count(*)from tab_route where cid=? limit startPage,pageSize

??????? 这样我就就可以决定,每一页的数据从哪开始查,查多少

??????? 然后然后我们就应该考虑template的用法, 这里我知道肯定是查询多条语句的,所以就用query执行,然后返回了一个list集合

????? ?? 2.第二步,我们就要用service逻辑层来调用我们写的dao方法,思考一下,在这个层里,我们需要写一些什么,以及用到哪些参数,首先是startPage,这个怎么得出呢?

?????????????? ??????????????????????????????? startPage=(currentPage-1)*pageSize

??????? ??? 这样,我们的startPage就得到了

??????????? 而currentPage,应该在Servlet层中获取,前端的数据,

??????????? 而前端的currentPage怎么得到呢,这里我们先不管,疑点1

??????????? 在service中我们先把总页数totalPage解决

??????????? totalPage,就需要我们再去dao中写一串sql语句,先查询处所有的数据总量

????????????????select count(*) from tab_route where cid=?

??????????? 得到了数据总量后,我们在想一下,totalPage和数据总量之间的关系是什么

?????????????????????????? totalPage=totalCount%pageSize=0?totalCount%pageSize:totalCount%pageSize+1

?????????? 这里的pageSize ,是我们自己设定的,所以不用担心 ???

?????????? 到了这里我们需要分页的数据就都齐了,但是还有一个问题就是将来如果我们利用ajax把我们获得的数据返回之后,我们是不是还要做一个分页之后,上面内容的展示呢,比如说我将来要在上面展示5条信息,那么信息的数据该怎么也传过去,因为分页操作和动态数据展示操作可以在一起完成的。我们不能单纯的分页,然后每页的内容就不管了

?????????? 所以在我们获取了以上的数据之后,我们还要获取内容的数据,也就是第一条sql语句,返回的List集合,所以我们需要把这一切都传到前端去,这一步,我们就需要再定义一个类pageBean,专门装我们这些数据,然后利用ajax传回前端

??????? 3.这时候就到了servlet层,我们需要把pageSize,currentPage解决掉,首先解决pageSize,这里我们自己定义就好,想设为几都行,然后传到调用service中方法的参数中,其次就是我们的第一个疑问,这里先设为1,也就是currentPage为第一页,防止报错,然后调用方法,返回pageBean ,这个对象里包括了,currentPage,List<Route>,totalPage,totalCount,pageSize

【3】剩下来就是前端的调用的事情,? 首先Cid的获取,就是我们获取href上的字符串,这里不讲

???????? 1.这里我们先把totalPage和totalCount在页面上显示,可以利用sql数据库比对以防哪里出错

???????? 2.注意看,这里是一个load方法,并不是$.(function)加载,因为我们的currentPage,需要手动传参,而不是从哪里获取

????????

???????? 这里我们可以先看一下,前端人员写的界面,然后,我们最重要的一步来了,就是

??????? οnclick=“javascript:load(.......)”

??????? 是的就是类似于迭代,我们自己调用自己,这样在页面上每点一次分页栏的按钮,我们就可以重新加载,然后传入currentPage参数,如果是刚进入这个页面呢,之前提到了,我们默认状态下在Servlet中将currentPage设置为1,这里我们就可以加一个if语句,如果获取到了currentPage,那么我们就把参数传进去,没获取到就传1。

?????? 然后我们再编写上一下和下一页的li窗口

????????

???????? 这个时候currentPage的作用就体现出来了,而且,大家需要注意,如果before(也就是上一页)的页码数小于1,那么就需要回到第一页不然会报错和数据丢失。

??????? 下一页的写法类似,这里跳过.......

??????? 下一步,这里事先我知道数据库里有500多条数据,如果每页展示5条,会有几百页数据,然后,再不进行任何处理的情况下,我们就会发下,下面的分页栏多的离谱,这里需要小处理一下

????????

???????? 我定义一个begin和end,也就是下面的分页栏只能展示10页数据,如果当前页码在10页内,就只展示10页,如果当前页码在11页,那么我们就把下面分页栏的范围定在,6-15页之间。

????????

???????? 然后就是页码的拼接

??????? 最后再把li用html写入即可

????????

??????? 这样,分页就做好了,每点一次,就是重新加载load 方法,然后,刷新界面显示新的内容。

【4】填充的方式和分页中li的拼接差不多,先得到我们前端写的数据

????????

?

???????? 这里,我们只需要把其中的静态数据,改为数据即可,还记得我们之前返回的List<Route>对象嘛,这里他就有用处了。

??????? 首先我们应该知道,我们的dao层,sql语句,是已经limit过的,从哪开始查,差几个,我们已经把currentPage传入,所有startPage,和pageSize,都已经解决了,点哪页,就会返回对应的List<Route>数据,我们要做的就是写for循环语句,然后把Route对象拿出来,然后把静态数据改为动态数据即可。

????????

【5】最后,我们当然不能忘记了写$.(function)加载语句

???????? 这里填入currentPage=null,是因为,我们已经在servlet中定义了,如果为空,就是1,

????????

????????到这里,我们的分页大概就是这样了,其他的都是一些小细节,大家需要自行联系,因为我也是刚刚学呢。

?????????

????????????????

?

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2021-10-22 10:49:50  更:2021-10-22 10:51:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年10日历 -2024/10/24 16:22:43-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码