Web全段重點整理

• 2021 年 3 月 12 日
• 筆記
• 個人學習總結

1.  HTML+CSS

1.1. HTML+CssDay01

1.1.1. 常用普通標籤

1. 常用標籤如下

div

span

a

p

ul+li

h1-h6

img

1. 代碼示例：

<img src=」1.jpg」>

1. 效果：

4. 注意：

ul+li的應用場景，如果界面上有一堆非常類似的標籤，這時候就會用ul+li來布局。

1.1.2. 常用表單標籤

1. 常用表單標籤如下：

form

input:text

button:submit

1. 代碼示例：

1. 效果如下：

1. 注意：

如果是get方式提交：

 1. 點擊表單的submit按鈕之後，會對錶單進行提交，跳轉到action對應的url

       如果url不確定，先寫#

 2. 提交的url，後邊會拼接form中帶有name屬性的標籤的數據

        規律：action的url?name的值=value的值&name2的值=value2的值

        例子：action的url?username=123&age=18

如果是post提交方式：數據會拼接到請求體，請求體後續介紹

1.1.3. 常用表單項標籤

1. 常用表單項標籤：

input-type:text，type:password，type:number，type:radio，type:checkbox，type:file，type:hidden

button-type:submit，type:button，type:reset

select+option

2. 代碼示例：

3. 效果如下：

4. 注意：

l  radio，checkbox，select的option都需要程序員添加上value屬性

l  其他的表單項標籤，用戶輸入的內容就是value

l  hidden：隱藏域也需要程序員添加value

n  普通用戶看不到隱藏域

n  隱藏域是為了攜帶額外的數據到服務器

1.2. HTML+CssDay02

1.2.1. Css常用知識點

1. 基礎選擇器

l  元素選擇器：元素名{}，例如：div{}

l  類選擇器：.類名{}，例如：.div01{}

l  id選擇器：#id值{}，例如：#id01{}

2. 元素顯示與隱藏

l  隱藏元素：display:none

l  顯示元素：display:block

1.2.2. 表格標籤

1. 常用表格標籤

table

thead，tr，th

tbody，tr，td

2. 代碼示例：

3. 效果如下：

2.  Web核心

2.1. Web核心Day01

2.1.1. Tomcat相關

2.1.1.1. 
localhost

tomcat啟動之後，可以通過//localhost:8080/訪問tomcat默認歡迎界面

也可以通過//真實IP:8080訪問

localhost：意為「本地主機」，等同於127.0.0.1

2.1.1.2. 
idea發佈項目須知

項目發佈之後，啟動tomcat，訪問如下：（項目的根路徑配置的是/）

訪問根路徑/，相當於訪問發佈之後的路徑：out\artifacts\web_demo_war_exploded。

而訪問某個目錄，會直接默認訪問此目錄下的index.jsp或index.html或index.htm，

所以將out\artifacts\web_demo_war_exploded目錄下的index.jsp打開了

2.1.2. Http協議相關

1. http協議：超文本傳輸協議，瀏覽器與服務器之間傳遞數據遵循的協議

2. http協議組成：請求和響應

瀏覽器給服務器傳遞數據，是通過請求

服務器給瀏覽器返回數據，是通過響應

3. 請求與響應

請求與響應要攜帶的數據比較多，所以進行了分類：

請求：請求行，請求頭，請求體

響應：響應行，響應頭，響應體

4. 具體圖示：（請求頭與響應頭不需要記）

5. 總結

瀏覽器中輸入地址，敲回車，這種請求方式為get

form根據method的值，來確定請求方式

get請求，會將form數據拼接到url後，沒有請求體

post請求，會將form數據放入請求體

2.1.3. 案例中的路徑問題

項目配置如下：

最終路徑分析如下：

解決：

1. 去掉welcome-file-list

2. 或者，去掉Application Context

注意：

其實正常情況下news.html中的圖片路徑，應該寫絕對路徑，例如:/test1/img/logo.png。

並且虛擬路徑/test1在後期我們可以通過api來動態獲取

絕對路徑：以/開頭的

相對路徑：不以/開頭的

2.2. Web核心Day02

2.2.1. ServletContext解釋

l  context：上下文，理解為環境

l  百度解釋：

n  在語文中：上下文指的是這一篇文章的中心思想，概括。

l  知乎解釋：

n  在生活中：上下文指的是環境

