当前位置：首页 > wzjs >正文

中心网站设计商务网站开发考卷

wzjs 2025/9/7 2:08:00

中心网站设计,商务网站开发考卷,网站优化模板,vue手机网站开发文章目录思路数据抽出功能设计功能模块工具类前端内容用户端数据处理思路数据抽出需要显示的数据，查询的数据抽出；进行分页显示，需要统计抽出的件数，然后根据页面显示尺寸调整显示页面内容； 功能设计翻页需要…

文章目录

思路
- 数据抽出
- 功能设计
功能模块
- 工具类
- 前端内容
- 用户端数据处理

思路

数据抽出

需要显示的数据，查询的数据抽出；
进行分页显示，需要统计抽出的件数，然后根据页面显示尺寸调整显示页面内容；

功能设计

翻页需要包含的内容：
1. 首页/尾页
2. 上一页/下一页
3. 页码跳转，指定页跳转
需要有的参数：
1. 当前页码
2. 总页数
3. 当前页所显示的件数
4. 总件数
5. 显示内容范围：当前页*页面件数
需要计算页面的件数和页数：
1. 当前件数不满足页面内容，显示当前页

功能模块

工具类

定义基础参数

private int pageIndex = 1; // 当前页码
private int pageSize; // 总页数
private int totalCount;  // 总记录数
private int totalPageCount; // 每页显示的记录数

生成相关的getter、setter方法，调整相关方法的实现，赋值到时候一定要考虑到异常规避

    /*** 获取当前页码* @return pageIndex*/public int getPageIndex() {return pageIndex;}/*** 设置当前页* @param pageIndex 当前页码*/public void setPageIndex(int pageIndex) {if (pageIndex > 0) {this.pageIndex = pageIndex;}}/*** 获取每页显示的记录数* @return pageSize*/public int getPageSize() {return pageSize;}/*** 设置每页显示的记录数* @param pageSize*/public void setPageSize(int pageSize) {if (pageSize > 0) {this.pageSize = pageSize;} else {this.pageSize = 10;}}/*** 获取总记录数* @return totalCount*/public int getTotalCount() {return totalCount;}/*** 设置总记录数* @param totalCount 总记录数*/public void setTotalCount(int totalCount) {if (totalCount > 0) {this.totalCount = totalCount;setByPageNo(totalCount);}}/*** 获取总页数* @return totalPageCount*/public int getTotalPageCount() {return totalPageCount;}/*** 设置总页数* @param totalPageCount 总页数*/public void setTotalPageCount(int totalPageCount) {this.totalPageCount = totalPageCount;}

