電信計費(五)

weixin_33978044發表於2018-07-28

一.驗證碼匹配圖解分析

2355990-6a4b7b0de29095d8.png
1.png

分析:
1.瀏覽器通過訪問路徑/toLogin.do訪問伺服器,伺服器用MianServlet轉發給login.jsp處理請求,然後向瀏覽器做出響應返回一個html
2.1瀏覽器對網頁進行載入(文字轉換成物件顯示),瀏覽器向伺服器傳送請求,要求返回路徑相對應的圖片
2.2圖片由靜態變成動態,伺服器用MianServlet中的creatImg()方法去調ImageUtil這個工具類,返回圖片和驗證碼字串
3.處理表單中的請求點選登入後,伺服器通過MianServlet中的login()方法去驗證登入,那麼這裡新增判斷驗證碼判斷的邏輯
第二個請求生成驗證碼給第三個請求使用,需要用session去儲存

二.驗證碼業務實現

1.在MainServlet類中增加createImg()生成驗證碼圖片的方法,裡面通過ImageUtil工具類去生成圖片陣列,元素1位字串存在session中,元素2點陣圖片使用流傳送到瀏覽器上

// 生成驗證碼
    protected void createImg(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        // 生成驗證碼及圖片
        Object[] objs = ImageUtil.createImage();
        // 將驗證碼存入session
        HttpSession session = req.getSession();
        session.setAttribute("imgcode", objs[0]);
        // 將圖片傳送給瀏覽器
        res.setContentType("image/png");
        // 獲取位元組輸出流,該流由伺服器建立,
        // 其目標就是當前訪問的那個瀏覽器.
        OutputStream os = res.getOutputStream();
        BufferedImage img = (BufferedImage) objs[1];
        ImageIO.write(img, "png", os);
        os.close();
    }

2.在重寫的service方法裡做路徑判斷

else if("/createImg.do".equals(path)) {
     createImg(req,res);
} 

3.在login.jsp介面中的要驗證碼圖片進行路徑的替換,並且新增點選事件

 <tr>
      <td class="login_info">驗證碼:</td>
      <td class="width70"><input name="" type="text" class="width70" /></td>
      <!-- <td><img src="images/valicode.jpg" alt="驗證碼" title="點選更換" /></td>   -->
      <td><img src="createImg.do" onclick="this.setAttribute('src','createImg.do?x='+Math.random());" alt="驗證碼" title="點選更換" /></td>
      <td><span class="required"></span></td>              
</tr>        
2355990-ced7a4f48f9a6b55.png
2.png

注:
這裡新增單擊事件去切換驗證碼實質上是隨機動態更改圖片的請求路徑

4.做登入的驗證,驗證這個驗證碼和填寫的是否一致,在login.jsp的驗證碼的邏輯處name="code",

  <td class="width70"><input name="code" type="text" class="width70" /></td>

5.在MianServlet中的login()方法去驗證登入

String code = req.getParameter("code");

// 檢查驗證碼
HttpSession session = req.getSession();
String imgcode = (String) session.getAttribute("imgcode");
if (code == null || !code.equalsIgnoreCase(imgcode)) {
    req.setAttribute("error", "驗證碼錯誤");
    req.getRequestDispatcher("WEB-INF/main/login.jsp").forward(req, res);
    return;
}

三.登入檢查圖解分析

2355990-2a2cec8464f1fed2.png
3.png

分析:
1.瀏覽器向伺服器傳送請求,伺服器交給LoginFilter過濾器去處理
2.當登入成功後,把adminCode存入session中,後面用過濾器判斷登入成功
3.如果過濾器判斷沒有登入過去重定向到登入介面,如果登陸過則可以訪問其他的介面

四.登入檢查業務實現

1.在src/main/java->web下建立LoginFilter檔案,並實現Filter介面
2.在doFilter方法中從session中獲取賬號,並做判斷

 // 從session中獲取賬號
HttpSession session = req.getSession();
Object user = session.getAttribute("adminCode");
// 判斷使用者是否登入
if (user == null) {
    // 沒登入,重定向到登入頁
    res.sendRedirect(req.getContextPath() + "/toLogin.do");
} else {
    // 已登入,請求繼續執行
    chain.doFilter(req, res);
}

注:
這裡重定向採用的是絕對路徑,所以用req.getContextPath()更加靈活

3.在web.xml中配置

 <!-- 登入檢查過濾器 -->
  <filter>
    <filter-name>login</filter-name>
    <filter-class>web.LoginFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>login</filter-name>
    <url-pattern>*.do</url-pattern>
  </filter-mapping>

注:
這裡先全部過濾,然後再在LoginFilter類中進行篩除

4.把不需要過濾的路徑新增到陣列中,再去獲取當前的路徑,然後遍歷判斷陣列中的路徑是否和當前的路徑相等,如果相等則不需要過濾,後面程式碼不需要執行,程式的請求繼續執行

String[] paths = new String[] { "/toLogin.do", "/login.do", "/createImg.do" };
String current = req.getServletPath();
for (String p : paths) {
    if (p.equals(current)) {
        chain.doFilter(req, res);
        return;
    }
}

相關文章