《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
《Bootstrap+JSP开发案例》学习相关推荐
- 【SQL学习笔记】《SQL进阶教程》1.1
SQL进阶教程学习笔记1.1 1-1case 表达式 将已有编号方式转换为新的方式并统计 SELECT CASE pref_nameWHEN '辽宁' THEN '东北'WHEN '福建' THEN ...
- 【SQL进阶教程】第一章 case表达式
本系列基于<SQL进阶教程>(如下图)学习,实现了书中代码及练习题代码.PS:电子书请大家各自默默脚本之家. [知识点1]case表达式概述 Case表达式有简单case表达式和搜索cas ...
- SQL基础教程学习第六站:数据更新
仅用于记录学习,欢迎批评指正,共同交流,共同进步,大神勿喷 系列文章 SQL基础教程学习第一站:PostgreSQL下载安装以及如何创建并登录数据库: SQL基础教程学习第二站:数据库基本知识: SQ ...
- SQL进阶教程—自链接的用法
用法 https://moonshuo.cn/posts/14085.html 可重排列,排列,组合 需求:现在我需要将这个水果的品种各个组合起来,构成一个有序对的组合 在这个过程中首先执行完毕fro ...
- SQL进阶教程—CASE表达式
所有的文件在SQL进阶教程 (ituring.com.cn),随书下载那里 概述 文章原址 基本写法 简单CASE表达式 SELECT CASE 列名称WHEN 匹配字符 THEN 转换字符WHEN ...
- SQL数据库教程-学习笔记2
SQL数据库教程-学习笔记2 文章目录 SQL数据库教程-学习笔记2 三.DML语言的学习 1.插入语句:insert into 2.修改语句:update 3.删除语句:delete 4.练习题 四 ...
- 【SAP Hana】X档案:SAP HANA SQL 进阶教程
SAP HANA SQL 进阶教程 5.HANA SQL 进阶教程 (1)Databases (2)User & Role (3)Schemas (4)Tables (5)Table Inde ...
- 【SQL学习笔记】《SQL进阶教程》1.2
1-2自连接的用法 自连接+非等值连接 自连接+GROUP BY = 递归集合 表是行的集合,面向集合 开销较大 唯二重要的方法 CASE 自连接 SQL语言 : 面向集合的特性 可重排列.排列.组合 ...
- SQL进阶教程——用SQL进行集合运算(第七章)
1. 前言 集合论是SQL语言的根基--这是贯穿全书主题之一.因为他的这个特性,SQL也被称为面向集合语言.只有从集合的角度思考,才能明白SQL的强大. 但是,实际上这一点长期以来都被很多人忽略了.造 ...
- SQL进阶教程 | 史上最易懂SQL教程 5小时零基础成长SQL大师
目录 第一部分:基础--增删查改 [第一章]做好准备 Getting Started (时长25分钟) [第二章]在单一表格中检索数据 Retrieving Data From a Single Ta ...
最新文章
- 真正的飞车-赛道狂飙:日出极限版
- 个性化邮件系统用例设计和实现
- python中的 set 中的元素
- Android Camera的使用(一) 读书笔记
- Python3异常处理
- 前端面试知识点(所谓的面试题)(备份前端网)
- SAP License:SAP会计凭证抬头的字段状态控制
- clickhouse创建数据库以及表
- fastdfs安装部署
- 科大讯飞:5年内 科技会场没机器人端茶倒水就太low了
- nested exception is org.apache.ibatis.executor.ExecutorException: No constructor found in com.chengg
- 产品需求分析思路和方法
- 三星typec转接耳机没反应_1MORE最新双旗舰无线降噪耳机评测:国货强于外夷的希望...
- 剑指Offer之二维数组中的查找
- 滴滴Booster移动APP质量优化框架 学习之旅
- nc命令应用场景及使用
- Apache BookKeeper 简介
- 从window到linux的折腾
- 制造商将注意力转向轻质量以进一步提高LED市场份额
- python 模拟按照指定概率进行抽样