1. 查詢(xún)功能

需求：在頁(yè)面加載完成之后，向服務(wù)器查詢(xún)列表并展示在頁(yè)面；

舊方法：
在window.onload綁定的函數(shù)內(nèi)，發(fā)送axios請(qǐng)求；
服務(wù)端發(fā)回JSON數(shù)據(jù)；
客戶端將響應(yīng)數(shù)據(jù)resp.data 循環(huán)取出拼接成字符串，最后賦值給表格的innerHTML屬性；

簡(jiǎn)化：

• 頁(yè)面完成的邏輯之前由DOM操作 window.onload 實(shí)現(xiàn)，現(xiàn)在可以用Vue的生命周期 mounted 屬性函數(shù)（mounted即表示掛載完成時(shí)自動(dòng)執(zhí)行）來(lái)實(shí)現(xiàn)！將axios寫(xiě)在 mounted中，以此給服務(wù)端發(fā)送請(qǐng)求！
• 遍歷展示數(shù)據(jù)時(shí)，之前是在axios的回調(diào)函數(shù)中 拼接字符串再通過(guò)DOM操作賦給表格的innerHTML屬性，現(xiàn)在使用 v-for 來(lái)遍歷（v-for遍歷的數(shù)據(jù)要來(lái)自于Vue對(duì)象）；

過(guò)程：

載入vue.js文件放到main-webapp-js目錄，并在HTML中引入vue和axios的js文件；

創(chuàng)建Vue核心對(duì)象，el屬性對(duì)應(yīng)<div標(biāo)簽的 id， <div 標(biāo)簽規(guī)定了vue的作用范圍；

在mounted屬性函數(shù)中，使用axios發(fā)送異步請(qǐng)求查詢(xún)數(shù)據(jù)；

將axios獲取的響應(yīng)數(shù)據(jù)賦給Vue的模型數(shù)據(jù)brands：

mounted中：
使用v-for遍歷服務(wù)端發(fā)來(lái)的響應(yīng)數(shù)據(jù)brands，而brands要在v-for中使用，所以需要將brands變成模型數(shù)據(jù)！（模型數(shù)據(jù)要在data中聲明）
要把a(bǔ)xios收到的響應(yīng)數(shù)據(jù)給Vue對(duì)象（axios不是html沒(méi)法用v-model雙向綁定），所以在axios外面先建立一個(gè)Vue對(duì)象的變量_this，這樣就能在axios中將服務(wù)端返回的數(shù)據(jù)賦給Vue對(duì)象的模型數(shù)據(jù)brands了 ；

注意：

axios的this是window對(duì)象，因?yàn)閍xios是由瀏覽器發(fā)出，即axios的調(diào)用者是window對(duì)象；
此時(shí)需要的是Vue對(duì)象，所以在axios外面先建立一個(gè)Vue的this的變量_this，這樣就能在axios中將服務(wù)端返回的數(shù)據(jù)賦給Vue中的模型數(shù)據(jù)brands了 ；

準(zhǔn)備：
引入axios和Vue的js文件

1.1 Vue核心對(duì)象：

注意axios獲取響應(yīng)數(shù)據(jù)resp.data后要將數(shù)據(jù)賦給Vue的data：function(){}中的 模型數(shù)據(jù) brands，這樣才可以在v-for中使用brands進(jìn)行遍歷！

1.2 brand.html：

用v-for循環(huán)遍歷Vue對(duì)象data 中的brands模型數(shù)據(jù)，而不用再去axios的回調(diào)函數(shù)中去拼接字符串再賦值給表格的innerHTML屬性（DOM操作）；
brands是JSON格式的數(shù)組，可以直接通過(guò) json.name 的方式獲取屬性；

<div id="app"> 注意id對(duì)應(yīng)Vue對(duì)象的el屬性 ！

</div>

1.3 selectAllServlet（無(wú)變化）：

收到請(qǐng)求后，查詢(xún)出列表brands并將其序列化為JSON，放入response并返回給axios，

2. 添加功能

需求：
客戶端點(diǎn)擊button后，服務(wù)端將瀏覽器輸入?yún)?shù)添加到數(shù)據(jù)庫(kù)并跳轉(zhuǎn)展示（需要使用JSON的反序列化）；