n  林沖說這句話的環境如果是，碰見了猛虎，那麼「啊也」就是驚嚇的意思

n  林沖說這句話的環境如果是，中了大獎，那麼「啊也」就是驚喜的意思

l  總結：

n  上下文：環境，不同環境給我們帶來的信息是不一樣的。所以環境中有很多信息，數據，也就是環境是用於存儲數據的。

n  所以ServletContext就是一個用於存儲共享數據的對象，存儲的數據在整個應用中的Servlet都可以使用，又稱之為應用域

2.2.2. 請求對象封裝過程

l  分析圖如下：

l  說明：這裡大家需要明白Servlet內部的方法，都是由tomcat來調用的，所以方法的參數也是由Tomcat創建好傳遞進來的

l  上圖分析的是request對象，其實response對象也是由Tomcat創建好傳遞進來的，我們通過這個對象給瀏覽器返回數據

2.2.3. getRealPath方法分析

l  getRealPath：將項目發佈之後的真實路徑與傳遞的路徑進行拼接

l  例子如下：

l  注意：如果傳遞的路徑不存在，也不會報錯，比如d.txt

l  應用場景：一般是在流操作文件時，需要通過getRealPath來獲取文件真實路徑，然後才能流操作

2.3. Web核心Day03

2.3.1. 轉發與重定向

2.3.1.1. 
轉發

1. 轉發：一次請求需要多個Servlet協作完成（一個請求）
2. 示例代碼：ServletDemo09轉發ServletDemo10

3.應用場景：如果在Servlet中要跳轉本項目內的其他Servlet或界面，可以使用轉發或重定向

2.3.1.2. 
重定向

1. 重定向：一次請求需要多個Servlet協作完成（兩個請求）

2. 示例代碼：ServletDemo06重定向到ServletDemo07

3. 應用場景：如果在Servlet中要跳轉其他項目的Servlet/界面，可以使用重定向

2.3.1.3. 
區別（完全相反）

l  重定向：

n  兩次請求

n  地址欄發生變化

n  不可以使用request域共享數據 （既然是兩次請求，那肯定不能使用請求域中共享的數據）

n  可以重定向到其他服務器的url

l  轉發：

n  一次請求

n  地址欄不發生變化

n  可以使用request域共享數據

n  只能轉發到自己服務器內部的url

2.3.2. 路徑分析

2.3.2.1. 
跳轉使用的url

2.3.2.1.1.    
servlet中的轉發（特殊）

如：Day03的request_demo的ServletDemo09

這裡的url是以斜杠開頭的，但是其實他不是一個完整的絕對路徑。

轉發比較特殊，由ServletDemo09轉發到ServletDemo10，ServletDemo10的路徑必須是相對於ServletDemo09進行轉發的。

例如：//localhost:8080/request/servletDemo09，轉發的url為「/servletDemo10」，那麼最終的url其實是//localhost:8080/request/servletDemo10

所以說，這個url可以寫成：「servletDemo10」不加斜杠，寫成相對路徑，這樣更加合理，更加好理解

2.3.2.1.2.    
servlet中的重定向

如：Day03的response_demo的ServletDemo06

這裡的url是也斜杠開頭：「/response/servletDemo07」，項目虛擬路徑+servlet路徑，這是標準的絕對路徑寫法

2.3.2.1.3.    
servlet中的定時跳轉

如：Day03的response_demo的ServletDemo05

這裡的url也是斜杠開頭：「/response/login.html」，項目虛擬路徑+文件路徑，這是標準的絕對路徑寫法

2.3.2.1.4.    
html中的超鏈接

如：Day03的reqresp_test案例中的index.html

這裡的url：」/stu/addStudent.html」，項目虛擬路徑+文件路徑，這是標準的絕對url寫法

2.3.2.1.5.    
html中的表單的action

如：Day03的reqresp_test案例中的addStudent.html

這裡的url：「/stu/addStudentServlet」，項目虛擬路徑+servlet路徑，這是標準的絕對url寫法

2.3.2.1.6.    
總結

除了轉發，其餘的跳轉到某個資源的url，都是使用絕對路徑

2.3.2.2. 
配置文件中的url

2.3.2.2.1.    
welcome-file（特殊）

如：Day02中的servlet_test的web.xml

這裡welcome-file的路徑為：「/addStudent.html」，是以斜杠開頭，但是並不是完整的絕對路徑

