- 首頁 > 生活百科 > >
Vue前端框架基礎+Element的使用( 三 )
修改視圖
<div id="app"><a ><input type="button" value="https://www.huyubaike.com/biancheng/新增"></a><br><hr><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序號</th><th>品牌名稱</th><th>企業名稱</th><th>排序</th><th>品牌介紹</th><th>狀態</th><th>操作</th></tr><tr v-for="(brand, i) in brands" align="center"><td>{{i+1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status}}</td><td><a >修改</a> <a >刪除</a></td></tr></table></div>完整代碼展示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><a ><input type="button" value="https://www.huyubaike.com/biancheng/新增"></a><br><hr><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序號</th><th>品牌名稱</th><th>企業名稱</th><th>排序</th><th>品牌介紹</th><th>狀態</th><th>操作</th></tr><tr v-for="(brand, i) in brands" align="center"><td>{{i+1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status}}</td><td><a >修改</a> <a >刪除</a></td></tr></table></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js"></script><script>new Vue({el:"#app",data(){return{// 注意此處為數組brands:[]}},// 當前頁面加載完成后發送AJAX請求，查詢數據mounted(){// Axios無法直接使用原生的thisvar _this = this;axios({method: "get",url: "http://localhost:8080//brand-demo-ajax/selectAll"}).then(function (resp) {// 接收后臺給到的數據，為JSON串，可自動反序列化為JavaScriptObjects_this.brands = resp.data;})}})</script></body></html>1.5.3 添加功能1.5.3.1 實現方式
- 點擊提交按鈕，發送ajax請求 ， 攜帶表單JSON數據 ， 使用
v-model
- 后臺接收請求，查詢接收到的品牌數據
- 調用對應的service方法添加數據
- 響應成功標識
- 獲取數據，判斷是否添加成功，跳轉到查詢所有數據頁面
1.5.3.2 編碼
- 引入Vue的JS文件（不再贅述）
- 創建Vue對象
new Vue({el: "#app",data(){return {brand:{}}},methods: {// 發送AJAX請求submitFrom() {// Axios無法直接使用原生的thisvar _this = this;axios({method: "post",url: "http://localhost:8080/brand-demo-ajax/add",// Axios傳遞參數時會自動將JavaScriptObject序列化為JSON串data: _this.brand}).then(function (resp){// 判斷響應數據是否為 successif (resp.data =https://www.huyubaike.com/biancheng/="success") {// 重定向到查詢所有頁面location.href = "http://localhost:8080/brand-demo-ajax/brand.html";}})}}}) - 修改視圖
<body><div id="app"><h3>添加品牌</h3><form action="" method="post">品牌名稱：<input id="brandName" v-model="brand.brandName" name="brandName"><br>企業名稱：<input id="companyName" v-model="brand.companyName" name="companyName"><br>排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>狀態：<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/0">禁用<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/1">啟用<br><input type="button" id="btn" @click="submitFrom" value="https://www.huyubaike.com/biancheng/提交"></form></div> - 頁面完整代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>添加品牌</title></head><body><div id="app"><h3>添加品牌</h3><form action="" method="post">品牌名稱：<input id="brandName" v-model="brand.brandName" name="brandName"><br>企業名稱：<input id="companyName" v-model="brand.companyName" name="companyName"><br>排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>狀態：<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/0">禁用<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/1">啟用<br><input type="button" id="btn" @click="submitFrom" value="https://www.huyubaike.com/biancheng/提交"></form></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js"></script><script>new Vue({el: "#app",data(){return {brand:{}}},methods: {// 發送AJAX請求submitFrom() {// Axios無法直接使用原生的thisvar _this = this;axios({method: "post",url: "http://localhost:8080/brand-demo-ajax/add",// Axios傳遞參數時會自動將JavaScriptObject序列化為JSON串data: _this.brand}).then(function (resp){// 判斷響應數據是否為 successif (resp.data =https://www.huyubaike.com/biancheng/="success") {// 重定向到查詢所有頁面location.href = "http://localhost:8080/brand-demo-ajax/brand.html";}})}}})</script></body></html>
推薦閱讀
-
-
-
幾千塊錢的二手面包車能買嗎 幾千塊錢的二手面包車能買嗎？
-
-
-
-
-
-
-
-
-
-
《諾貝爾獎包括哪些獎項 諾貝爾獎到底包括哪些獎項-諾貝爾獎包括哪些獎項 諾貝爾獎到底包括哪些獎項》
-
-
打鼻子的玻尿酸一般什么牌子的好 鼻子打玻尿酸注意事項有哪些
-
-
-
-
仰臥起坐怎么才能脖子不使勁 怎么做仰臥起坐不累脖子
-
