2023SpringBoot教學(xué)課件 第12章 數(shù)據(jù)綁定和表單標(biāo)簽庫

第12章數(shù)據(jù)綁定和表單標(biāo)簽庫主要內(nèi)容數(shù)據(jù)綁定表單標(biāo)簽庫數(shù)據(jù)綁定應(yīng)用JSON數(shù)據(jù)交互12.1數(shù)據(jù)綁定

在SpringMVC框架中，數(shù)據(jù)綁定有這樣幾層含義：綁定請求參數(shù)輸入值到領(lǐng)域模型（如10.2節(jié)）、模型數(shù)據(jù)到視圖的綁定（輸入驗證失敗時）、模型數(shù)據(jù)到表單元素的綁定（如下列列表選項值由控制器初始化）。12.2表單標(biāo)簽庫

表單標(biāo)簽庫中包含了可以用在JSP頁面中渲染HTML元素的標(biāo)簽。JSP頁面使用Spring表單標(biāo)簽庫時，必須在JSP頁面開頭處聲明taglib指令，指令代碼如下：<%@taglibprefix="form"uri="/tags/form"%>

表單標(biāo)簽庫中有form、input、password、hidden、textarea、checkbox、checkboxes、radiobutton、radiobuttons、select、option、options、errors。 form：渲染表單元素。 input：渲染<inputtype="text"/>元素。 password：渲染<inputtype="password"/>元素。 hidden：渲染<inputtype="hidden"/>元素。 textarea：渲染textarea元素。 checkbox：渲染一個<inputtype="checkbox"/>元素。 checkboxes：渲染多個<inputtype="checkbox"/>元素。 radiobutton：渲染一個<inputtype="radio"/>元素。 radiobuttons：渲染多個<inputtype="radio"/>元素。 select：渲染一個選擇元素。 option：渲染一個選項元素。 options：渲染多個選項元素。 errors：在span元素中渲染字段錯誤。12.2.1表單標(biāo)簽表單標(biāo)簽，語法格式如下：

<form:formmodelAttribute="xxx"method="post"action="xxx">

…… </form:form>modelAttribute：暴露formbackingobject的模型屬性名稱，屬性值綁定一個JavaBean對象。假設(shè)，控制器類UserController的方法inputUser，是返回userAdd.jsp的請求處理方法。

inputUser方法的代碼如下： @RequestMapping(value="/input") publicStringinputUser(Modelmodel){ ……

model.addAttribute("user",newUser()); return"userAdd"; }

userAdd.jsp的表單標(biāo)簽代碼如下： <form:formmodelAttribute="user"method="post"action="user/save">

…… </form:form>

注意：在inputUser方法中，如果沒有Model屬性user，userAdd.jsp頁面就會拋出異常，因為表單標(biāo)簽無法找到在其modelAttribute屬性中指定的formbackingobject。12.2.2input標(biāo)簽input標(biāo)簽，語法格式如下：<form:inputpath="xxx"/>path屬性將文本框輸入值綁定到formbackingobject的一個屬性。示例代碼如下：

<form:formmodelAttribute="user"method="post"action="user/save"> <form:inputpath="userName"/> </form:form>上述代碼，將輸入值綁定到user對象的userName屬性。12.2.6checkbox標(biāo)簽checkbox標(biāo)簽，語法格式如下：

<form:checkboxpath="xxx"value="xxx"/>

多個path相同的checkbox標(biāo)簽，它們是一個選項組，允許多選。選項值綁定到一個數(shù)組屬性。示例代碼如下：<form:checkboxpath="friends"value="張三"/>張三<form:checkboxpath="friends"value="李四"/>李四<form:checkboxpath="friends"value="王五"/>王五<form:checkboxpath="friends"value="趙六"/>趙六

上述示例代碼中復(fù)選框的值綁定到一個字符串?dāng)?shù)組屬性friends（String[]friends）。12.2.7checkboxes標(biāo)簽checkboxes標(biāo)簽渲染多個復(fù)選框，是一個選項組，等價于多個path相同的checkbox標(biāo)簽。它有3個非常重要的屬性：items、itemLabel和itemValue。

items：用于生成input元素的Collection、Map或Array。

itemLabel：items屬性中指定的集合對象的屬性，為每個input元素提供label。

itemValue：items屬性中指定的集合對象的屬性，為每個input元素提供value。checkboxes標(biāo)簽語法格式如下：

<form:checkboxesitems="xxx"path="xxx"/>

示例代碼如下：

<form:checkboxesitems="${hobbys}"path="hobby"/>

上述示例代碼，是將model屬性hobbys的內(nèi)容（集合元素）渲染為復(fù)選框。itemLabel和itemValue缺省情況下，如果集合是數(shù)組，復(fù)選框的label和value相同；如果是Map集合，復(fù)選框的label是Map的值（value），復(fù)選框的value是Map的關(guān)鍵字（key）。12.2.8radiobutton標(biāo)簽radiobutton標(biāo)簽，語法格式如下：

<form:radiobuttonpath="xxx"value="xxx"/>