welcome-file是配置默認的歡迎界面，那界面html文件，肯定是在web目錄下，所以他固定就是去web目錄下查找，所以這裡不需要添加項目虛擬路徑寫成：「/虛擬路徑/addStudent.html」

既然welcome-file固定是去web目錄下查找，所以我們可以認為他參照的目錄就是web，所以可以寫成相對路徑「addStudent.html」

大家可以試一下，也是可以的，其實這一點跟轉發有點類似，都有固定的參照目錄

2.3.2.2.2.    
servlet路徑配置

這裡的路徑「/studentServlet」是給StudentServlet配置的他自己的url，所以肯定不需要帶項目虛擬路徑。

配置好之後，我們通過「項目虛擬路徑+servlet路徑」來訪問servlet

那麼註解方式給servlet添加的url，也是如此：@WebServlet(「/studentServlet」)

2.3.2.3. 
流操作項目中的文件

如：Day03的response_demo中的ServletDemo03

這裡的getRealPath(「/img/hm.png」)，最終拼接出來的路徑是：項目發佈之後的真實路徑+/img/hm.png

問題：

為啥這裡不能直接使用項目虛擬路徑+/img/hm.png，為啥非得用getRealPath來拼接發佈之後的路徑呢？

為啥之前的跳轉的url，都可以使用虛擬路徑+資源路徑，來進行訪問，而這裡的io流操作文件則非得使用getRealPath呢？

答：

因為跳轉的url，其實都是通過瀏覽器來向tomcat發起的請求，tomcat收到這些請求之後，會根據項目虛擬路徑，來找到項目真是發佈之後的路徑

而IO流操作文件，並沒有通過瀏覽器，而是直接自己去查找的本地文件，所以需要查找我們的項目最終發佈路徑中的文件

2.4. Web核心Day04

2.4.1. Cookie

1. Cookie介紹

(1)       客戶端(瀏覽器)會話管理技術

(2)       把要共享的數據保存到客戶端（瀏覽器）

(3)       每次請求時，瀏覽器會把會話信息帶到服務器端，從而實現多次請求的數據共享

2. Cookie作用：一般用於存儲用戶的登陸狀態，避免在一次會話的多次請求中多次登陸

3. Cookie操作

4. 案例分析：

2.4.2. Session

1. Session介紹

(1)       服務器端會話技術

(2)       共享數據保存在服務器端

(3)       session依賴於cookie，需要cookie保存Jsessionid

2. Session作用：一般用於存儲用戶的登陸狀態，避免在一次會話的多次請求中多次登陸

3. Cookie與Session作用一樣，但是常用Session保存用戶登錄狀態，因為數據保存在服務器端更加安全

4. 示例代碼：Day04中的session_demo的ServletDemo01

5. Session原理分析

注意：

第二步，是tomcat自動處理的，一旦咱們在Servlet中有操作session的相關代碼，tomcat就會將此session對象對應的Jsessionid放入cookie中

第四步，從cookie中取出jsessionid，也是tomcat自動處理的，一旦咱們在Servlet中有getSession的代碼，tomcat就會先取出jsessionid，然後判斷有沒有此id對應的session對象，有就直接返回

2.5. Web核心Day05

2.5.1. EL表達式基本點

1. EL：Expression Language，表達式語言

2. 作用：在 JSP 頁面中獲取數據，讓我們的 JSP 脫離 java 代碼塊和 JSP 表達式

3. el表達式，會獲取四大域中的共享數據，語法： ${共享數據的key名字}

4. 如果共享數據是key，value形式，這時候想獲取這個共享數據內的value的值分兩種情況

1. 如果key不是索引：${共享數據的key名字.key }: ${stu.name}

2. 如果key是索引： ${共享數據key名字[key]} : ${arr[0]}

5. 補充：

1. 數組，集合，map，javabean，都是key，value形式

2. 只不過，數組和集合他的key是系統自動添加的 ， 是一個索引

6. 示例代碼

2.5.2. EL三元表達式

1. el三元表達式，常用於單選，多選，與下拉列表的選中

2. 示例代碼：

2.5.3. EL隱式對象

總結：

1. 獲取四大域中的數據：${key}

2. 獲取項目虛擬路徑：${pageContext.request.contextPath}

EL表達式中有pageContext隱式對象，但是沒有request隱式對象

正好pageContext可以獲取其他的jsp的八大隱式對象

3.  Mybatis

