2. 程式人生 > >SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫

SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫

阿新 • • 發佈：2019-01-10

SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫

本篇內容：

（1）在登入成功時，使用 sessionStorage 儲存使用者的使用者名稱，並在登入成功後的首頁上展示使用者名稱。

（2）js 圖片驗證碼，使用 js 和 canvas 實現登入時，進行一個人機驗證，可減少一些網路爬蟲對伺服器的影響。

（3）登入時，載入動畫，不至於在點選登入後，沒有反應，使用者也不知道成美成功，等一會，準備重新輸入了，自己跳轉了。使用者體驗機及其不好。

效果演示：
在這裡插入圖片描述

一、專案準備

準備專案

  • 如果只是想學習前端的優化，是沒有辦法體驗到登入後，在頁面上獲取 sessionStorage 資料的部分。

  • 本次只是對前端的一個優化，所以就不再提供整個專案原始碼了，因為很多都是跟著之前的部落格做的專案基礎，所以請先構建上一篇的專案。

  • 上一篇：SSM 實訓筆記 -09- 使用 Spring MVC + JDBC Template 實現登入（maven）

二、前端檔案原始碼

老規矩，先看專案結構：

（1）login_mvc.html 檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
 
使用者登入</title>
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
    <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
    <
 
script type="text/javascript">
        function login() {
            var uname = $("#uname").val();
            var upwd = $("#upwd").val();
            var input_Code = $("#vode").val();

            if (uname == null || uname == "") {
                $("#unameMsg").html("使用者名稱不能為空!");
                return;
            } else
                $("#unameMsg").html("");
            if (upwd.length == 0) {
                $("#upwdMsg").html("密碼不能為空!");
                return;
            } else
                $("#upwdMsg").html("");
            if (upwd.length < 6 || upwd.length > 12) {
                $("#upwdMsg").html("密碼應該在 6-12 位之間!");
                return;
            } else
                $("#upwdMsg").html("");

            // 驗證碼判斷
            if(input_Code.toLowerCase()!=verVal.toLowerCase()){
                //alert("驗證碼輸入錯誤！");
                $("#vcodeMsg").html("驗證碼輸入錯誤!");
                return;
            }
            $.ajax({
                url: "login.do",
                method: "get",
                data: $("#loginForm").serialize(),
                timeout:10000,
                beforeSend:function(){
                    //alert('遠端呼叫開始...');
                    $("#loading").html("<img src='/img/loading.gif' style='width: 50px'/>");
                },
                complete:function(){
                    // alert('遠端呼叫成功，狀態文字值：'+textStatus);
                    $("#loading").empty();
                },
                success: function (result) {
                    if (result == "true") {
                        //登入成功存一下 使用者名稱
                        sessionStorage.setItem("uname",uname);
                        sessionStorage.setItem("role",upwd);
                        window.location.href = "index.html";
                    } else {
                        $("#loginMsg").html("登入失敗，請重試！");
                    }
                },
                error: function () {
                    alert("請求伺服器失敗!");
                }
            });
        }

    </script>

</head>
<body>
<br><br>
<br><br>

<form name="loginForm" id="loginForm">
    <div class="center-block" style="width: 45%;height: 350px">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-apple"></span>使用者登入

            </div>
            <div class="panel-body">
                <div class="text-success" align="center">
                    <h3>歡迎使用資源統一管理系統</h3>
                </div>
                <div class="input-group">
                    <label class="input-group-addon">使用者名稱</label>
                    <input class="form-control" type="text" id="uname" name="uname" placeholder="請輸入使用者名稱">
                    <label class="input-group-addon text-warning">*</label>
                </div>
                <label id="unameMsg" style="color: red"></label><br>
                <div class="input-group">
                    <label class="input-group-addon">密&nbsp;&nbsp;&nbsp;碼</label>
                    <input class="form-control" type="password" id="upwd" name="upwd" placeholder="請輸入密碼">
                    <label class="input-group-addon text-warning">*</label>
                </div>
                <label id="upwdMsg" style="color: red"></label><br>
                <div class="input-group">
                    <label class="input-group-addon">權&nbsp;&nbsp;&nbsp;限</label>
                    <select id="role" name="role" class="form-control ">
                        <option value="admin">管理員</option>
                        <option value="teacher">教師</option>
                        <option value="student">學生</option>
                    </select>
                </div>
                <br>
                <div class="form-inline">
                <div class="input-group">
                    <label class="input-group-addon">驗證碼</label>
                    <input id="vode" class="form-control" placeholder="請輸入4位字母和數字">
                </div>
                <a href="javascript:resetCode()">

                    <canvas width="100" height="40" id="verifyCanvas"></canvas>
                    <img id="img_vcode" alt="4位驗證碼">點選重新整理

                </a>
                </div>

                <label id="vcodeMsg" style="color: red"></label>
            </div>
            <div align="center">
                <div id="loading"></div>
                <label id="loginMsg" style="color: red"></label>
                <a href="javascript:login()" class="btn btn-danger"><span
                        class="glyphicon glyphicon-log-in"></span> 登入</a>&nbsp;&nbsp;
                <a href="javascript:loginForm.reset()" class="btn btn-primary"><span
                        class="glyphicon glyphicon-remove"></span> 重置</a>
            </div>
            <br>
            <div class="panel-footer">
                <div align="center">
                    &copy;2018-2019 肖朋偉的 CSDN 部落格 Copy Right

                </div>

            </div>

        </div>

    </div>
