《Bootstrap+JSP開發案例》學習

《Bootstrap+JSP開發案例》學習

本次學習到的主要內容

前臺登錄頁面

JS 表單驗證

PrepareStatement 接口

密碼MD5加“鹽”加密

前言

最近在瞭解 JSP，於是乎在網上找到了李興華的一個視頻教程——Bootstrap+JSP開發案例（點擊可在線觀看，網易雲課堂中還提供了離線下載）。視頻很短，不過仍然受益匪淺。

在環境的選擇上，我並沒有按着他的配置（Windows7 + IDEA15），而是選擇了自身方便的環境——macOS 10.12.5 + Eclipse4.6。畢竟工具的使用大同小異，主要學習如何去編碼。在有限的時間裏頭先學習對自己提升最大的事物。

學習瞭如何將Bootstrap、jquery、JSP、JDBC的綜合使用。

筆記

以下看視頻時所做的一些筆記：

原始信息的保存，方便用戶在盜號時找回密碼

id 是爲 JavaScript 服務的，而 name 是爲了 JSP 的接收數據服務的，一般 id 和 name 名相同

現在對前端開發要求是很高的，除了會界面的設計之外，還需要掌握的是 JavaScript 的編程

前臺登錄頁面

在實際開發中考慮到傳輸量的問題，所以文件的內容越少越好。（因此，以下導包的時候都是選擇以 “min” 爲後綴的文件，去除了各種格式，使得文件的內容儘可能的少）

Bootstrap 是基於 jQuery 開發框架設計的，所以需要將 jQuery 的開發包拷貝到項目。使用的時候，也應該先導入 jQuery 的開發包

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

界面通過 Bootstrap 進行頁面設計，通過 Bootstrap 可以輕鬆設計出漂亮簡潔的界面來。不過由於視頻篇幅的影響，所以並沒有詳細的講解 Bootstrap，所以後期還需要自己學習一下。

JS 表單驗證

照着敲之後，發現自己對 JS 實在是不熟悉，mark 下來，下次要學習一下。

以下代碼是對登錄名以及登錄密碼進行判斷，判斷是否爲空：

$(function() { // 頁面加載的操作處理
    // 需要做一個針對於 mid 或者是 password 輸入的字段丟失焦點的事件處理
    $("#mid").on("blur",function() {
        validateMid() ;
    }) ;
    $("#password").on("blur",function() {
        validatePassword() ;
    }) ;
    // 對於整個的表單需要進行提交前的檢查操作
    $("#loginForm").on("submit",function() {
        return validateMid() && validatePassword() ;
    }) ;
}) ;

function validateMid() {
    return validateEmpty("mid") ;
}

function validatePassword() {
    return validateEmpty("password") ;
}

/**
 * 本函數的主要功能是驗證所傳入的數據是否爲空
 * 如果輸入的內容爲空，那麼對於整個層要求進行錯誤提示：has-error 通過has-success；
 * 在 xxSpan 中顯示爲空的錯誤信息
 * @param eleId 要判斷的元素的 ID 編號
 * @returns
 */
function validateEmpty(eleId) {
    if($("#" + eleId).val() == "") { // 如果輸入的內容爲空
        $("#" + eleId + "Div").attr("class", "form-group has-error") ;
        $("#" + eleId + "Span").html("<span class='text-danger'>該字段的內容不允許爲空！</span>") ;
        return false ;
    } else {  // 內容不爲空
        $("#" + eleId + "Div").attr("class", "form-group has-success") ;
        $("#" + eleId + "Span").html("<span class='text-success'>該字段的內容輸入合法！</span>") ;
        return true ;
    }
}

PrepareStatement 接口

傳輸中的 SQL 注入漏洞，在開發中 Statement 不可能使用的，所以必須使用的是 PrepareStatement 接口處理。

以 Statement 爲例：

Class.forName("com.mysql.jdbc.Driver"); // 加載數據庫的驅動程序
Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test", "root", "root");
Statement stmt = conn.createStatement(); // 本次使用就是爲了進行問題的分析
String sql = "SELECT COUNT(*) FROM member WHERE mid='" + mid + "' AND password='" + password + "'";
ResultSet rs = stmt.executeQuery(sql);

如果輸入密碼時輸入例如：f’=’s’ OR ‘1’=’1

以上是視頻中的輸入例子，實際上也可以簡單的輸入：’OR”=’

(OR 大小寫都可以)

所收到的 SQL 語句則變成了：

SELECT COUNT(*) FROM member WHERE mid='test' AND password='f'='s' OR '1'='1'
SELECT COUNT(*) FROM member WHERE mid='test' AND password='' OR ''=''

從而不需要有正確的密碼也可以成功登錄成功。故需要使用 PreparedStatement 接口來實現這一功能，代碼改寫爲：

Class.forName("com.mysql.jdbc.Driver"); // 加載數據庫的驅動程序
Connection conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test", "root", "root");
String sql = "SELECT COUNT(*) FROM member WHERE mid=? AND password=?";
PreparedStatement stmt = conn.prepareStatement(sql);
stmt.setString(1, mid);
stmt.setString(2, password);
ResultSet rs = stmt.executeQuery();

以此來解決 SQL 注入漏洞問題。

密碼MD5加“鹽”加密

MySQL 支持 MD5 對密碼進行加密處理，我們也可以寫一個工具類，將密碼進行 MD5 加密後再發送給數據庫。對此，先通過互聯網直接搜索別人寫好的 MD5 工具類，有空再去研究一下其中的算法。

使用 MD5 進行加密處理之後，密碼的長度永遠都是 32 位，並且這個加密處理是不可逆的。
嚴格來講如果要使用 MD5 還可以進行加鹽處理，類似於：“密碼{用戶名}”。

思路：

獲取輸入的密碼：request.getParameter(“password”)

加“鹽”的方式有很多，例如視頻中是在密碼的後面加“{用戶名}”，組合成新的字符串。也有在創建賬號時隨機生成一串字符串，然後再和密碼組合在一起進行 MD5 加密，數據庫記錄該隨機字符串以及加密後的密碼。

再通過工具類對該字符串進行 MD5 加密

如此一來，數據庫中保存的密碼便是加“鹽”加密後的密碼，即使被獲取了，也難以知道真實密碼是什麼，從而在一定程度上保障了賬號的安全。

後記

本文基於個人的學習
分享出來純當給大家參考一下，也當作自己的筆記

編輯：HochenChong
時間：2017-06-21