《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