3.1. Mybatis-Day01

3.1.1. mybatis介紹

1. 介紹

2. orm

3.1.2. mybatis入門

1. 入門分析圖

l  問題：sqlSession.selectList(「StudentMapper.selectAll」)，這裡的參數是映射文件的namespa.id組成的，但是為啥sqlSession可以找到這個映射文件呢？

n  sqlSession是由sqlSessionFactory創建的，而sqlSessionFactory是SQLSessionFactoryBuilder創建的，然後我們是將讀取了MyBatisConfig.xml的流傳遞給了SQLSessionFactoryBuilder，所以呢sqlSession是知道MyBatisConfig.xml的存在的。而在MyBatisConfig.xml中引入了映射文件StudentMapper.xml。

3.1.3. mybatis核心類

1. 與jdbc對比

由上圖可知，sqlSession是綜合了jdbc的Connection與statement的功能。

l  Statement的executeUpdate對應insert，update，delete

l  Statement的executeQuery對應selectList，selectOne

l  Connection的commit與rollback對應commit與rollback（一樣）

l  Connection的setAutoCommit對應sqlSessionFactory的openSession方法中的參數autoCommit

n  Connection的setAutoCommit默認是true，就是默認是自動提交事務

n  sqlSessionFactory的openSession方法中的參數autoCommit默認是false，默認手動提交事務，需要自己commit提交事務

n   

3.1.4. 關鍵點分析

3.1.4.1. 
映射分析

1. 分析圖如下

(1)       數據庫中有student表，程序中就會有一個Student類

(2)       表中的字段/列名，必須與Student類的屬性名保持一致

①     數據庫的列名不區分大小寫

(3)       表中的一條數據，讀取到程序中，就代表一個Student對象

(4)       selectList方法直接返回封裝好的數據，內部的邏輯類似於右下角的遍歷

3.1.4.2. 
映射文件參數分析

1. 圖示如下

(1)       selectById只需要一個參數，所以parameterType直接寫此參數的數據類型即可

(2)       insert需要多個參數，而且參數類型不同，所以需要將參數封裝為一個javabean然後進行傳遞

3.2. Mybatis-Day02

3.2.1. 接口代理

1. 接口代碼分析如下：

3.2.2. 分頁查詢

1. 分頁查詢分析如下：

3.2.3. 多表查詢

3.2.3.1. 
一對一

1. 一對一分析如下：

(1)       這次查詢的需求是：查詢所有身份證，並且順便查詢身份證所屬的人的信息。所以是在Card類中添加了Person對象。

(2)       Javabean中誰包含誰，跟表關係沒有關係，跟需求有關係

(3)       多表映射配置規律：

①     resultMap標籤中的type屬性指定的是主表類（包含對象的類：Card）

②     association標籤中的javaType屬性指定的是次表類（被包含對象的類：Person）

③     通過id和result標籤中的column屬性與property屬性就來建立對應列與屬性的關係

④     映射文件主要就是解決數據庫表的列與Javabean的屬性之間的對應關係的

3.2.3.2. 
一對多

1. 一對多分析如下：

(1)       此圖的需求是：查詢所有的班級，並且順便查詢班級下所有的學生

(2)       一對多在配置被包含對象時用的是collection標籤和ofType屬性

3.2.3.3. 
多對多

1. 多對多分析如下

(1)       多對多其實是由兩個一對多組成的

(2)       從學生角度看，一個學生可以選擇多個課程

(3)       從課程角度看，一個課程可以被多個學生選擇

3.3. Mybatis-Day03

3.3.1. 註解一對一

1. 一對一分析

(1)       註解方式添加sql，與映射文件添加sql的區別

①     映射文件的多表查詢是用一個sql

②     註解方式的多表查詢是用兩個sql，先查詢主表，然後遍歷查詢次表，最終再拼接結果

3.3.2. 註解一對多

1. 一對多分析

(1)       註解一對多在配置被包含對象的時候，javaType是配置List.class，而不是List內的具體類型

(2)       映射文件一對多在配置被包含對象的時候，ofType配置的是List內的具體類型

3.3.3. 註解多對多

1. 多對多分析

2. 多對多sql語句分析

起初是查詢所有的student，但是發現沒有選擇課程的王五趙六也出來了，這不是我們的需要希望的

所以後來進行了關聯去重查詢

如果這裡用映射文件配置sql，其實一個sql就可以搞定：