</form>


<!--引入 js 驗證碼-->
<script type="text/javascript" src="js/vcode.js"></script>

</body>
</html>

（2）index.html 檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後臺管理系統首頁</title>
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/node_modules/bootstrap3/dist/css/bootstrap-theme.css">
    <script type="text/javascript" src="js/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="js/node_modules/bootstrap3/dist/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $("#uname").html(sessionStorage.getItem("uname") + " <span class=\"caret\"></span>")
        })
    </script>
</head>
<body>

<!--登入導航欄-->
<div class="nav navbar-fixed-top navbar-inverse ">
    <div style="margin-top:12px">
    <span style="color: brown;font-size: xx-large" class="col-lg-offset-1"><label class="glyphicon glyphicon-apple"></label> ***後臺管理系統</span>

    <div class="dropdown pull-right" style="margin-right: 10px">
        <button type="button" class="btn dropdown-toggle" id="uname" data-toggle="dropdown">使用者名稱
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="uname">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">個人中心</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">修改密碼</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">幫助中心</a>
            </li>
            <li role
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫

     
  
 
  
  
 SSM 實訓筆記 -10- 使用 sessionStorage 儲存資料、js 圖片驗證碼、登入載入動畫 
 本篇內容： 
 （1）在登入成功時，使用 sessionStorage 儲存使用者的使用者名稱，並在登入成功後的首頁上展示使用者名稱。 
 （2）js 圖片驗證碼，使用 js 和 



  
 

    


    
    
SSM 實訓筆記 -11- 使用 Spring MVC + JDBC Template 實現篩選、檢索功能（maven）

     
  
 
  
  
 SSM 實訓筆記 -11- 使用 Spring MVC + JDBC Template 實現篩選、檢索功能（maven） 
 本篇是新建的一個數據庫，新建的一個完整專案。 
 本篇內容： （1）使用 Spring MVC + JDBC Template 實現資料庫查詢 
 （2）實現對資 



  
 

    


    
    
SSM 實訓筆記 -09- 使用 Spring MVC + JDBC Template 實現登入（maven）

     
  
 
  
  
 SSM 實訓筆記 -09- 使用 Spring MVC + JDBC Template 實現登入（maven） 
 本篇內容： 
 （1）使用 Spring MVC 替代原來的令人腦殼兒疼的 Servlet。 
 （2）先看下 Spring MVC 對比 Servlet 的簡化程度： 
 



  
 

    


    
    
SSM 實訓筆記 -08- 使用 Spring JDBC Template 對資料庫查詢（登入）和刪除（maven）

     
  
 
  
  
 SSM 實訓筆記 -08- 使用 Spring JDBC Template 對資料庫查詢（登入）和刪除（maven） 
 Spring JDBC 提供了 Spring JDBC Template，大大簡化了對資料庫的操作，其中JdbcTemplate 是最常用的，下面介紹 
 本篇內容： 



  
 

    


    
    
SSM 實訓筆記 -12- 開源 Spring+Spring MVC+JDBC Template 增刪改查 前期專案（maven）

     
  
 
  
  
 SSM 實訓筆記 -12- 開源 Spring+Spring MVC+JDBC Template 增刪改查 前期專案（maven） 
 實訓前期小專案，大佬勿笑 
  僱員資訊管理系統 
 2019-01-11 
 專案簡介： 
  
  內容： Spring + Spring MVC  



  
 

    


    
    
PHP生成圖片驗證碼、點擊切換實例

     
 調用   ret   image   etc   格式   點擊切換   article   png   get   http://www.jb51.net/article/51506.htm

現在讓我們來看下 PHP 代碼
復制代碼代碼如下:
<?php session_start();functi 



  
 

    


    
    
Python程式設計從入門到實踐筆記——異常和儲存資料

     
 Python程式設計從入門到實踐筆記——異常和儲存資料 
 
 #coding=gbk
#Python程式設計從入門到實踐筆記——異常和儲存資料
#10.3異常
#Python使用被稱為異常的特殊物件來管理程式執行期間發生的錯誤。每當發生讓Python不知所措的錯誤時，它都會建立一個異常物件。
#如果編寫了處 



  
 

    


    
    
