文章目錄
- 一,改造登錄案例
- --1,概述
- --2,改造
- 二,HTML
- --1，概述
- --2，入門案例
- --3，使用Hbuilder
- 三,常用標簽
- --1,概述
- --2,常用標簽
- --3,表格標簽
- --4,表單標簽form
- --5,無法提交的問題
- 作業
一,改造登錄案例
–1,概述
現在的寫法中,出現了SQL注入攻擊的現象.
原因是: 用戶輸入了非法字符#,#在SQL陳述句里是注釋的意思,改變了SQL語意.
是Statement的傳輸器功能不夠強大.要用PreparedStatement替換.
Statement: 不安全,低效,SQL拼接復雜
PreparedStatement: 安全,高效,不需要SQL拼接直接用?作為占位符,再給?設定值–框架也在用
–2,改造
package cn.tedu.test;
import java.sql.*;
import java.util.Scanner;
//測驗用戶表
public class Test2 {
public static void main(String[] args) throws Exception {
// method();//查詢所有用戶資訊
method2();//根據用戶名和密碼查詢,用戶資訊,查到了才能登錄
}
//模擬用戶登錄:利用JDBC,根據用戶名和密碼查詢用戶資訊
private static void method2() throws Exception{
//注冊驅動
Class.forName("com.mysql.jdbc.Driver");
//獲取資料庫的連接
String url="jdbc:mysql://localhost:3306/cgb2106?characterEncoding=utf8" ;
Connection c = DriverManager.getConnection(url,"root","root");
String a = new Scanner(System.in).nextLine();
String b = new Scanner(System.in).nextLine();
//獲取傳輸器
// Statement s = c.createStatement();//缺點:不安全,低
String sql = "select * from user where name=? and password=?";
//SQL骨架,?叫占位符
PreparedStatement ps = c.prepareStatement(sql);
//設定引數
ps.setString(1,a);//給第一個?設定a的值
ps.setString(2,b);//給第二個?設定b的值
//執行SQL
ResultSet r = ps.executeQuery();
//處理結果集
if( r.next() ){//next()用來判斷有沒有資料,查到了回傳true
System.out.println("恭喜您,登錄成功!");
}else{
System.out.println("用戶名或者密碼輸入錯誤!");
}
//釋放資源
r.close();
ps.close();
c.close();
}
//利用JDBC,查詢所有用戶資訊
private static void method() throws Exception {
//注冊驅動
Class.forName("com.mysql.jdbc.Driver");
//獲取資料庫的連接
String url="jdbc:mysql://localhost:3306/cgb2106?characterEncoding=utf8" ;
Connection c = DriverManager.getConnection(url,"root","root");
//獲取傳輸器
Statement s = c.createStatement();
//執行SQL
ResultSet r = s.executeQuery("select * from user");
//處理結果集
while( r.next() ){//如果有資料就回傳true
String id = r.getString(1);//獲取資料
String name = r.getString(2);//獲取資料
String pwd = r.getString(3);//獲取資料
System.out.println(id+name+pwd);
}
//釋放資源
r.close();
s.close();
c.close();
}
}
二,HTML
–1，概述
專門用來制作網頁的技術,是超文本標記語言.
超文本: 比文本的功能要強大,網頁中可以插入 圖片 音頻視頻等...
標記: 也叫標簽,用<???> ,不同的標簽有不同的功能
–2，入門案例
<!doctype html>
<html>
<head></head>
<body>
he llo html~
hello html~
hello html~ <br>
hello html~
hello html~
hello html~
</body>
</html>
–3，使用Hbuilder
新建專案-選中專案-新建-XX.html檔案
三,常用標簽
–1,概述
使用不同的標簽,實作 在網頁中 插入不同型別的元素
–2,常用標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 6.輸入框 -->
<input type="text"/>
<input type="password" placeholder="手機號"/>
<input type="week"/>
<input type="date"/>
<input type="datetime"/>
<input type="number"/>
<input type="email"/>
<input type="radio"/> 男
<input type="checkbox"/> 楊冪
<input type="button" value="點我"/>
<!-- 5.超鏈接標簽a
href指定跳轉到哪個網址
target是以什么方式打開(默認是_self當前視窗打開),_blank是新視窗打開
-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F%E7%A1%AE%E8%AF%8A55%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank">31省區市新增本土確診55例</a>
<a name="top">我是頂部</a>
<h2>廣東富婆通訊錄</h2>
<h2>廣東富婆通訊錄</h2>
<h2>廣東富婆通訊錄</h2>
<h2>廣東富婆通訊錄</h2>
<h2>廣東富婆通訊錄</h2>
<!-- 錨定: 回到一個固定位置 -->
<a href="#top">點我回到頂部</a>
<!-- 1.標題標簽: 在網頁中 插入標題 h1大~h6小-->
<h1>風雨有我在 人民請放心</h1>
<h2>風雨有我在 人民請放心</h2>
<h3>風雨有我在 人民請放心</h3>
<h4>風雨有我在 人民請放心</h4>
<h5>風雨有我在 人民請放心</h5>
<h6>風雨有我在 人民請放心</h6>
<!-- 2.串列標簽: ul(unorderlist)+li 無序串列-->
<ul>
<li>北京嚴控中高風險地區人員進京</li>
<li>北京嚴控中高風險地區人員進京</li>
</ul>
<!-- 3.串列標簽: ol(orderlist)+li 有序串列-->
<ol>
<li>北京嚴控中高風險地區人員進京</li>
<li>北京嚴控中高風險地區人員進京</li>
</ol>
<!-- 4.圖片標簽img : 通過src屬性指定圖片的位置
width:修飾了圖片的寬度 height:修飾了圖片的高度(單位是像素)
-->
<img src="a.png" width="150px" height="50px"/>
<img src="a.png" width="150px" height="50px"/>
</body>
</html>
–3,表格標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表格標簽</title>
</head>
<body>
<!-- 練習表格: th標簽比td多了元素加粗的效果
colspan用來合并列 rowspan用來合并行
-->
<table border="1px">
<tr>
<th>總頁面流量</th>
<th>共計來訪</th>
<th>會員</th>
<th>游客</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
</table>
<!-- 1. table向網頁中插入表格
tr表示表格里的行元素,td表示行里的列元素
width / height 寬度/高度 border邊框 bgcolor是背景顏色 cellspacing單元格間距
合并列 colspan 合并行 rowspan
-->
<table width="300px" height="50px"
border="3px" bgcolor="pink" cellspacing="0px">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
–4,表單標簽form
本質就是一個表格,表單 比表格 多了 資料提交的 功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單標簽</title>
</head>
<body>
<!-- 創建表單,
下拉框:select(下拉) + option(選項)
檔案上傳: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注冊表單</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<tr>
<td>用戶名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵稱:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
<input type="checkbox" />籃球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="點我換一張" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述資訊...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
–5,無法提交的問題
步驟:
1,把提交的按鈕必須改成submit型別
2,給標簽加name屬性
3,當提交資料時,會把用戶輸入的資訊jack提交給服務器
http://127.0.0.1:8848/cgb2106/test03.html?user=jack
http://127.0.0.1:8848/cgb2106/test03.html?user=12&abc=123&age=18
4,改造網頁檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單標簽</title>
</head>
<body>
<!-- 創建表單,
下拉框:select(下拉) + option(選項)
檔案上傳: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注冊表單</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<tr>
<td>用戶名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" name="repwd" />
</td>
</tr>
<tr>
<td>昵稱:</td>
<td>
<input type="text" name="nick" />
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="email" name="mail" />
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<!-- 想單選就必須設定name屬性,而且值必須相同
設定好name屬性資料就可以提交了,但是默認提交了on
-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
<input type="checkbox" />籃球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="點我換一張" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述資訊...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
作業
1,完善現在的form表單,能夠提交資料
2,練習學生管理系統的表單
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/291692.html
標籤：其他
上一篇：Tomcat性能調優