1.使用Eclipse開發Web專案（JSP） tomcat
2.在Eclipse中創建的Web專案：
瀏覽器可以直接訪問webContent中的檔案
例如http://localhost:8080/MyJspProject/index1.jsp
其中的index1.jsp就在WebContent目錄中；
但是WEB-INF中的檔案 無法通過客戶端（瀏覽器）直接訪問，只能通過請求轉發來訪問
注意：并不是任何的內部跳轉都能訪問WEB-INF；原因是跳轉有兩種方式：請求轉發、重定向
3.配置tomcat運行時環境
jsp <->Servlet
a.將tomcat/lib中的servlet-api.jar加入專案的構建路徑（只加一個）
b.右鍵專案 -> Build Path -> Add library - Server Runtime（加一堆jar）【推薦】
4.部署tomcat
在servers面板新建一個tomcat實體，再在該實體中部署專案（右鍵-add）
注意：一般建議將eclipse中的tomcat與本地tomcat保持一致；
將eclipse中的tomcat設定為托管模式：【第一次】創建tomcat實體之后，雙擊，選擇Server Location的第二個
5.統一字符集編碼
a.編碼分類：
設計jsp檔案的編碼（jsp檔案中的pageEncodeing屬性）：jsp -> java
設定瀏覽器讀取jsp檔案的編碼（jsp檔案中content屬性）
一般將上述設定成一致的編碼，推薦使用UTF-8
b.文本編碼：
i.將整個Eclipse中的檔案統一設定（以后的jsp編碼都會utf-8）【推薦】
ii.設定某一專案（右鍵檔案-properties）
iii.設定單獨檔案
6.JSP的頁面元素
HTML java代碼（腳本Scriptlet） 指令 注釋
a.腳本Scriptlet
i.
1 <%2 區域變數、java陳述句3 %>
ii.
1 <%!2 全域變數、定義方法3 %>
iii.
1 <%=2 輸出運算式3 %>
修改web.xml、組態檔、java需要重啟tomcat服務，但是如果修改Jsp/html/js/css代碼不需要重啟
注意：out.println()不能回車；要想回車：<br\>，即out.print() <%= %>可以直接決議html代碼
b.指令
page指令
1 <%@ page language="java" contentType="text/html; charset=UTF-8"2 pageEncoding="UTF-8" import="java.util.Date"%>
屬性：
language：jsp頁面使用的腳本語言
import：匯入類
pageEnconding：jsp檔案自身編碼 jsp -> java
contentType:瀏覽器決議自身的編碼
c.注釋
html注釋
1 <!--可以被客戶通過瀏覽器查看原始碼所觀察到-->
java注釋
1 //2 /*...*/
jsp注釋
1 <%-- --%>
7.JSP九大內置物件
（自帶，無需new也能使用的物件）
out:輸出物件，向客戶端輸出內容
request：請求物件；存盤“客戶端向服務端發送的請求訊息“
request物件的常見方法：
String getParameter(String name); 根據請求的欄位名key（input標簽的name屬性），回傳欄位值value（input標簽的value屬性）
String[] getParameterValues(String name); 根據請求的欄位名key，回傳多個欄位值value（checkbox）
void setCharacterEncoding("編碼格式utf-8"); 設定post請求編碼（tomcat7以前默認iso-8859-1，tomcat8以后改成了utf-8）
getRequestDispartcher("b.jsp").forward(request,response); 請求轉發的方式跳轉頁面 A -> B
ServletContext getServerContext(); 獲取專案的ServletContext物件
示例：注冊
register.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <form action="show.jsp">11 用戶名：<input type="text" name="uname"/><br/>12 密 碼：<input type="password" name="upwd"/><br/>13 年 齡：<input type="text" name="uage"/><br/>14 愛 好：<br/>15 <input type="checkbox" name="uhobbies" value="足球"/>足球16 <input type="checkbox" name="uhobbies" value="籃球"/>籃球17 <input type="checkbox" name="uhobbies" value="乒乓球"/>乒乓球<br/>18 <input type="submit" value="注冊">19 </form>20 </body>21 </html>
show.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <%11 //設定編碼12 request.setCharacterEncoding("utf-8");13 String name = request.getParameter("uname");14 int age = Integer.parseInt(request.getParameter("uage"));15 String pwd = request.getParameter("upwd");16 17 String[] hobbies = request.getParameterValues("uhobbies");18 %>19 注冊成功，資訊如下：<br/>20 姓名：<%=name %><br/>21 年齡：<%=age %><br/>22 密碼：<%=pwd %><br/>23 <%24 if(hobbies !=null){ //控制沒有愛好則不顯示25 out.print("愛好：");26 for(String hobby:hobbies){27 out.print(hobby + " ");28 }29 }30 %>31 </body>32 </html>
http://localhost:8080/MyJspProject/show.jsp?uname=zs&upwd=abc&uage=22&uhobbies=%E7%AF%AE%E7%90%83&uhobbies=%E4%B9%92%E4%B9%93%E7%90%83
連接/檔案?引數名1=引數值1&引數名2=引數值2&引數名3=引數值3
get提交方式：method="get"和地址欄、超鏈接（<a href="https://www.cnblogs.com/dream-by-dream/p/xx">）請求方式默認都屬于get提交方式
get與post請求方式的區別：
a.get方式在地址欄顯示請求資訊（但是地址欄能夠容納的資訊有限，4-5KB；如果請求資料存在大檔案）
b.檔案上傳操作，必須是post【推薦】
response：回應物件
提供的方法：
void addCookie(Cookie cookie); 服務端向客戶端增加cookie物件
void sendRedirect(String location) throws IOException; 頁面跳轉的一種方式（重定向）
void setContentType(String type);設定服務端回應的代碼（設定服務端的contentType型別）
示例：登錄
login.jsp -> check.jsp -> success.jsp
login.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <form action="check.jsp" method="post">11 用戶名：<input type="text" name="uname"><br/>12 密碼:<input type="password" name="upwd"><br/>13 <input type="submit" value="登錄"><br/>14 </form>15 </body>16 </html>
check.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <%11 request.setCharacterEncoding("utf-8");12 String name = request.getParameter("uname");13 String pwd = request.getParameter("upwd");14 if(name.equals("zs")&&pwd.equals("abc")){15 //通過重定向跳轉,結果導致資料丟失16 //response.sendRedirect("success.jsp");17 //請求轉發跳轉:可以獲取到資料，并且地址欄沒有改變（仍然保留轉發時的頁面）18 request.getRequestDispatcher("success.jsp").forward(request, response);19 }else{20 //登錄失敗21 out.print("用戶名或密碼錯誤！");22 }23 %>24 </body>25 </html>
success.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 登陸成功！<br/>11 歡迎您：12 <%13 String name = request.getParameter("uname");14 out.print(name);15 %>16 </body>17 </html>
請求轉發和重定向的區別
| 請求轉發 | 重定向 | |
|---|---|---|
| 地址欄是否改變 | 不變（check.jsp） | 改變（success.jsp） |
| 是否保留第一次請求時的資料 | 保留 | 不保留 --4種范圍物件 |
| 請求的次數 | 1 | 2 |
| 跳轉發生的位置 | 服務端 | 客戶端發起的第二次跳轉 |
轉發、重定向：
轉發：張三（客戶端） -> 【服務視窗A（服務器） -> 服務視窗B】
重定向：張三（客戶端） -> 服務視窗A（服務端） -> 去找B
張三（客戶端） ->服務視窗B（服務端） -> 結束
session（服務端，內置物件）
Cookie（客戶端，不是內置物件）：
Cookie是由服務端生成的，再發給客戶端保存
相當于本地快取的作用：客戶端（hello.jsp）->服務端（hello.mp4；zs/abc）
作用：提高訪問服務器的效率，但是安全性較差，
Cookie：key=value
javax.servlet.http.Cookie
public Cookie(String name,String value)
String getName() 獲取name
String getValue() 獲取value
void setMaxAge(int expiry); 最大有效期（s）
服務器準備Cookie：
response.addCookie(Cookie cookie)
頁面跳轉（轉發、重定向）
客戶端獲取Cookie：request.getCookies();
a.服務端增加Cookie：response物件；客戶端獲取物件：request物件
b.不能直接獲取某一個單獨物件，只能一次性將全部的Cookie拿到
通過F12可以發現，除了自己設定的Cookie物件外，還有一個name為JSESSIONID的cookie
建議cookie中只保存英文、數字，否則需要進行編碼、解碼處理
使用Cookie實作記住用戶名操作
login.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <%!11 String uname;12 %>13 <%14 Cookie[] cookies = request.getCookies();15 for(Cookie cookie:cookies){16 if(cookie.getName().equals("uname")){17 uname = cookie.getValue();18 }19 }20 %>21 <form action="check.jsp" method="post">22 用戶名：<input type="text" name="uname" value="<%=(uname==null?"":uname)%>"><br/>23 密碼:<input type="password" name="upwd"><br/>24 <input type="submit" value="登錄"><br/>25 </form>26 </body>27 </html>
check.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 <%11 request.setCharacterEncoding("utf-8");12 String name = request.getParameter("uname");13 String pwd = request.getParameter("upwd");14 15 //將用戶名加入到Cookie中16 //Cookie cookie = new Cookie("key","value");17 Cookie cookie = new Cookie("uname",name);18 response.addCookie(cookie);19 20 response.sendRedirect("result.jsp");21 22 /* if(name.equals("zs")&&pwd.equals("abc")){23 //通過重定向跳轉,結果導致資料丟失24 //response.sendRedirect("success.jsp");25 //請求轉發跳轉:可以獲取到資料，并且地址欄沒有改變（仍然保留轉發時的頁面）26 request.getRequestDispatcher("success.jsp").forward(request, response);27 }else{28 //登錄失敗29 out.print("用戶名或密碼錯誤！");30 } */31 %>32 </body>33 </html>
result.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body>10 僅供測驗使用11 </body>12 </html>
pageContext（后面講）
application（后面講）
config（后面講）
page（后面講）
exception（后面講）
8.統一請求的編碼request
get方式請求
如果出現亂碼的解決方法：
a.統一改每一個變數的編碼
new String(舊編碼，新編碼)
1 name = new String(name.getBytes("iso-8859-1"),"utf-8")b.修改server.xml，一次性的更改tomcat默認get提交方式的編碼（utf-8）
建議使用tomcat時，首先在server.xml中統一get方式的編碼
1 <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>2 <!--添加URIEncoding="UTF-8"以后所有的get方式都是utf-8-->
post方式請求
1 <%2 //設定編碼3 request.setCharacterEncoding("utf-8");4 %>
tomcat7（iso-8859-1）
tomcat8（utf-8）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/34039.html
標籤：HTML5
下一篇：git使用