多個path相同的radiobutton標(biāo)簽，它們是一個選項組，只允許單選。12.2.9radiobuttons標(biāo)簽radiobuttons標(biāo)簽渲染多個radio，是一個選項組，等價于多個path相同的radiobutton標(biāo)簽。radiobuttons標(biāo)簽，語法格式如下：

<form:radiobuttonspath="xxx"items="xxx"/>

該標(biāo)簽的itemLabel和itemValue屬性與checkboxes標(biāo)簽的itemLabel和itemValue屬性完全一樣，但只允許單選。12.2.10select標(biāo)簽select標(biāo)簽的選項可能來自其屬性items指定的集合，或者來自一個嵌套的option標(biāo)簽或options標(biāo)簽。語法格式如下：

<form:selectpath="xxx"items="xxx"/>或

<form:selectpath="xxx"items="xxx"> <optionvalue="xxx">xxx</option> </form:select>或

<form:selectpath="xxx"> <form:optionsitems="xxx"/> </form:select>該標(biāo)簽的itemLabel和itemValue屬性與checkboxes標(biāo)簽的itemLabel和itemValue屬性完全一樣。12.2.12errors標(biāo)簽errors標(biāo)簽渲染一個或者多個span元素，每個span元素包含一個錯誤消息。它可以用于顯示一個特定的錯誤消息，也可以顯示所有錯誤消息。語法如下：

<form:errorspath="*"/>或

<form:errorspath="xxx"/>

其中，“*”表示顯示所有錯誤消息；“xxx”表示顯示由“xxx”指定的特定錯誤消息。12.3數(shù)據(jù)綁定應(yīng)用

為了讓讀者進(jìn)一步學(xué)習(xí)數(shù)據(jù)綁定和表單標(biāo)簽，本節(jié)給出了一個應(yīng)用范例ch12。應(yīng)用中實現(xiàn)了User類屬性和JSP頁面中表單參數(shù)的綁定，同時在JSP頁面中分別展示了input、textarea、checkbox、checkboxs、select等標(biāo)簽。12.3.1應(yīng)用的相關(guān)配置

在ch12應(yīng)用中需要使用JSTL，因此，不僅需要將SpringMVC相關(guān)jar包拷貝到應(yīng)用的WEN-INF/lib目錄下，還需要從Tomcat的webapps\examples\WEB-INF\lib目錄下，將JSTL相關(guān)jar包拷貝到應(yīng)用的WEN-INF/lib目錄下。ch12的JAR包如圖12.1所示。

為了避免中文亂碼問題，需要在web.xml文件中增加編碼過濾器，同時JSP頁面編碼設(shè)置為UTF-8，form表單的提交方式必須為post。12.3.2領(lǐng)域模型

應(yīng)用中實現(xiàn)了User類屬性和JSP頁面中表單參數(shù)的綁定，User類包含了和表單參數(shù)名對應(yīng)的屬性，以及屬性的set和get方法。publicclassUser{ privateStringuserName; privateString[]hobby;//興趣愛好 privateString[]friends;//朋友 privateStringcarrer; privateStringhouseRegister; privateStringremark; //省略setter和getter方法}12.3.3Service層

應(yīng)用中使用了Service層，在Service層使用靜態(tài)集合變量users模擬數(shù)據(jù)庫存儲用戶信息，包括添加用戶和查詢用戶兩個功能方法。

在ch12應(yīng)用的src目錄下，創(chuàng)建包service，并在該包中創(chuàng)建UserService接口和UserServiceImpl實現(xiàn)類。12.3.4Controller

在Controller類UserController中定義了請求處理方法，其中包括處理user/input請求的inputUser方法，以及user/save請求的addUser方法，其中在addUser方法中用到了重定向。在UserController類中，通過@Autowired注解在UserController對象中主動注入UserService對象，實現(xiàn)對user對象的添加和查詢等操作；通過model的addAttribute方法將User類對象、HashMap類型的hobbys對象、String[]類型的carrers對象以及String[]類型的houseRegisters對象傳遞給View（userAdd.jsp）。12.3.5View層View層包含兩個JSP頁面，一個是信息輸入頁面userAdd.jsp，一個是信息顯示頁面userList.jsp。在ch12應(yīng)用的WEB-INF/jsp/目錄下，創(chuàng)建此兩個JSP頁面。

在userAdd.jsp頁面中將Map類型的hobbys綁定到了checkboxes上，將String[]類型的carrers和houseRegisters綁定到select上，實現(xiàn)通過option標(biāo)簽對select添加選項，同時表單的method方法需指定為post來避免中文亂碼問題。

在userList.jsp頁面中使用JSTL標(biāo)簽遍歷集合中的用戶信息，JSTL相關(guān)知識，參見本書的相關(guān)內(nèi)容。12.3.6測試應(yīng)用

通過地址http://localhost:8080/ch12/user/input測試應(yīng)用，添加用戶信息頁面效果如圖12.2所示。

如果在圖12.2中，職業(yè)選擇“IT民工”時，添加失敗。失敗后還回到添加頁面，輸入過的信息不再輸入，自動回填（必須結(jié)合form標(biāo)簽）。自動回填是數(shù)據(jù)綁定的一個優(yōu)點。失敗頁面如圖12.3所示。12.4JSON數(shù)據(jù)交互SpringMVC在數(shù)據(jù)綁定的過程中，需要對傳遞數(shù)據(jù)的格式和類型進(jìn)行轉(zhuǎn)換，它既可以轉(zhuǎn)換String等類型的數(shù)據(jù)，也可以轉(zhuǎn)換JSON等其他類型的數(shù)據(jù)。本節(jié)將針對SpringMVC中JSON類型的數(shù)據(jù)交互進(jìn)行講解。12.4.1JSON概述JSON（JavaScriptObjectNotation，JS對象標(biāo)記）是一種輕量級的數(shù)據(jù)交換格式。與XML一樣，JSON也是基于純文本的數(shù)據(jù)格式。它有兩種數(shù)據(jù)結(jié)構(gòu)。1．對象結(jié)構(gòu)對象結(jié)構(gòu)以“{”開始，以“}”結(jié)束。中間部分由0個或多個以英文“,”分隔的key/value對構(gòu)成，key和value之間以英文“:”分隔。對象結(jié)構(gòu)的語法結(jié)構(gòu)如下：{ key1:value1, key2:value2, …}其中，key必須為String類型，value可以是String、Number、Object、Array等數(shù)據(jù)類型。2．?dāng)?shù)組結(jié)構(gòu)數(shù)組結(jié)構(gòu)以“[”開始，以“]”結(jié)束。中間部分由0個或多個以英文“,”分隔的值的列表組成。數(shù)組結(jié)構(gòu)的語法結(jié)構(gòu)如下：[ value1, value2, …]