4.  JavaScript

4.1. Day01

4.1.1. 變量和常量

4.1.2. 基本數據類型

注意：

l  null屬於基本數據類型的一種，但是通過typeof檢測之後發現是複雜數據類型object，這是矛盾的。（js的一個錯誤，後來想糾正，但是太麻煩，就不了了之了）

l  undefined未定義是一種數據類型（變量定義了，但是值沒定義）

l  not defined是一種錯誤（變量沒定義）

4.1.3. 運算符

4.1.4. 數組

l  數組arr拆包：…arr，結果為10,20,30

l  字符串又稱之為字符數組

4.1.5. 可變參數

l  …在數組前是拆包

l  …在函數的參數前是打包，將多個實參打包到形參，將形參變為一個數組

4.1.6. 屬性操作

屬性操作分為兩種方式：

  1. 元素對象.xxxAttribute(“屬性名”)：可以操作固有屬性，和自定義屬性

     此種方式，操作屬性，與標籤內操作屬性一樣

  2. 元素對象.屬性名  ，只能操作固有屬性

此中方式，有一些特殊的屬性：style（對象），class（className）

4.1.7. 事件

1. 通過標籤添加事件

<button id="up" onclick="up()">上一張</button>

2. 通過元素對象添加事件

let upBtn = document.getElementById("up");
upBtn.onclick = function () {
let img = document.getElementById("img");
img.setAttribute("src", "img/01.png");
}

3. 超鏈接添加事件

<a href="JavaScript:void(0);" onclick="drop(this)">刪除</a>

超鏈接添加點擊事件，需要先給默認的跳轉行為給屏蔽掉：href=」javascript:void(0)」

4.2. Day02

4.2.1. json

1. JSON(JavaScript
Object Notation)：是一種輕量級的數據交換格式

2. 分析圖

(1)       注意：程序中都是使用對象（因為使用對象比字符串方便），而在傳輸過程中都是json字符串，所以前後端都需要來回的轉換

3. 代碼

4.2.2. 表單提交事件

1. html代碼

2. js代碼

4.2.3. 定時器

1. 代碼

4.2.4. 頁面加載完成事件

1. 代碼

2. 如果將js獲取界面元素的代碼放到onload中，那麼這段js的代碼位置就可以放在body上邊

4.2.5. js跳轉界面

1. 代碼

location.href =
“路徑”;

5.  Jquery

5.1. $函數使用總結

1. 當做函數使用

(1). 如果傳遞的是一個匿名函數，當做界面加載完成函數使用

(2). 如果傳遞的是一個DOM對象，當做類型轉換使用，將DOM對象轉換為jq對象

(3). 如果傳遞的是一個css選擇器（字符串），當做獲取元素使用

(4). 如果是html內容的字符串，當做創建元素對象使用

2. $ 是一個函數，也是一個對象，可以直接調用方法

(1). each函數

(2).
ajax/get/post函數

5.2. jq對象轉換為js對象

1. jq封裝了大部分的js的功能，但是有個別的功能並沒有封裝，所以有時候我們需要將jq對象轉換為js對象

2. 代碼

3. 為什麼jQuery是一個數組，為啥他將找到的js對象放入到一個數組中了呢？因為隱式迭代。

5.3. jquery的隱式迭代

1. 隱式迭代，悄悄的遍歷，內部自動做了遍歷循環的操作

2. jquery中大部分的方法都有隱式迭代的特性

(1)       添加事件的方法：click()，focus()，等等

(2)       操作屬性的方法：attr()，prop()

(3)       操作樣式的方法：css()，addClass()，removeClass()，toggleClass()

(4)       操作文本的方法：html()

3. 注意：以上方法的隱式迭代只在設置的時候生效，獲取只能獲取第一個js對象的數據

6.  Ajax

6.1. Ajax通用方法

1. 代碼

l  async:true可以省略，默認是異步

l  data：是前端向後端傳遞的數據，可以是字符串（key=value），也可以是對象{key:value}

l  dataType：是前端告知後端，前端希望後端返回的數據的類型

l  success的function中的參數data，是後端響應回來的數據

6.2. Java中的json轉換

1. 對象轉json

2. Map轉json

3. Map包含user，轉json

4. list轉json

5. list包含user，轉json

6.3. 案例

6.3.1. 聯想搜索

1. 分析圖

2. 注意

(1)       此案例中的keydown事件，可以換為change事件更加合理

