1、采用的技术:
bootstrap+jsp+servlet+三层架构(servlet,service,dao)+mysql
注意:mysql使用的是5.5版本,使用高版本会有很多问题。可以将5.5版本安装在虚拟机上,这样方便很多
2、基本功能:
登录功能,有验证码功能 (因为这是个小demo,所以每个用户都是管理员,都有对其他用户的操作权限)-----此处很让人纠结
登陆进去有一个查询用户列表页面,该页面可以实现用户的增删改查。拓展功能为删除选中,分页功能,联合查询
登录界面:
用户列表页面:
修改页面:
添加联系人页面:
三、数据库设计
表单设计:此处的name可以理解为昵称。登录使用的是username,password俩个字段
四、环境搭建
jdk1.8,tomcat版本随意,不使用web.xml配置文件
五、代码开发
代码已上传到: https://gitee.com/hsy88/java_web_simple_case.git
视频教程:https://www.bilibili.com/video/BV1uJ411k7wy?p=782
1、登录功能:
登录的jsp页面需要请求CheckCodeServlet(功能:生成验证码),CheckCodeServlet将验证码字符串存到session域中,并将图片返回给login.jsp
把提交表单提交给LoginServlet, LoginServlet先判断验证码是否正确
如果不正确,设置验证码错误的提示信息,跳转到login.jsp,让div显示提示
如果正确,根据获取的用户名,密码到数据库查询,
查到了跳转到登录成功页面。
没查到就 设置一个用户名密码的错误提示,存到request里面,然后login.jsp使用el表达式获取提示信息,显示在div内部
login.jsp代码如下:
1 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 6 <meta name="viewport" content="width=device-width, initial-scale=1"/> 7 <title>管理员登录</title> 8 <%--bootstrap需要引入的文件,也可以使用cdn--%> 9 <link href="css/bootstrap.min.css" rel="stylesheet"> 10 <script src="js/jquery-2.1.0.min.js"></script> 11 <script src="js/bootstrap.min.js"></script> 12 <script> 13 function refreshCode() { 14 var vcode=document.getElementById("vcode"); 15 16 vcode.src="${pageContext.request.contextPath}/checkCodeServlet ?time="+new Date().getTime(); 17 } 18 </script> 19 </head> 20 <body> 21 <div class="container" style=" 400px;"> 22 <h3 style="text-align: center;">管理员登录</h3> 23 <form action="${pageContext.request.contextPath}/loginServlet" method="post"> 24 <div class="form-group"> 25 <%--lable标签的作用就是点击表单项名称,自动将焦点放到输入框,lable的for和input的id对应--%> 26 <label for="user">用户名:</label> 27 <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/> 28 </div> 29 30 <div class="form-group"> 31 <label for="password">密码:</label> 32 <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/> 33 </div> 34 35 <div class="form-inline"> 36 <label for="vcode">验证码:</label> 37 <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style=" 120px;"/> 38 <%--把验证码的图片放到超链接里,当点击超链接,执行refreshCode()方法--%> 39 <a href="javascript:refreshCode();"> 40 <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/> 41 </a> 42 </div> 43 <hr/> 44 <div class="form-group" style="text-align: center;"> 45 <input class="btn btn btn-primary" type="submit" value="登录"> 46 </div> 47 </form> 48 49 <!-- 出错显示的信息框 --> 50 <div class="alert alert-warning alert-dismissible" role="alert"> 51 <strong>${login_msg}</strong> 52 <button type="button" class="close" data-dismiss="alert" > 53 <span>×</span> 54 </button> 55 56 </div> 57 </div> 58 59 </body> 60 </html>
CheckCodeServlet:
1 package cn.itcast.web.servlet; 2 3 import javax.imageio.ImageIO; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 import java.awt.*; 10 import java.awt.image.BufferedImage; 11 import java.io.IOException; 12 import java.util.Random; 13 14 /** 15 * 验证码 16 */ 17 @WebServlet("/checkCodeServlet") 18 public class CheckCodeServlet extends HttpServlet { 19 public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { 20 21 //服务器通知浏览器不要缓存 22 response.setHeader("pragma","no-cache"); 23 response.setHeader("cache-control","no-cache"); 24 response.setHeader("expires","0"); 25 26 //在内存中创建一个长80,宽30的图片,默认黑色背景 27 //参数一:长 28 //参数二:宽 29 //参数三:颜色 30 int width = 80; 31 int height = 30; 32 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); 33 34 //获取画笔 35 Graphics g = image.getGraphics(); 36 //设置画笔颜色为灰色 37 g.setColor(Color.GRAY); 38 //填充图片 39 g.fillRect(0,0, width,height); 40 41 //产生4个随机验证码,12Ey 42 String checkCode = getCheckCode(); 43 //将验证码放入HttpSession中 44 request.getSession().setAttribute("CHECKCODE_SERVER",checkCode); 45 46 //设置画笔颜色为黄色 47 g.setColor(Color.YELLOW); 48 //设置字体的小大 49 g.setFont(new Font("黑体",Font.BOLD,24)); 50 //向图片上写入验证码 51 g.drawString(checkCode,15,25); 52 53 //将内存中的图片输出到浏览器 54 //参数一:图片对象 55 //参数二:图片的格式,如PNG,JPG,GIF 56 //参数三:图片输出到哪里去 57 ImageIO.write(image,"PNG",response.getOutputStream()); 58 } 59 /** 60 * 产生4位随机字符串 61 */ 62 private String getCheckCode() { 63 String base = "0123456789ABCDEFGabcdefg"; 64 int size = base.length(); 65 Random r = new Random(); 66 StringBuffer sb = new StringBuffer(); 67 for(int i=1;i<=4;i++){ 68 //产生0到size-1的随机值 69 int index = r.nextInt(size); 70 //在base字符串中获取下标为index的字符 71 char c = base.charAt(index); 72 //将c放入到StringBuffer中去 73 sb.append(c); 74 } 75 return sb.toString(); 76 } 77 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 78 this.doGet(request,response); 79 } 80 }
LoginServlet:
1 package cn.itcast.web.servlet; 2 3 import cn.itcast.domain.User; 4 import cn.itcast.service.UserService; 5 import cn.itcast.service.impl.UserServiceImpl; 6 import org.apache.commons.beanutils.BeanUtils; 7 8 import javax.servlet.ServletException; 9 import javax.servlet.annotation.WebServlet; 10 import javax.servlet.http.HttpServlet; 11 import javax.servlet.http.HttpServletRequest; 12 import javax.servlet.http.HttpServletResponse; 13 import javax.servlet.http.HttpSession; 14 import java.io.IOException; 15 import java.lang.reflect.InvocationTargetException; 16 import java.util.Map; 17 18 @WebServlet("/loginServlet") 19 public class LoginServlet extends HttpServlet { 20 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 21 //1.设置编码 22 request.setCharacterEncoding("utf-8"); 23 24 //2.获取数据 25 //2.1获取用户填写验证码 26 String verifycode = request.getParameter("verifycode"); 27 28 //3.验证码校验 29 HttpSession session = request.getSession(); 30 String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER"); 31 32 session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性 33 if(!checkcode_server.equalsIgnoreCase(verifycode)){ 34 //验证码不正确 35 //提示信息 36 request.setAttribute("login_msg","验证码错误!"); 37 //跳转登录页面 38 request.getRequestDispatcher("/login.jsp").forward(request,response); 39 40 return; 41 } 42 43 Map<String, String[]> map = request.getParameterMap(); 44 //4.封装User对象 45 User user = new User(); 46 try { 47 BeanUtils.populate(user,map); 48 } catch (IllegalAccessException e) { 49 e.printStackTrace(); 50 } catch (InvocationTargetException e) { 51 e.printStackTrace(); 52 } 53 54 55 //5.调用Service查询 56 UserService service = new UserServiceImpl(); 57 User loginUser = service.login(user); 58 //6.判断是否登录成功 59 if(loginUser != null){ 60 //登录成功 61 //将用户存入session 62 session.setAttribute("user",loginUser); 63 //跳转页面 64 response.sendRedirect(request.getContextPath()+"/index.jsp"); 65 }else{ 66 //登录失败 67 //提示信息 68 request.setAttribute("login_msg","用户名或密码错误!"); 69 //跳转登录页面 70 request.getRequestDispatcher("/login.jsp").forward(request,response); 71 72 } 73 74 75 } 76 77 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 78 this.doPost(request, response); 79 } 80 }
2、列表查询
分析:
六、总结
每次做完一个功能要重启服务器,负责看不到代码效果会让你以为错了,进而要浪费很长时间看哪里有问题