1. Ajax異步調用-POST
1.1 對象送出
1.1.1 頁面JS
1.首先封裝資料.利用JS對象将資料進行包裹.
2.利用post請求,将JS對象進行發送.
1.1.2 請求資料說明
說明: 資料經過http協定進行傳輸,則資料由原來的JS對象 變為了有特殊格式意義的JSON串.
1.1.3 編輯POJO對象
說明: 辨別主鍵自增.
1.1.4 編輯後端Controller
1.1.5 編輯後端Service
1.2 restFul風格實作使用者新增
1.2.1 編輯頁面JS
1.2.2 編輯UserController
2. 簡化Axios調用
2.1 設定公共的請求路徑
2.1.1 需求說明
說明: 由于ajax異步請求,其中每次都需要編輯完整的請求路徑.如果請求個數較多,則寫法上較為繁瑣.
解決方案: 将公共的請求路徑單獨進行抽取.
2.1.2 實作路徑的封裝
2.2 解構指派操作
2.3 簡化使用者清單展現
2.3.1 設定基本請求路徑
2.3.2 簡化userList擷取
2.3.3 簡化删除操作
2.4 使用者新增操作
2.4.1 編輯頁面
定義标簽: 實作新增使用者的雙向資料綁定
2.4.2 定義新增屬性
2.4.3 定義方法實作
按照axios實作使用者資料新增. 由于新增後端之前已經完成.是以這裡省略
2.5 使用者修改回顯
2.5.1 編輯修改頁面
2.5.2 定義修改屬性
2.5.3 為修改按鈕添加事件
2.5.4 實作資料回顯
2.6 使用者資料修改
2.6.1 修改按鈕添加點選事件
2.6.2 編輯修改函數
2.6.3 編輯後端Controller
2.6.4 編輯後端Service
2.7 編輯關于請求參數說明
2.7.1 get/delete請求說明
說明: GET/DELETE參數是 KEY=VALUE結構,如果傳遞多個資料,則通過&方式進行拼接.
URL: HTTP://localhost:8090/getUser?id=1&name="tomcat"
後端接收: public List getUserByNS(User user){}
資料的轉化:
1.使用者調用請求.
2.user對象需要在記憶體中執行個體化(空對象)
3.SpringMVC架構.為對象的屬性指派, id=1&name=“tomcats” 根據key 調用對象身上的set方法.最終可以為屬性指派.
2.7.2 post/put請求說明
URL: HTTP://localhost:8090/saveUser
參數:
1. jQuery的ajax 如果進行post請求,資料的結構 KEY1=VALUE1,KEY2=VALUE2 k-v結構,後端直接利用對象接收(set方法)
2. axios的ajax 寫的JS對象/網絡傳輸時JSON串 結構 “{key:value,key2:value2}”
如果後端需要為對象指派,json串無法直接轉化對象. SpringMVC針對于這個問題.開發了@RequestBody注解.注解解決json串轉化為對象的問題.
2.8 v-for循環周遊說明
說明:在循環周遊時會在虛拟DOM對象中儲存周遊的資料,友善使用者對資料進行操作
3 作業
- 将使用者清單資料的展現 從頭做 3遍 做不完别走
- (快)元件化思想/路由
1. Ajax異步調用-POST
1.1 對象送出
1.1.1 頁面JS
1.首先封裝資料.利用JS對象将資料進行包裹.
2.利用post請求,将JS對象進行發送.
1.1.2 請求資料說明
說明: 資料經過http協定進行傳輸,則資料由原來的JS對象 變為了有特殊格式意義的JSON串.
1.1.3 編輯POJO對象
說明: 辨別主鍵自增.
1.1.4 編輯後端Controller
1.1.5 編輯後端Service
1.2 restFul風格實作使用者新增
1.2.1 編輯頁面JS
1.2.2 編輯UserController
2. 簡化Axios調用
2.1 設定公共的請求路徑
2.1.1 需求說明
說明: 由于ajax異步請求,其中每次都需要編輯完整的請求路徑.如果請求個數較多,則寫法上較為繁瑣.
解決方案: 将公共的請求路徑單獨進行抽取.
2.1.2 實作路徑的封裝
2.2 解構指派操作
2.3 簡化使用者清單展現
2.3.1 設定基本請求路徑
2.3.2 簡化userList擷取
2.3.3 簡化删除操作
2.4 使用者新增操作
2.4.1 編輯頁面
定義标簽: 實作新增使用者的雙向資料綁定
2.4.2 定義新增屬性
2.4.3 定義方法實作
按照axios實作使用者資料新增. 由于新增後端之前已經完成.是以這裡省略
2.5 使用者修改回顯
2.5.1 編輯修改頁面
2.5.2 定義修改屬性
2.5.3 為修改按鈕添加事件
2.5.4 實作資料回顯
2.6 使用者資料修改
2.6.1 修改按鈕添加點選事件
2.6.2 編輯修改函數
2.6.3 編輯後端Controller
2.6.4 編輯後端Service
2.7 編輯關于請求參數說明
2.7.1 get/delete請求說明
說明: GET/DELETE參數是 KEY=VALUE結構,如果傳遞多個資料,則通過&方式進行拼接.
URL: HTTP://localhost:8090/getUser?id=1&name="tomcat"
後端接收: public List getUserByNS(User user){}
資料的轉化:
1.使用者調用請求.
2.user對象需要在記憶體中執行個體化(空對象)
3.SpringMVC架構.為對象的屬性指派, id=1&name=“tomcats” 根據key 調用對象身上的set方法.最終可以為屬性指派.
2.7.2 post/put請求說明
URL: HTTP://localhost:8090/saveUser
參數:
1. jQuery的ajax 如果進行post請求,資料的結構 KEY1=VALUE1,KEY2=VALUE2 k-v結構,後端直接利用對象接收(set方法)
2. axios的ajax 寫的JS對象/網絡傳輸時JSON串 結構 “{key:value,key2:value2}”
如果後端需要為對象指派,json串無法直接轉化對象. SpringMVC針對于這個問題.開發了@RequestBody注解.注解解決json串轉化為對象的問題.
2.8 v-for循環周遊說明
說明:在循環周遊時會在虛拟DOM對象中儲存周遊的資料,友善使用者對資料進行操作
3 作業
- 将使用者清單資料的展現 從頭做 3遍 做不完别走
- (快)元件化思想/路由