①     change事件：文本內容改變就會觸發的事件

(2)       ajax收到後端返回的json數據之後，直接將json轉換為對應的對象，然後傳遞給success的function的參數data

6.3.2. 分頁-瀑布流

1. 分析圖

(1)       send標記，是一個開關，避免重複加載下一頁數據。當下一頁數據還沒有回來的時候，是不能再次觸發獲取下一頁數據的邏輯的

(2)       只有下一頁數據顯示到界面上之後，才會將send標記打開

(3)       後端分頁代碼是第二種寫法

這裡的page與list其實是一樣的，都代表當前頁數據集合

page其實是繼承了ArrayList，是一個集合

2. 界面滾動到底部的判斷公式分析

(1)       滾動條距離底部的距離其實可以不要

(2)       公式改為：滾動條滾動距離+窗口高度>=頁面文檔高度

7.  Vue

7.1. Day01

7.1.1. Vue的作用

7.1.2. Vue的數據綁定

v-bind:value=」username」

7.1.3. element-ui的表單

7.1.3.1.      
表單數據雙向綁定

在這裡進行雙向數據綁定的時候，我們是將要綁定的data屬性放到了ruleForm對象中，然後再進行的綁定，這樣做方便後續數據的提交，等到提交數據的時候，直接將ruleForm對象轉換為json提交到後台即可

7.1.3.2.      
表單校驗規則

rules是一個對象，在對象中可以指定多個字段的校驗規則

name是其中一個校驗規則，而這個校驗規則是有必填和長度這兩個校驗規則組成的

每一個校驗規則都是一個對象，對象中有三項信息

1. 校驗規則：required必填，min-max長度

2. 校驗失敗時的提示信息：message

3. 何時觸發校驗：trigger（觸發器）：blur（失去焦點），意味失去焦點觸發此校驗規則

7.1.3.3.      
表單提交

l  失去焦點需要校驗表單，但是最後表單提交的時候，也需要再次校驗表單

n  因為程序員可以通過程序，讓表單數據自動填充，所以界面的失去焦點方法校驗表單並不完全可靠

n  其實最後表單提交的時候再次校驗，程序員也是可以跳過的，比如通過postman發起請求，不通過界面發起請求，所以前端所有的校驗都不靠譜，後端servlet收到數據之後，也還是會重新校驗的

l  注意：這裡的validate是el-form的方法，我們需要獲取el-form對象之後才能調用，如何獲取呢？因為Vue不再通過原始方式獲取DOM元素對象，所以採用ref引用名的方式：

1. 只要標籤添加ref屬性，就會給當前標籤創建對象，並且將對象存儲到$refs中
2. vue實例有一個屬性 $refs , 存儲當前界面中所有帶有ref屬性的標籤的對象
3. 比如此界面中有倆標籤添加有ref：

(1)       <el-form 
ref=”ruleForm” >    <el-form-item ref=”item1″>

1. 那麼$refs對象就長這樣： 
   {“ruleForm”:el-form,”item1″:el-form-item} 
2. 所以可以通過如下方式獲取：

(1)       this.$refs.ruleForm     
this.$refs.item1

(2)       this.$refs[“ruleForm”]    
this.$refs[“item1”]（這個$refs比較特殊，可以通過中括號方式獲取屬性）

l  validate方法的參數是一個回調函數，函數的參數是校驗結果

n  校驗通過，valid=true

n  校驗失敗，valid=false

l  最後需要注意，validate方法內部用到了el-form的model屬性，所以如果沒有寫如下屬性：

l  會報錯：

model是校驗工作必須的屬性

7.1.3.4.      
表單數據重置

el-form還有一個方法resetFields，重置字段，會將用戶輸入的信息以及校驗信息都清空

7.1.4. 表格

7.2. Day02

7.2.1. axios

1. 發送請求代碼如下：

注意：這裡是通過resp.data來獲取後端返回的數據

2. api介紹

7.2.2. 封裝前端傳遞的數據

1. 代碼如下

如果前端傳遞的數據中有特殊類型的數據，比如日期字符串，這時候populate是搞不定的，而populate在進行轉換數據的時候，會根據註冊的轉換器來處理特殊類型的數據，所以我們只需要註冊日期轉換器即可

populate方法在對數據進行轉換的時候，會調用轉換器的convert方法，將字符串日期傳遞進去，按照固定格式轉換為Date類型的日期，然後返回

