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="width: 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="width: 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、列表查詢
分析:
六、總結
每次做完一個功能要重啟服務器,負責看不到代碼效果會讓你以為錯了,進而要浪費很長時間看哪里有問題