设置页数，在获取件数之后计算当前页数。需要防止非法字符越界等操作

    /*** 根据总记录数设置总页数* 此方法用于计算分页时的总页数，基于当前的每页记录数（pageSize）** @param totalCount 总记录数，即需要分页处理的数据总量*/private void setByPageNo(int totalCount) {if (this.pageSize <= 0) {this.pageSize = 10; // 防止非法值影响计算}// 计算总页数：如果总记录数除以每页记录数的余数为0，则总页数为总记录数除以每页记录数；// 否则，总页数为总记录数除以每页记录数加1this.totalPageCount = totalCount % pageSize == 0 ? totalCount / pageSize :totalCount / pageSize + 1;}

前端内容

导入共同的翻页式样，设置hidden项：保存当前的页面件数

<div><table><li></li><li></li></table><input type="hidden" id="totalPageCount" value="${totalPageCount}"/><c:import url="rollpage.jsp"><c:param name="totalCount" value="${totalCount}"/><c:param name="currentPageNo" value="${currentPageNo}"/><c:param name="totalPageCount" value="${totalPageCount}"/></c:import>
</div>

调用的翻页jsp如下：文本输入框需要检查非法字符

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
</head>
<body><div class="page-bar"><ul class="page-num-ul clearfix"><li>共${param.totalCount }条记录&nbsp;&nbsp; ${param.currentPageNo }/${param.totalPageCount }页</li><c:if test="${param.currentPageNo > 1}"><a href="javascript:page_nav(document.forms[0],1);">首页</a><a href="javascript:page_nav(document.forms[0],${param.currentPageNo-1});">上一页</a></c:if><c:if test="${param.currentPageNo < param.totalPageCount }"><a href="javascript:page_nav(document.forms[0],${param.currentPageNo+1 });">下一页</a><a href="javascript:page_nav(document.forms[0],${param.totalPageCount });">最后一页</a></c:if>&nbsp;&nbsp;</ul><span class="page-go-form"><label>跳转至</label><input type="text" name="inputPage" id="inputPage" class="page-key" />页<button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button></span></div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/rollpage.js"></script>
</html>

JS代码如下，检查非法字符

function page_nav(frm,num){frm.pageIndex.value = num;frm.submit();
}function jump_to(frm,num){//alert(num);//验证用户的输入const regexp = /^[1-9]\d*$/;let totalPageCount = document.getElementById("totalPageCount").value;//alert(totalPageCount);if(!regexp.test(num)){alert("请输入大于0的正整数！");return false;}else if((num-totalPageCount) > 0){alert("请输入小于总页数的页码");return false;}else{page_nav(frm,num);}
}

用户端数据处理

Servlet

 private void query(HttpServletRequest req, HttpServletResponse resp) {// 默认分页设置int currentPageNo = 1;int pageSize = 5;// 获取request请求路径中当前页码参数    String pageIndex = req.getParameter("pageIndex");// 非空验证，如果参数页码为空显示默认页数currentPageNo = pageIndex == null ? currentPageNo : Integer.parseInt(pageIndex);// 创建UserService实例UserService userService = new UserServiceImpl();List<User> userList;// 获取用户总数，用于分页int totalCount = userService.getUserCount(queryUserName, queryUserRole);// 创建并配置PageSupport对象PageSupport pageSupport = new PageSupport();// 设置分页当前页码pageSupport.setPageIndex(currentPageNo);// 设置分页总页数pageSupport.setPageSize(pageSize);// 设置分页总数pageSupport.setTotalCount(totalCount);// 计算总页数int totalPageCount = pageSupport.getTotalPageCount();// 校验当前页码if (currentPageNo < 1) {currentPageNo = 1;} else if (currentPageNo > totalPageCount) {currentPageNo = totalPageCount;}// 根据查询条件和分页信息获取用户列表userList = userService.getUserList(queryUserName, queryUserRole, currentPageNo, pageSize);// 将用户列表和其他信息存储在请求对象中req.setAttribute("userList", userList);req.setAttribute("totalCount", totalCount);req.setAttribute("currentPageNo", currentPageNo);req.setAttribute("totalPageCount", totalPageCount);// 将内容转发到list页面进行内容显示req.getRequestDispatcher("/jsp/userlist.jsp").forward(req, resp);}


// 定义SQL语句，将翻页的数据条数 反映到SQL中，每次翻页进行一次DB交互
StringBuilder sql = new StringBuilder();
// 查询数据通过条件最后进行排序，筛选从哪一条开始到多少条
sql.append("select u.*, r.roleName as userRoleName from smbms_user u, smbms_role r where " +"u.userRole = r.id");
sql.append(" order by createDate DESC limit ?, ?");// 准备SQL语句执行
preparedStatement = connection.prepareStatement(sql.toString());// 定义参数，防止SQL注入导致异常
// currentPageNo 当前页码
// pageSize      每页数量
List<Object> list = new ArrayList<>();
// 计算上一页的最后一件
currentPageNo = (currentPageNo - 1) * pageSize;
list.add(currentPageNo);
list.add(pageSize);// 返回查询结构
ResultSet rs = BaseDao.executeQuery(connection, String.valueOf(sql), preparedStatement, params, rs);while (rs.next()) {// 内容赋值，赋值到要显示的对象中}