《Bootstrap+JSP开发案例》学习

时间:2022-01-13 13:12:08

《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