上述兩種（對象、數(shù)組）數(shù)據(jù)結(jié)構(gòu)也可以分別組合構(gòu)成更為復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。例如：一個student對象包含sno、sname、hobby和college對象，其JSON的表示形式如下：{ "sno":"201802228888", "sname":"陳恒", "hobby":["籃球","足球"], "college":{ "cname":"清華大學(xué)", "city":"北京"}}12.4.2JSON數(shù)據(jù)轉(zhuǎn)換

為實現(xiàn)瀏覽器與控制器類之間的JSON數(shù)據(jù)交互，SpringMVC提供了MappingJackson2HttpMessageConverter實現(xiàn)類默認(rèn)處理JSON格式請求響應(yīng)。該實現(xiàn)類利用Jackson開源包讀寫JSON數(shù)據(jù)，將Java對象轉(zhuǎn)換為JSON對象和XML文檔，同時也可以

將JSON對象和XML文檔轉(zhuǎn)換為Java對象。Jackson開源包及其描述如下所示。jackson-annotations-2.9.4.jar：JSON轉(zhuǎn)換注解包。jackson-core-2.9.4.jar：JSON轉(zhuǎn)換核心包。jackson-databind-2.9.4.jar：JSON轉(zhuǎn)換的數(shù)據(jù)綁定包。

以上3個Jackson的開源包在編寫本書時，最新版本是2.9.4，讀者可通過地址“/artifact/com.fasterxml.jackson.core”下載得到。在使用注解開發(fā)時，需要用到兩個重要的JSON格式轉(zhuǎn)換注解，分別是@RequestBody和@ResponseBody。

@RequestBody：用于將請求體中的數(shù)據(jù)綁定到方法的形參中，該注解應(yīng)用在方法的形參上。

@ResponseBody：用于直接返回return對象，該注解應(yīng)用在方法上。

下面通過一個案例來演示如何進(jìn)行JSON數(shù)據(jù)交互，具體步驟如下。1．創(chuàng)建應(yīng)用并導(dǎo)入相關(guān)JAR包2．配置web.xml

在web.xml文件中，對SpringMVC的前端控制器等信息進(jìn)行配置。代碼與第10章ch10的相同，不再贅述。3．配置SpringMVC的核心配置文件<!--使用掃描機(jī)制，掃描控制器類--><context:component-scanbase-package="controller"/><mvc:annotation-driven/><!--annotation-driven用于簡化開發(fā)的配置，

注解DefaultAnnotationHandlerMapping和AnnotationMethodHandlerAdapter--><!--使用resources過濾掉不需要dispatcherservlet的資源。

使用resources時，必須使用annotation-driven，不然resources元素會阻止任意控制器被調(diào)用。--><!--配置靜態(tài)資源，允許js目錄下所有文件可見--><mvc:resourceslocation="/js/"mapping="/js/**"></mvc:resources> <!--配置視圖解析器--> <beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"id="internalResourceViewResolver"><!--前綴--><propertyname="prefix"value="/WEB-INF/jsp/"/><!--后綴--><propertyname="suffix"value=".jsp"/></bean>4．創(chuàng)建POJO類packagepojo;publicclassPerson{ privateStringpname; privateStringpassword; privateIntegerpage; //省略setter和getter方法}5．創(chuàng)建JSP頁面測試JSON數(shù)據(jù)交互

在index.jsp頁面