专栏首页Java帮帮-微信公众号-技术文章全总结JavaWeb16-案例分页实现(Java真正的全栈开发)

JavaWeb16-案例分页实现(Java真正的全栈开发)

案例 & 分页

一.案例

1. 删除选中分析

商品列表页面如下:

要求:

1.在表头上添加一个复选框.(列表全选或者全不选)

2.在list.jsp中添加一个删除选中的按钮,点击删除选中商品

2. 删除选中实现

全选或者全不选的实现

在表头上添加一个复选框

遍历商品的时候给每一个商品添加一个复选框,为了便于获取,给他们使用了name属性

编写js函数实现全选或者全不选

删除选中记录的实现

获取选中的记录,将选中的ids传递给DeleteProductByIdsServlet

为了方便获取选中记录的id,在复选框上添加value属性,值为当前记录的id

在点击删除选中按钮的时候,获取所有选中记录的id,传递到后台

实现方式两种:

方式1:手动拼url,在后台获取id参数

方式2:通过form表单,在后天获取name=’ck’的参数

将图书列表的tr放到一个form表单中,当点击’删除选中’,触发当前表单提交

DeleteProductByIdsServlet调用service,service调用dao,在到里执行批量操作

dao里的写法

3. 多条件查询商品分析

4. 多条件查询商品实现

dao条件查询写法

二.分页

1. 分页原理介绍

分页介绍

分页就是将数据以多页展示出来

分页作用

为了提高用户的感受

分页技术分类

物理分页

只从数据库中查询出要显示的数据

优点:不占用很多内存

缺点:速度比较低,每一次都要从数据库中获取

逻辑分页

从数据库中将所有记录查找到,存储到内存中,需要什么数据

直接从内存中获取.

优点:速度比较快

缺点:占用比较多的内存,如果数据比较多,可以出现内在溢出。

数据实时更新需要单独处理.

mysql中limit介绍

利用mysql的limit,进行物理分页。

格式1:

select * from 表名 limit m,n;

m是从0开始,代表是第几条记录

n代表显示多少条记录

可以理解从第m+1条记录到m+n条记录 闭合区间[m+1,m+n]

格式2:

select * from 表名 limit n;

可以理解为前n条记录

等价于:select * from 表名 limit 0,n;

例如

select * from person limit 4,10;

从第5条记录开始,显示10条.也就是[5,14]

分页实现原理分析

a.明确一共多少条记录

select coun(*) from 表;

b.明确每一页显示多少条记录

自己定义或者从前台传过来

c.计算一共多少页

计算方式1:总条数%每页条数==0?总条数/每页条数:总条数/每页条数+1

计算方式2:Math.ceil(总条数*1.0/每页条数)

d.查看第几页

默认第一页,从前台页面传过来

点击上一页下一页的时候,就是对当前页加或者减1操作

e.当前页码的数据

通过limit查询出数据

例如:每页显示5条,查询第3页数据

select * from 表 limit (3-1)*5,5;

用(当前页码-1)*每页条数,就求出了开始的记录位置,在向下查找每页数个记录。就得到了这页的数据.

2. 分页功能分析

执行流程:

a从index.jsp链接进入商品列表页面,默认访问第一页的数据,

b.发送至findProductsByPageServlet查询第一页数据,每页的条数默认为4条,

需要两个参数:当前页页码和每页显示的条数

c.调用productService的findProductsByPage(int 当前页,int 每页条数),返回值为bean对象.将当前页码,每页条数,总条数,总页数以及当前页的图书列表封装成pageBean,

d.将pagebean放到request域中,返回给product_list.jsp

e.在jsp页面将数据遍历

3. 分页功能实现

编写PageBean

private Integer currentPage;//当前页码

private Integer pageSize;//每页条数

private Integer totalPage;//总页数

private Integer totalCount;//总条数

private List<Product> list;//每页数据

编写servlet(分页查找)

编写productService中的分页查找方法,将查找出数据进行封装成pagebean

public PageBean findProductsByPage(int currentPage, int pageSize) throws SQLException {

//查找总条数

int totalCount=dao.getTotalCount();

//计算总页数

int totalPage=(int) Math.ceil(totalCount*1.0/pageSize);

//查询当前页数据

List<Product> list=dao.findProductsByPage(currentPage,pageSize);

//封装数据

PageBean bean=new PageBean(currentPage, pageSize, totalPage, totalCount, list);

return bean;

}

编写productDao中的方法

查看总条数

public int getTotalCount() throws SQLException {

QueryRunner runner = new QueryRunner(DataSourceUtils.getDateSource());

String sql="select count(*) from products";

return ((Long) runner.query(sql, new ScalarHandler())).intValue();

}

查看当前页数据