舊方法：
將button的onclick事件屬性綁定函數(shù)，在函數(shù)中建立js對(duì)象，并將表單的數(shù)據(jù)逐個(gè)賦給js對(duì)象，再把js對(duì)象放入data傳給服務(wù)端；
服務(wù)端反序列化為Java對(duì)象，添加到數(shù)據(jù)庫(kù)，返回標(biāo)記；
瀏覽器接收響應(yīng)后跳轉(zhuǎn)頁(yè)面；

簡(jiǎn)化：

• button的事件屬性onclick，換成@click （v-on 縮寫(xiě)），對(duì)應(yīng)的函數(shù)寫(xiě)在Vue的methods屬性中；
• 給每一個(gè)表單項(xiàng)使用v-model 雙向綁定（表單 — 模型）！當(dāng)表單項(xiàng)用戶輸入改變，則模型的屬性自動(dòng)變化！而不需要再用DOM操作逐個(gè)去賦值給js對(duì)象；

過(guò)程：
1.建立Vue核心對(duì)象，el 屬性為app，對(duì)應(yīng) <div id=”app”>；
2.將v-on:click屬性綁定函數(shù)submitForm，并將函數(shù)寫(xiě)在Vue的methods中，將來(lái)button被點(diǎn)擊則會(huì)執(zhí)行submitForm函數(shù)；
3.在submitForm中使用axios發(fā)送請(qǐng)求，發(fā)送的data是模型數(shù)據(jù)，模型則需要先在Vue的data中先定義 模型數(shù)據(jù)brand，然后將模型數(shù)據(jù)brand賦給axios請(qǐng)求數(shù)據(jù)的data發(fā)給服務(wù)端；
4.brand的值來(lái)源于表單，在表單中使用 v-model 雙向綁定！ 這樣表單輸入的值就會(huì)到模型數(shù)據(jù)brand當(dāng)中，此時(shí)就能把brand直接發(fā)給服務(wù)端了！

準(zhǔn)備：
引入axios和Vue的js文件

2.1 addBrandhtml：

綁定button的click屬性事件， v-on:click 簡(jiǎn)寫(xiě)為 @click
將表單項(xiàng)數(shù)據(jù)和brand模型數(shù)據(jù)雙向綁定！

2.2 Vue核心對(duì)象：

客戶端發(fā)送axios請(qǐng)求時(shí)，會(huì)去獲取data數(shù)據(jù)，由于brand模型對(duì)象和表單項(xiàng)數(shù)據(jù)是雙向綁定的，所以表單的數(shù)據(jù)同步到了brand模型對(duì)象中，以JSON方式發(fā)送到了服務(wù)端；
服務(wù)端添加數(shù)據(jù)并返回響應(yīng)，客戶端執(zhí)行回調(diào)函數(shù)跳轉(zhuǎn)頁(yè)面；

2.3 addServlet（無(wú)變化）：

• 在servlet獲取HTTP請(qǐng)求報(bào)文的請(qǐng)求體，再調(diào)用JOSN.parseObject()反序列化為Java對(duì)象！
• 將對(duì)象放入response傳給客戶端；

注意：

由于AJAX使用了POST的方式請(qǐng)求，數(shù)據(jù)在請(qǐng)求體中，使用request.getReader() 讀?。籸equest.getParameter()的方式不能接收J(rèn)SON格式的數(shù)據(jù)！ 這個(gè)方法切割的是HTTP請(qǐng)求報(bào)文的字符串；而JSON 的格式不一樣！
JSON數(shù)據(jù)不管多長(zhǎng)都是一行！

效果：
訪問(wèn)addBrand.html并填寫(xiě)表單，后臺(tái)收到數(shù)據(jù)會(huì)添加到數(shù)據(jù)庫(kù)，前端再跳轉(zhuǎn)頁(yè)面；
由于表單輸入的數(shù)據(jù)和模型雙向綁定，不再需要DOM操作將表單數(shù)據(jù)逐個(gè)賦值給js對(duì)象；

點(diǎn)擊提交后跳轉(zhuǎn)：

 到此這篇關(guān)于Vue簡(jiǎn)化用戶查詢(xún)/添加功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue用戶查詢(xún)/添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論