搭建配置环境配置Tomcat导入开拓包建立开拓用到的程序包
在数据库创建相对应的表开拓DAO
DAO该当供应增加客户和查询用户的功能
增加用户
开拓servic
供应UI,增加客户的Servlet
//直接跳转到显示增加用户页面的jsp request.getRequestDispatcher(\"大众/WEB-INF/addCustomer.jsp\公众).forward(request, response);
我们创造,在日期的下拉框中,只有一个数据(由于我们在value中只写了一个数据)
要想不才拉框中可以选择很多的数据,那么value的值就不能单单只有一个。当然了,也不可能在JSP页面中写下面的代码
<option value=\"大众1900\"大众>1900</option> <option value=\"大众1901\公众>1900</option> <option value=\"大众1902\"大众>1900</option> <option value=\公众1903\"大众>1900</option>
我们用javaScript天生下拉框的数据就行了!
!
获取月份和日也类似
在JSP页面中导入javascript文件把稳:javasrcipt文件不能放在WEB-INF下面!
!
!
!
否则是获取不到的!
!
!
<script type=\公众text/javascript\公众 src=\"大众${PageContext.request.contextPath}/customer.js\"大众 ></script>这三个函数都是在页面加载时就该当被初始化了,以是在body上绑定onload韶光即可!
!
function pageInit() { makeYear(); makeMonth(); makeDay(); } <body onload=\"大众pageInit()\"大众>效果:
开拓处理表单数据的Servlet
将表单的数据封装到Bean工具中,要开拓工具类处理表单数据的Servlet代码:
效果:
供应查询客户界面的Servlet
//跳转到显示客户界面信息的jsp request.getRequestDispatcher(\"大众/WEB-INF/lookCustomer.jsp\公众).forward(request, response);
查询总记录数
查询总记录数也便是查询数据库表的记录有多少条,这是关于对数据库数据的操作,以是肯定是在dao层做!
查询分页的数据
获取分页的数据也是查询数据库的记录,这也是关于对数据库的操作,以是也是在Dao层做的!
剖析
现在我们已经可以知道总记录数了,对付其他3个变量(每页显示记录数【由程序员来指定】,当前是多少页【由用户来指定】,总页数【由总记录数和每页显示记录数来算数来的】)
现在要剖析的是,这些变量该当放在哪里呢???全部放在Dao层??全部放在Dao层是可以实现功能的,但是,这样MVC构培养被毁坏掉了(Dao层只用来对数据进行CRUD操作,4个变量存在Dao层,是不合理的)
最好的做法是这样的:创建一个实体Page,将分页用到的信息全部封装在Page中实现!
Page就代表着分页的数据这样就非常符合面向工具的思想了!
将数据封装到Page中并在页面上显示分页的数据
①:创建Page类
②:BusinessService该当供应获取分页数据的做事
③:web层调用BusinessService层的功能,获取得到Page工具
④:在JSP页面中,利用EL表达式获取到Page工具,从而输出数据
⑤:在JSP页面中显示页码,同时把码数绑定到超链接去!
效果:
让分页的功能更加完善
显示当前页数,总页数,总记录数
当前页数是:[${page.currentPageCount}] 总页数是:${page.totalPageCount} 总记录数是:${page.totalRecord}效果:
跳转到某页上
<input type=\"大众text\"大众 id=\公众currentPageCount\公众> <input type=\公众button\"大众 value=\公众跳转\公众>页面效果:
我们现在要做的便是:怎么样才能输入框输入内容,然后点击跳转按钮,将输入框的数据发送到Servlet上,然后实现跳转到某页上功能
明显地,我们肯定要利用JavaScript代码!
<script type=\公众text/javascript\"大众> /既然写上了JavaScript代码了,就顺便验证输入框输入的数据是否合法吧/ function goPage() { /获取输入框控件/ var input = document.getElementById(\公众currentPageCount\"大众); /获取输入框的数据/ var value = input.value; if(value==null || value==\"大众\"大众){ alert(\"大众请输入页码\"大众); return false; } if(!value.match(\"大众\\d+\"大众)){ alert(\"大众请输入数字\"大众); return false; } if(value<1 || value>${page.totalPageCount}){ alert(\"大众请输入合法数据\"大众); return false ; } window.location.href=\公众${pageContext.request.contextPath}/LookCustomer?currentPageCount=\"大众+value; }</script>效果:
记录JSP页面的开始页和结束页
为什么我们要记录JSP页面的开始页和结束页呢?经由上面层层地优化,我们觉得不出有什么问题了。那是由于数据量太少!
我们试着多添加点记录进数据库,再回来看看!
从上面的图我们可以创造页数有多少,JSP页面就显示多少!
这明显不合理的,如果有100页也显示100页吗?
我们做一个规定,一次只能显示10页的数据。那么显示哪10页呢?这又是一个问题了,如果我们在看第11页的数据,该当显示的是第7到第16页的数据(显示11附近的页数),我们在看第2页的数据,该当显示第1到第10页的数据。用户想要看的页数是不明确的,我们显示附近的页数也是不明确的!
。我们该当把用户想要看的页数记录下来,然后根据逻辑判断,显示附近的页数
我们显示页数的代码是这样的:
很明显,我们只要掌握了begin和end中的数据,就掌握显示哪10页了!
①在Page类中多定义两个成员变量
//记录JSP页面开始的页数和结束的页数 private int startPage; private int endPage; //Setter,Getter方法
②开始页数和结束页数受用户想看的页数影响,在BusinessService的getPageData()加入下面的逻辑
//第一次访问 page.setStartPage(1); page.setEndPage(10); //不是第一次访问 if (page.getCurrentPageCount() <= 10) { page.setStartPage(1); page.setEndPage(10); } else { page.setStartPage((int) (page.getCurrentPageCount() - 4)); page.setEndPage((int) (page.getCurrentPageCount() + 5)); //如果由于加减角标越界了,那么就设置最前10页,或者末了10页 if (page.getStartPage() < 1) { page.setStartPage(1); page.setEndPage(10); } if (page.getEndPage() > page.getTotalPageCount()) { page.setEndPage(page.getTotalPageCount()); page.setStartPage(page.getTotalPageCount() - 9); } }
③:在JSP显示页数时,获取得到开始页和结束页就行了
<%--供应页数的界面--%> <c:forEach var=\"大众pageNum\公众 begin=\"大众${page.startPage}\"大众 end=\"大众${page.endPage}\"大众> <a href=\公众${pageContext.request.contextPath}/LookCustomer?currentPageCount=${pageNum}\"大众> [${pageNum}] </a> </c:forEach>效果:
重构优化分页重构
我们再转头看看BusinessService中获取分页数据的代码:
//既然Page工具代表是分页数据,那么返回Page工具即可!
//web层该当传入想要看哪一页数据的参数!
public Page getPageData(String currentPageCount) { Page page = new Page(); //获取数据库中有多少条记录,并封装到Page工具中 Long totalRecord = customerDao.getTotalRecord(); page.setTotalRecord(totalRecord); //算出总页数,并封装到Page工具中 int totalPagecount = (int) (totalRecord % page.getLinesize() == 0 ? totalRecord / page.getLinesize() : totalRecord / page.getLinesize() + 1); page.setTotalPageCount(totalPagecount); int start ; int end = page.getLinesize(); //现在又分两种情形了,如果通报进来的参数是null的,那么解释外界是第一次查询的 if (currentPageCount == null) { //第一次查询,就该当设置当前页数是第一页 page.setCurrentPageCount(1); page.setStartPage(1); page.setEndPage(10); start = (int) ((page.getCurrentPageCount() - 1) page.getLinesize()); List<Customer> customers = customerDao.getPageData(start, end); page.setList(customers); } else { //如果不是第一次,就把外界通报进来的页数封装到Page工具中 page.setCurrentPageCount(Long.parseLong(currentPageCount)); start = (int) ((page.getCurrentPageCount() - 1) page.getLinesize()); if (page.getCurrentPageCount() <= 10) { page.setStartPage(1); page.setEndPage(10); } else { page.setStartPage((int) (page.getCurrentPageCount() - 4)); page.setEndPage((int) (page.getCurrentPageCount() + 5)); //如果由于加减角标越界了,那么就设置最前10页,或者末了10页 if (page.getStartPage() < 1) { page.setStartPage(1); page.setEndPage(10); } if (page.getEndPage() > page.getTotalPageCount()) { page.setEndPage(page.getTotalPageCount()); page.setStartPage(page.getTotalPageCount() - 9); } } List<Customer> customers = customerDao.getPageData(start, end); page.setList(customers); } return page; }
太太太太太tm繁芜,太太太太tm长了!
!
!
!
!
我们BusinessService要做的仅仅是调用Dao层的功能,为web层供应数据,但我们在方法中利用大量了逻辑判断,而且这些逻辑判断都是属于Page类的!
明确一下:只有获取数据库总记录数是在BusinessService中做的,其他的数据变量都是该当在Page类中完成!
在BusinessService获取了总记录数之后,我们要对其他变量进行初始化(根据总记录数,用户想要看哪一页的数据),算出其他的数据(JSP记录开始页数、结束页数、总页数等等),最好的办法便是通过Page的布局函数来实现初始化!
public Page getPageData2(String currentPageCount) { //获取得到总记录数 Long totalPageCount = customerDao.getTotalRecord(); if (currentPageCount == null) { //如果是第一次,那么就将用户想看的页数设置为1 Page page = new Page(1, totalPageCount); List<Customer> customers = customerDao.getPageData(page.getStartIndex(), page.getLinesize()); page.setList(customers); return page; } else { //如果不是第一次,就将获取得到的页数通报进去 Page page = new Page(Integer.parseInt(currentPageCount), totalPageCount); List<Customer> customers = customerDao.getPageData(page.getStartIndex(), page.getLinesize()); page.setList(customers); return page; } }改良后的Page类(原来的Page类只有成员变量和setter、getter方法)
public Page(int currentPageCount, long totalRecord) { //将通报进来的currentPageCount初始化 this.currentPageCount = currentPageCount; //总页数 totalPageCount = (int) (totalRecord % linesize == 0 ? totalRecord / linesize : totalRecord / linesize + 1); //总记录数 this.totalRecord = totalRecord; //开始取数据的位置 startIndex = (currentPageCount - 1) linesize; //如果当前页小于10,那么开始页为1,结束页为10就行了 if (this.currentPageCount <= 10) { this.startPage = 1; this.endPage = 10; } else { startPage = this.currentPageCount - 4; endPage = this.currentPageCount + 5; //加减后页数越界的情形 if (startPage < 1) { this.startPage = 1; this.endPage = 10; } if (endPage > totalPageCount) { this.startPage = this.currentPageCount - 9; this.endPage = this.totalPageCount; } } }
分页显示页面重构
分页的显示页面都是永恒不变的,我们可以把代码重构成一个jsp,须要用到分页显示页面的地方,就包含进去就行了!
<%@ page contentType=\"大众text/html;charset=UTF-8\"大众 language=\"大众java\"大众 %> <%@taglib prefix=\"大众c\"大众 uri=\"大众http://java.sun.com/jsp/jstl/core\"大众 %> <%--显示当前页数--%> 当前页数是:[${page.currentPageCount}] <%--如果当前的页码大于1,才显示上一步--%> <c:if test=\公众${page.currentPageCount>1}\"大众> <%--把通报过去的页码-1就行了--%> <a href=\"大众${pageContext.request.contextPath}/LookCustomer?currentPageCount=${page.currentPageCount-1}\"大众> 上一步 </a> </c:if> <%--供应页数的界面--%> <c:forEach var=\"大众page\公众 begin=\"大众${page.startPage}\"大众 end=\"大众${page.endPage}\"大众> <a href=\公众${pageContext.request.contextPath}/LookCustomer?currentPageCount=${page}\"大众> [${page}] </a> </c:forEach> <%--如果当前的页码小于总页数,才显示下一步--%> <c:if test=\"大众${page.currentPageCount<page.totalPageCount}\"大众> <%--把通报过去的页码-1就行了--%> <a href=\"大众${pageContext.request.contextPath}/LookCustomer?currentPageCount=${page.currentPageCount+1}\公众> 下一步 </a> </c:if> <input type=\"大众text\"大众 id=\公众currentPageCount\"大众> <input type=\"大众button\"大众 value=\"大众跳转\"大众 onclick=\"大众goPage()\"大众> 总页数是:${page.totalPageCount} 总记录数是:${page.totalRecord} <script type=\"大众text/javascript\公众> /既然写上了JavaScript代码了,就顺便验证输入框输入的数据是否合法吧/ function goPage() { /获取输入框控件/ var input = document.getElementById(\公众currentPageCount\"大众); /获取输入框的数据/ var value = input.value; if(value==null || value==\"大众\公众){ alert(\"大众请输入页码\"大众); return false; } if(!value.match(\公众\\d+\公众)){ alert(\公众请输入数字\"大众); return false; } if(value<1 || value>${page.totalPageCount}){ alert(\"大众请输入合法数据\"大众); return false ; } window.location.href=\公众${pageContext.request.contextPath}/LookCustomer?currentPageCount=\"大众+value; } </script>
用须要用到的地方,导入即可!
<jsp:include page=\"大众page.jsp\"大众></jsp:include>
为了做到更好的通用性,处理分页数据的url该当由Servlet传进去给Page类,让Page类封装起来!
要利用的时候,再用Page取出来就行了。
下面写法已经固定了,不足灵巧!
也便是说,下面的url地址不应该写去世的
${pageContext.request.contextPath}/LookCustomer?currentPageCount=${page.currentPageCount+1}
我们可以这样做:
在Controller上获取Servlet的名称,在通报用户想要看的页数的同时,把Servlet的url也通报进去String servletName = this.getServletName(); //调用BusinessService的方法,获取得到所有客户信息 BusinessService businessService = new BusinessService(); //把Servlet的url也通报进去 Page page = businessService.getPageData2(currentPageCount, request.getContextPath() + \"大众/\公众 + servletName);在Page类上,多增加一个成员变量
private String url; public String getUrl() { return url; } public void setUrl(String url) { this.url = url; }在BusinessService接管到web层通报进来的url,set到Page工具上就行了!
page.setUrl(url);
我们在jsp页面跳转到处理分页数据的Servlet上,就再不用写去世了。直接用Page工具中获取出来就行了!
<%--把通报过去的页码-1就行了--%> <a href=\公众${page.url}?currentPageCount=${page.currentPageCount-1}\公众> 上一步 </a>开拓web的删除和修正
在查询jsp页面上,增长删除和修正的操作链接!
开拓处理删除操作的Servlet
超链接绑定要删除用户的id,带过去给Controller
<a href=\"大众${pageContext.request.contextPath}/DeleteCustomer?id=${customer.id}\公众>删除</a>
controller的代码也十分大略:
String id = request.getParameter(\"大众id\"大众); //调用BusinessService层的功能,就可以完成删除操作了 BusinessService businessService = new BusinessService(); businessService.deleteCustomer(id);
删除客户记录也是一件非常主要的事情,该当供应JavaSrcript代码讯问是否要真的删除
在超链接控件上绑定事宜!
<a href=\"大众${pageContext.request.contextPath}/DeleteCustomer?id=${customer.id}\公众 onclick=\"大众 return sureDelete()\"大众>删除</a> function sureDelete() { var b = window.confirm(\"大众你确定要删除吗?\"大众); if(b) { return true; }else { return false; } }
修正操作
修正操作的流程是这样的:点击修正超链接,跳转到该用户的详细信息页面,在详细信息页面中修正数据,再提交修正!
【跳转到用户详细信息页面时,用户的id还在的,在提交数据的时候,记得把id也给到做事器,【id是不包含在表单中的,要我们自己提交过去】!
】
<a href=\"大众${pageContext.request.contextPath}/UpdateCustomerUI?=${customer.id}\公众>修正</a>
开拓供应用户详细信息的Servlet
String id = request.getParameter(\"大众id\公众); BusinessService businessService = new BusinessService(); //通过id获取得到用户的详细信息 Customer customer = businessService.findCustomer(id); request.setAttribute(\"大众customer\"大众, customer); //跳转到显示用户详细信息的jsp页面上 request.getRequestDispatcher(\公众/WEB-INF/customerInformation\公众).forward(request, response);
开拓显示用户信息的JSP【数据回显】
想要日期能够选择,记得导入JavaScript代码,相应事宜!
把稳:在显示页面上,一定要把id通报过去给处理表单的Servlet,不然做事器是不知道你要修正哪一条数据的!
原文地址:https://dwz.cn/kSaxWpBW
作者:Java3y