Python學習筆記 Day12 json儲存資料及階段總結

     
  
  
  
 Day 12 json儲存資料 及 階段總結 
  
   json格式化 
    
    JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用完全獨立於程式語言的文字 



  
 

    


    
    
ssm實訓小結

     
  
 
    在本次實訓中，學習了SpringMVC、Mybatis及兩者的整合即ssm框架。SpringMVC的實現原理是通過Servlet攔截所有URL來達到控制的目的，也瞭解到和掌握了SpringMVC和Mybatis的使用步驟。
 
  
  SpringMVC的流程  



  
 

    


    
    
最為一個大學生的實訓筆記（一）

     
 
								
								            
						
                
實訓筆記：供於自己以後參考，大家也可以讀讀。
實訓第三天；
今天給我們將了敏捷開發的創始：thoughtworks
thoughtworks：ThoughtWorks在90年代後期與相關專家合作首創了 



  
 

    


    
    
2017-12-24實訓筆記

     
 
                
敏捷開發
trello線上看板
一、迴圈（continue和break）
1、continue：continue語句是提前結束本次迴圈，進入下一次迴圈。
2、break：用來從迴圈體內跳出迴圈，提前結束迴圈，接著執行後面的語句。
3、for的用法：
for（表示式1；表示式 



  
 

    


    
    
Caffe學習筆記10：影象資料生成caffe需要的（laveldb和lmdb）資料檔案

     
 
								
								            
						
                
        在深度學習的實際應用中，我們經常用到的原始資料是圖片檔案，如jpg,jpeg,png,tif等格式的，而且有可能圖片的大小還不一致。而在caffe中經常使用的資料型別是lmdb或lev 



  
 

    


    
    
實訓筆記2017.12.23

     
 
                
1.寫程式碼常用工具
  codeblocks、trubo c、inetlli idea、github、notepad++、hbuilder
  csdn、cnblog（做筆記可以用的）
2.oracle是全球最大的資料公司
   oceanbase是阿里巴巴開發的處理資料 



  
 

    


    
    
關於sessionStorage儲存資料例子vue

     
 
							
							
							我們在vue中，經常通過事件攜帶著引數來進行處理，有時候還需要將這些資料儲存起來，一般有vuex，sessionStorage，localStorage進行儲存，其中vuex儲存只要當我們重新整理頁面資料就會丟失，這當然不是我們想要的結果；在看sessionSt 



  
 

    


    
    
實訓筆記1

     
 
                
JDK ，識別符號，常量和變數命名規範

由於開始實訓了，基本上每天上完課後都要做筆記，主要還是寫了之後自己隔段時間就看看以免遺忘，從JAVA最基本的東西開始記，歡迎到來的訪客，不喜勿噴。
一.JDK環境變數配置1.
配置：
右鍵計算機-->屬性-->高階系統設 



  
 

    


    
    
SSM框架下登入頁面，圖片驗證碼，密碼加密對比資料庫資料（二）

     
 
							
							
							登入頁面的Controller的程式碼如下：
在這過程中，需要對填入資料進行判斷，是否為使用者名稱存在？是否密碼有誤？是否驗證碼有誤？如若都沒有錯誤則頁面跳轉至登入成功頁面。
@RequsetMapper("/login.do")
public @Respons 



  
 

    


    
    
雲端儲存資料的一般完整性驗證

     
 
                
最近畢設做的是雲端儲存資料的完整性研究，因而現在對這裡有了一點了解，現在把自己的理解寫下來，也是為了加深理解吧！
資料的完整性驗證是指驗證收到的資料和原來的資料是否保持完全一致的證明手段成為完整性驗證。完整性驗證也分為一般完整性驗證和遠端完整性驗證，一般完整性驗證是指從伺服 



  
 

    


    
    
10.24 筆記 android 圖片驗證碼的生成

     
 
                
轉載：
http://www.eoeandroid.com/thread-329148-1-1.html



package com.example.demo3;


import java.util.Random;  
import android.graphics.B 



  
 

    


    
    
Python3.4---實戰專案-自動下載圖片驗證碼，並儲存到專門資料夾，使用圖片驗證碼庫識別，然後打印出來

     
 
							
							
							Python3.4—實戰專案-自動下載圖片驗證碼，並儲存到專門資料夾，使用圖片驗證碼庫識別，然後打印出來



1、環境部署 
參考文章《使用Python識別圖片驗證碼》內容，製造好圖片驗證碼識別庫msweb1.dat 
1.1、對圖片驗證碼隨時下載的URL地址 



  
 

    


    
    
PHP GD 生成圖片驗證碼+session獲取儲存驗證碼

     
 mark   ast   rac   alloc   orm   ext   random   col   nbsp   

    以下分享一個PHP制作的圖片驗證碼案例：案比例如以下圖：


   運用PHP GD具體請看：http://www.php.net/manual/zh/book.im