Vue簡化用戶查詢/添加功能的實現(xiàn)

更新時間：2023年01月29日 08:34:04 作者：斯沃福德

本文主要介紹了Vue簡化用戶查詢/添加功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1. 查詢功能

需求：在頁面加載完成之后，向服務器查詢列表并展示在頁面；

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

簡化：

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

過程：

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

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

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

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

mounted中：
使用v-for遍歷服務端發(fā)來的響應數(shù)據(jù)brands，而brands要在v-for中使用，所以需要將brands變成模型數(shù)據(jù)?。Ｐ蛿?shù)據(jù)要在data中聲明）
要把axios收到的響應數(shù)據(jù)給Vue對象（axios不是html沒法用v-model雙向綁定），所以在axios外面先建立一個Vue對象的變量_this，這樣就能在axios中將服務端返回的數(shù)據(jù)賦給Vue對象的模型數(shù)據(jù)brands了；

注意：

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

準備：
引入axios和Vue的js文件

1.1 Vue核心對象：

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

1.2 brand.html：

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

<div id="app"> 注意id對應Vue對象的el屬性！

</div>

1.3 selectAllServlet（無變化）：

收到請求后，查詢出列表brands并將其序列化為JSON，放入response并返回給axios，

2. 添加功能

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

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

簡化：

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

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

準備：
引入axios和Vue的js文件

2.1 addBrandhtml：

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

2.2 Vue核心對象：

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

2.3 addServlet（無變化）：

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

注意：

由于AJAX使用了POST的方式請求，數(shù)據(jù)在請求體中，使用request.getReader() 讀取；request.getParameter()的方式不能接收JSON格式的數(shù)據(jù)！這個方法切割的是HTTP請求報文的字符串；而JSON 的格式不一樣！
JSON數(shù)據(jù)不管多長都是一行！