8.  Maven基礎

8.1. maven的安裝與配置

1. 將「16-Maven基礎（雙元）\day01\資料\安裝程序\apache-maven-3.6.1-bin.zip」的壓縮包複製到D盤下，進行解壓縮

2. 接下來進行環境配置

3. 確定JAVA_HOME環境變量沒問題（注意：建議使用jdk1.8，高版本會出問題）

4. 檢查環境

(1)       打開cmd，執行：mvn -v

(2)       能看到如下結果即可

5. 確保idea是2018.2版本，目前發現有問題的版本有2018.3以及2020.x版本都會出現maven工程編譯問題

8.2. 創建maven工程

8.2.1. 創建Java-maven工程

創建maven項目的時候選擇使用原型骨架

輸入坐標信息

創建完成後發現通過這種方式缺少一些目錄，如下圖

我們需要手動去補全目錄，並且要對補全的目錄進行標記，切記

8.2.2. 創建JavaWeb-maven工程

1. 選擇web對應的原型骨架

2. 坐標

3. 和前面創建普通項目一樣，通過原型創建web項目得到的目錄結構是不全的，因此需要我們自行補全，同時要標記正確，最終需要得到如下結構

4. 清空web.xml

5. 清空pom.xml

6. 在pom.xml中project節點下添加tomcat插件的坐標：

<build>
  <plugins>
    <!--tomcat插件-->
    <plugin>
      <groupId>org.apache.tomcat.maven</groupId>
      <artifactId>tomcat7-maven-plugin</artifactId>
      <version>2.1</version>
      <configuration>
        <port>80</port>
        <path>/</path>
      </configuration>
    </plugin>
  </plugins>
</build>

7. 右側就會出現tomcat7的命令

8. 雙擊tonmcat7:run運行，然後訪問

9. 新建運行方式

8.3. pom文件說明

9.  綜合案例

9.1. Day02

9.1.1. 文件上傳

1. 頁面提供文件上傳的表單元素

2. form表單enctype屬性的值為multipart/form-data

3. 表單的提交方式必須是POST，get方式無法提交大量的數據

4. 後台核心代碼（這裡用到的是commons-fileupload）

private void testUpload(HttpServletRequest request,HttpServletResponse response) throws Exception {

    //1.確認該操作是否支持文件上傳操作，enctype="multipart/form-data"

    if(ServletFileUpload.isMultipartContent(request)){

        //2.創建磁盤工廠對象

        DiskFileItemFactory factory = new DiskFileItemFactory();

        //3.Servlet文件上傳核心對象

        ServletFileUpload fileUpload = new ServletFileUpload(factory);

        //4.從request中讀取數據

        List<FileItem> fileItems = fileUpload.parseRequest(request);



        for(FileItem item : fileItems){

            //5.當前標籤是否是文件表單標籤

            if(!item.isFormField()){

                //6.從臨時存儲文件的地方將內容寫入到指定位置

                item.write(new File(this.getServletContext().getRealPath("upload"),item.getName()));

            }

        }

    }



}

5. 圖示分析

9.1.2. 添加題目時加入文件上傳

9.1.3. 更新題目時上傳圖片分析

另：添加題目的時候也需要添加flag標記，如果不添加，會出現不管有沒有上傳圖片，都設置picture字段，那麼如果沒有上傳還設置picture字段的話，在編輯界面里就會出現如下情況：

另：附上save的優化後的代碼

9.1.4. 題目選項刪除

1. 分析圖如下

2. 注意點：

(1)       如果從delete轉到list，用的是list方法調用：list(request,response)這種方式，是可以傳遞請求參數的數據的，轉發，重定向均不可以

(2)       而在這裡，我們在請求delete方法的時候，傳遞了請求參數questionId，現在需要delete方法將這個請求參數傳遞到list中，所以只能直接調用list方法

9.1.5. 題目選項新增-更新

1. 分析圖如下

9.2. Day03

9.2.1. 角色授權樹形數據

1. sql分析圖

2. sql

9.3. Day04

9.3.1. 菜單動態顯示

1. 分析圖如下

(1)       外層循環循環一級菜單

①     一級菜單需要滿足條件ctype=0

(2)       內層循環循環二級菜單

①     二級菜單需要滿足條件ctype=1

②     並且滿足是否是當前循環的一級菜單的下級菜單：item2.parentId=item.id