一丶登录模块
1.验证码
前端代码：
<div class="form-inline">
<label for="vcode">验证码：</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCode" title="看不清点击刷新" id="vcode"/></a>
</div>后端的处理：
随机生成一个验证码，并且将生成的验证码放入session域中：
/**
* 验证码
*/
@WebServlet("/checkCode")
public class CheckCodeServlet extends HttpServlet {
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());
}
/**
* 产生4位随机字符串
*/
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();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
获取用户生成的验证码，并且拿去跟上面生成的验证码（session.getAttribute()）作对比：
//获取用户填写的验证码
String verifycode = request.getParameter("verifycode");
//验证码判断
HttpSession session = request.getSession();
String checkcode_server = (String)session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
if (!checkcode_server.equalsIgnoreCase(verifycode)){
request.setAttribute("login_msg","验证码错误！");
request.getRequestDispatcher("/login.jsp").forward(request,response);
return;
}
如果验证码正确就可以比对用户名或者密码,直接将前端获取的数据封装成一个User对象，调用BeanUtils.populate()完成，这样user就有数据了：
Map<String, String[]> map = request.getParameterMap();
User user=new User();
//封装user对象
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//调用service
UserService service=new UserServiceImpl();
User loginUser = service.login(user);
//判断是否登录成功
if (loginUser!=null){
//成功
session.setAttribute("user",loginUser);
response.sendRedirect(request.getContextPath()+"/index.jsp");
}else {
request.setAttribute("login_msg","用户名或密码码错误！");
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
调用Service服务和数据库作比对，判断密码是否正确。
//UserService
@Override
public User login(User user) {
return dao.findUserByUsernameAndPassword(user.getUsername(),user.getPassword());
}
//UserDao
@Override
public User findUserByUsernameAndPassword(String username, String password) {
try {
String sql = "select * from user where username = ? and password = ?";
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);
return user;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}二丶简单功能
1.添加功能
前端：点击添加，跳转到add.jsp界面。
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>add.jsp部分代码，点击提交就会跳转到后端Servlet去编写逻辑代码。
<form action="${pageContext.request.contextPath}/addUserServlet" method="post">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<input id="return" class="btn btn-default" type="button" value="返回" />
</div>
</form>
后端，将前端获取的数据封装到一个User里，调用service服务将数据写入到数据库中。
Map<String, String[]> map = request.getParameterMap();
User user=new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
UserService service=new UserServiceImpl();
service.addUser(user);
@Override
public void add(User user) {
String sql="insert into user values(null,?,?,?,?,?,?,null,null)";
template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());
}
2.删除功能
删除功能是通过用户的id去删除，将前端传来的id得到，在调用service服务，删除数据库里数据。
function deleteUser(id) {
if (confirm("您确定要删除吗？")) {
location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id;
}
String id = request.getParameter("id");
UserService service=new UserServiceImpl();
service.deleteUser(id);
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
@Override
public void delete(int id) {
String sql="delete from user where id=?";
template.update(sql,id);
}3.修改功能
前端：拿地址和qq举例，给标签增加一个value属性，然后用el表达式，获取原来的值。
<div class="form-group">
<label for="address">籍贯：</label>
<select name="address" class="form-control" >
<c:if test="${user.address=='广东'}">
<option value="广东" selected>广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</c:if>
<c:if test="${user.address=='广西'}">
<option value="广东">广东</option>
<option value="广西" selected>广西</option>
<option value="湖南">湖南</option>
</c:if>
<c:if test="${user.address=='湖南'}">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南" selected>湖南</option>
</c:if>
</select>
<input type="text" class="form-control" name="qq" value="${user.qq}" placeholder="请输入QQ号码"/>
Map<String, String[]> map = request.getParameterMap();
User user=new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
UserService service=new UserServiceImpl();
service.updateUser(user);
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
@Override
public void updateUser(User user) {
String sql="update user set name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";
template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail(),user.getId());
}
三丶复杂功能
1.删除选中功能
js代码。
window.onload = function () {
document.getElementById("delSelected").onclick = function () {
if (confirm("您确定要删除选中条目吗？")) {
var flag = false;
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
flag = true;
break;
}
}
if (flag) {
document.getElementById("form").submit();
}
}
}删除选中就是将选中的id数组传过去，然后一条一条的删除
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String[] ids = request.getParameterValues("uid");
UserService service=new UserServiceImpl();
service.deleteSelectedUser(ids);
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
@Override
public void deleteSelectedUser(String[] ids) {
//1.遍历数组
if (ids!=null&&ids.length>0) {
for (String id : ids
) {
dao.delete(Integer.parseInt(id));
}
}
}
@Override
public void delete(int id) {
String sql="delete from user where id=?";
template.update(sql,id);
}2.分页功能
<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstcb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">
<tr>
<th><input type="checkbox" name="uid" value="${user.id}"></th>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm"
href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id})">删除</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>
<nav>
<ul class="pagination">
<c:if test="${pb.currentPage==1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage!=1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage-1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.getTotalPage}" var="i">
<c:if test="${pb.currentPage==i}">
<li class="active"><a
href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a>
</li>
</c:if>
<c:if test="${pb.currentPage!=i}">
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a>
</li>
</c:if>
</c:forEach>
<c:if test="${pb.currentPage==pb.getTotalPage}">
<li class="disabled">
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pb.currentPage<pb.getTotalPage}">
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<span style="font-size: 25px; margin-left: 5px">
共${pb.totalCout}条记录,共${pb.getTotalPage}页
</span>
</ul>
</nav>
</div>
Servlet代码：
request.setCharacterEncoding("utf-8");
String currentPage = request.getParameter("currentPage");//当前页码
String rows = request.getParameter("rows");//每页条数
//获取条件查询的参数
Map<String, String[]> condition = request.getParameterMap();
if (currentPage==null||"".equals(currentPage)){
currentPage="1";
}
if (rows==null||"".equals(rows)){
rows="5";
}
UserService service=new UserServiceImpl();
PageBean<User> pb=service.findUserByPage(currentPage,rows,condition);
request.setAttribute("pb",pb);
request.setAttribute("condition",condition);
request.getRequestDispatcher("/list.jsp").forward(request,response);
}
@Override
public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
String sql="select * from user where 1=1";
StringBuilder sb=new StringBuilder(sql);
Set<String> keySet = condition.keySet();
//参数集合
List<Object> params=new ArrayList<Object>();
for (String key:keySet
) {
if ("currentPage".equals(key)||"rows".equals(key)){
continue;
}
String value = condition.get(key)[0];
//判断value是否有值
if (value!=null && !"".equals(value)){
sb.append(" and "+key+" like ? ");
params.add("%"+value+"%");
}
}
sb.append(" limit ?,? ");
params.add(start);
params.add(rows);
return template.query(sb.toString(),new BeanPropertyRowMapper<User>(User.class),params.toArray());
}
3.模糊查询
前端：数据回显
<div style="float: left">
<form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" value="${condition.name[0]}" name="name" class="form-control" id="exampleInputName2">
</div>
<div class="form-group">
<label for="exampleInputEmail2">籍贯</label>
<input type="email" value="${condition.address[0]}" name="address" class="form-control" id="exampleInputEmail2">
</div>
<div class="form-group">
<label for="exampleInputName3">Email</label>
<input type="text" value="${condition.email[0]}" name="email" class="form-control" id="exampleInputName3">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
后端：
service:
@Override
public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
String sql="select * from user where 1=1";
StringBuilder sb=new StringBuilder(sql);
Set<String> keySet = condition.keySet();
//参数集合
List<Object> params=new ArrayList<Object>();
for (String key:keySet
) {
if ("currentPage".equals(key)||"rows".equals(key)){
continue;
}
String value = condition.get(key)[0];
//判断value是否有值
if (value!=null && !"".equals(value)){
sb.append(" and "+key+" like ? ");
params.add("%"+value+"%");
}
}
sb.append(" limit ?,? ");
params.add(start);
params.add(rows);
return template.query(sb.toString(),new BeanPropertyRowMapper<User>(User.class),params.toArray());
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
