nkion
2024年 8月 1日

最近练习javaweb项目的时候，学到了一些新东西，来记录一下。

1.添加验证码功能

有两种方式，一种是导入jar，一种是导入依赖。

第一种导入jar，这个网上很多。

第二种是导入maven依赖，

<!-- Kaptcha依赖 -->
<dependency>     
<groupId>com.github.penggle</groupId>     <artifactId>kaptcha</artifactId>     
<version>2.3.2</version> </dependency>
相关api举例：
Properties properties = new Properties();
properties.setProperty("kaptcha.image.width", "200"); properties.setProperty("kaptcha.image.height", "50"); properties.setProperty("kaptcha.textproducer.font.color", "blue"); properties.setProperty("kaptcha.textproducer.char.space", "5"); properties.setProperty("kaptcha.textproducer.char.length", "4"); Config config = new Config(properties); captchaProducer = config.getProducerImpl(); HttpSession session = req.getSession();
// Create the text for the image
String capText = captchaProducer.createText(); // Store the text in the session
 session.setAttribute("code", capText); // Create the image with the text
 BufferedImage bi = captchaProducer.createImage(capText); // Write the image to the response
 resp.setContentType("image/jpeg"); ImageIO.write(bi, "jpg", resp.getOutputStream());

HTML中的代码：

<input type="text" name="verifyCode" placeholder="验证码" class="usernm" id="verifyCode"> <img src="vcode" alt="验证码" onclick="this.src=this.src+'?'+Math.random()">

这样就成功添加上了验证码功能。

2.添加分页功能

之前的界面，不管有多少数据，都会在一页显示，不方便，也不美观。

其实最主要的就是sql语句的书写，下面以mybatis的注解为例：

@Select("SELECT * FROM students LIMIT #{start}, #{pageSize}") List<Student> showStuPage(@Param("start") 
int start, @Param("pageSize") int pageSize); @Select("SELECT COUNT(*) FROM students") int getTotalCount();

这里用了两个注解，一个是分页查询到的记录，另一个是查询到的总数。

int pageSize = 5; Integer curPage = null; if (request.getParameter("curPage") != null) {   
  curPage = Integer.parseInt(request.getParameter("curPage")); } else {     curPage = 1; } i
nt start = (curPage - 1) * pageSize;

这是前端要传的参数相关代码。 这里有一个点要注意：当最后一页小于每一页的记录数时，最后一页不显示了，所以用下面的方式改进一下：

int recordTotal = orderMapper.getTotalCount(); // 获取总记录数 int pageNum =(int)Math.ceil((double) recordTotal/pageSize);

这样最后一页就会正常显示了。 还有一个注意点：当前业在首页的时候，“首页”和“上一页”是用户不能点击的，同理，当前业在尾业的时候，“后一页”和“尾页”是用户点击不了的。 所以下面可以这么写：

<div class="pa"><% if (curPage > 1) { %>
<a href="ShowPage.jsp?curPage=1">首页</a>
 <a href="ShowPage.jsp?curPage=<%= curPage - 1 %>">上一页</a><% } 
else { %><a class="disabled">首页</a> <a class="disabled">上一页</a><% } %>
<% if (curPage < pageNum) { %>
<a href="ShowPage.jsp?curPage=<%= curPage + 1 %>">下一页</a>
<a href="ShowPage.jsp?curPage=<%= pageNum %>">尾页</a><% } 
else { %><a class="disabled">下一页</a>
<a class="disabled">尾页</a><% } %> </div>

这样就实现了想要的功能：

下面是实现的界面展示：

 

展示界面：

 

 

更新界面：

 

当然，这个小项目还很多需要改进的地方，以后会一直修改和维护。
该项目的地址：gitee
或：github

没有评论 在未分类