目录
1. 登录
1.1 登录界面
1.2 Servlet
2.index界面
3 添加功能
3.1 添加逻辑图
3.2 代码修改
3.3 addUserServlet
4.多条选中删除
4.1多条删除分析图
4.2jsp效果
4.3delSelectedServlet
5.分页
5.1分页分析图
5.2创建pageBean实体类
5.3list.jsp
5.4findUserByPageServlet
5.5Service
1. 登录
1.1 登录界面
如果账号密码错误的情况：
如果验证码错误
在login.jsp界面需要注意的是刷新代码这个方法
href="javascript:refreshCode()"尤其是这段代码，在script里面定义一个function方法
达到刷新验证码的方法
1.2 Servlet
Servlet的代码
package cn.itcast.web;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//服务器通知浏览器不要缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//在内存中创建一个长80，宽30的图片，默认黑色背景
//参数一：长
//参数二：宽
//参数三：颜色
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics g = image.getGraphics();
//设置画笔颜色为灰色
g.setColor(Color.GRAY);
//填充图片
g.fillRect(0,0, width,height);
//产生4个随机验证码，12Ey
String checkCode = getCheckCode();
//将验证码放入HttpSession中
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//设置画笔颜色为黄色
g.setColor(Color.YELLOW);
//设置字体的小大
g.setFont(new Font("黑体",Font.BOLD,24));
//向图片上写入验证码
g.drawString(checkCode,15,25);
//将内存中的图片输出到浏览器
//参数一：图片对象
//参数二：图片的格式，如PNG,JPG,GIF
//参数三：图片输出到哪里去
ImageIO.write(image,"PNG",response.getOutputStream());
}
private String getCheckCode() {
String base = "0123456789ABCDEFGabcdefg";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
//产生0到size-1的随机值
int index = r.nextInt(size);
//在base字符串中获取下标为index的字符
char c = base.charAt(index);
//将c放入到StringBuffer中去
sb.append(c);
}
return sb.toString();
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
Servlet的代码
2.index界面
界面呈现
界面呈现
通过点击查询所有信息进入到下一个界面
以下是index.jsp
<%-- Created by IntelliJ IDEA. User: 10260 Date: 2022/4/15 Time: 17:22 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %>首页 ${user.name},欢迎您~~~~~ 查询所有用户信息
3 添加功能
添加功能主要是添加姓名、年龄、性别、籍贯、qq和邮箱
界面效果
通过表单提交，将form表单action到addUserServlet里面去
添加联系人页面
3.1 添加逻辑图
通过获取到表单内容，然后servlet捕捉到对应的参数，然后传入到Service里面进行逻辑代码操作，这里是添加用户，所以在dao里面进行增加到数据库的sql语句。以下的增删改查都是相同的操作
在jsp页面呈现出来，如果要进行操作通过form表单大action跳转到servlet，然后servlet根据具体的增删改查，跳转到service里面去，最后在dao里面进行增删改查的数据库操作。
3.2 代码修改
这是jsp的代码
<%--
Created by IntelliJ IDEA.
User: 10260
Date: 2022/4/18
Time: 14:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
添加用户
<%--
--%>
添加联系人页面
这是jsp的代码
3.3 addUserServlet
@WebServlet("/addUserServlet")
public class addUserServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
//获取参数
Map pm = request.getParameterMap();
//封装对象
User user = new User();
try {
BeanUtils.populate(user, pm);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//调用service保存
UserService us = new UserServiceImpl();
us.addUser(user);
//跳转到userLIstServlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
这里通过
request.getParameterMap();
将add.jsp表单里面的内容用此方法进行获取，通过javaBean的populate的方法将user对象和pm放进去，然后调用service方法
这里通过
request.getParameterMap();
将add.jsp表单里面的内容用此方法进行获取，通过javaBean的populate的方法将user对象和pm放进去，然后调用service方法
4.多条选中删除
4.1多条删除分析图
4.2jsp效果
左边多条选中的jsp实现
通过定义一个id然后使用function方法
document.getElementById("firstCB").onclick = function () {
//获取所有id
var eb = document.getElementsByName("uid");
for (var i = 0; i < eb.length; i++) {
//等于firstCB的checked
eb[i].checked = this.checked;
}
}
这样可以实现多选，多选以后要讲多选的内容，提交表单，然后转到servlet里面去
document.getElementById("delSelected").onclick = function () {
if (confirm("您确定要删除所选条目吗？")) {
//表单提交
//是否有表单被选中
var flag = false;
var eb = document.getElementsByName("uid");
for (var i = 0; i < eb.length; i++) {
if (eb[i].checked) {
//有条目被选中
flag = true;
break;
}
}
if (flag) {
//提交到action的地方
document.getElementById("from").submit();
}
}
form表单发现如果有数据，那么通过action转发到deSelectedservlet里面去