public List<Product> findProductsByPage(int currentPage, int pageSize) throws SQLException {

QueryRunner runner = new QueryRunner(DataSourceUtils.getDateSource());

String sql="select * from products limit ?,?";

return runner.query(sql, new BeanListHandler<Product>(Product.class), (currentPage-1)*pageSize,pageSize);

}

4. 设置分页条码

<c:if test="${pb.currentPage==1 }">

<li><<上一页</li>

</c:if>

<c:if test="${pb.currentPage!=1 }">

<li><a href="${pageContext.request.contextPath }/findProductsByPage?page=${pb.currentPage-1}"><<上一页</a></li>

</c:if>

<c:forEach begin="1" end="${pb.totalPage }" step="1" var="n">

<c:if test="${n == pb.currentPage}">

<li>${n }</li>

</c:if>

<c:if test="${n != pb.currentPage}">

<li><a href="${pageContext.request.contextPath }/findProductsByPage?page=${n}">${n }</a></li>

</c:if>

</c:forEach>

<c:if test="${pb.currentPage==pb.totalPage }">

<li>下一页>></li>

</c:if>

<c:if test="${pb.currentPage!=pb.totalPage }">

<li><a href="${pageContext.request.contextPath }/findProductsByPage?page=${pb.currentPage+1}">下一页>></a></li>

</c:if>

请点击此处输入图片描述

三.案例

1. 显示商品详情分析

2. 显示商品详情实现

页面:product_info.jsp

3. 将商品添加到购物车分析

在商品详情页面点击购买,将该商品添加到购物车.

购物车存放在哪儿?

session

购物车的数据结构是什么?

Map<Product,Integer>

如何保证购物车里物品的唯一性?

重写key的equals和hashcode方法

也就是说重写product的两个方法.(只需要判断id即可)

4. 将商品添加到购物车实现

修改product_info.jsp的”购买”链接

在add2cartServlet中将商品添加到购物车即可

5. 显示购物车中的商品信息分析

直接点击页面右上部的购物车即可,购物车的页面如下:

6. 显示购物车中的商品信息实现

只需要在页面中将购物车中的数据展示出来即可

遍历map

7. 修改购物车中商品数量分析

页面删有三个按钮,分别是添加一个,减少一个以及从购物车移除该商品

请点击此处输入图片描述请点击此处输入图片描述

添加的时候:

1.需要知道对那个商品就行操作的,并且个数是多少,因此在触发按钮的时候需要将id和个数传过去

2.修改的个数大于库存了或者小于0如何做?

思路:

需要在点击按钮的时候,将商品的库存数量一并传过去

当购买数量<=0时从购物车移走

当透明数量>=库存时,设成最大值

8. 修改购物车中商品数量实现

jsp页面的修改

a.在按钮上添加单击事件,将当前商品的id,count以及库存传过去

b.在js中判断数量>库存或者<=0时的操作

c.在点击删除按钮的时候,将数量置为0即可

修改项目名称


本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-02-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringMVC框架复习大纲【面试+提高】

    Java帮帮
  • JavaWeb03-轻松理解JS(Java真正的全栈开发)

    ? 一.js常用对象 ljs中的常见对象有以下几个: Boolean Number String Array 数组 Date 日期 Math 数学 RegEx...

    Java帮帮
  • request;response 对象

    response ? 1. response简介 response的类型为HttpServletResponse,它是Servlet的service()方法的参...

    Java帮帮
  • Composer PHP7.3 SHA384 is not supported by your openssl extension

    双面人
  • Lnc2Catlas:肿瘤相关的lncRNA数据库

    目前该数据库中共收录了33种肿瘤,27670个lncRNA转录本的信息,通过Browse按钮,可以按照肿瘤类型查看相关信息,以乳腺癌为例,结果如下

    生信修炼手册
  • 兼容IE6 a标签hover特殊效果

    HTML5学堂:虽然IE6现在使用率越来越低,很多网站也放弃了对IE6,甚至放弃了对IE7的兼容,但是IE6还是有很多人在使用。当我们在处理a标签的hover效...

    HTML5学堂
  • OpenCV-像素运算~算术运算

    将图片看成类型为uint8的像素矩阵,因此我们可以将两个像素矩阵进行加减乘除等一些列运算,这也被称为像素运算,像素运算包括两种:

    触摸壹缕阳光
  • java中的JSON操作

    JSON:JavaScript 对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法。

    一点儿也不潇洒
  • Composer常见错误解决

    执行composer install遇到错误:Your requirements could not be resolved to an installable...

    用户1566239
  • iOS·采用第三方(百度地图SDK)实现定位等功能开发

    首先,申请一个baidu账号,接着进入新建密钥入口申请成为baidu地图开发者,填写相关开发者信息和短信验证码。接下来点击创建应用,如官方文档新建密钥文档指南里...

    陈满iOS

扫码关注云+社区

领取腾讯云代金券