快捷導(dǎo)航

詳解Vue結(jié)合后臺(tái)的列表增刪改案例

更新時(shí)間：2018年08月21日 10:00:35 作者：鎮(zhèn)屌要逆襲

這篇文章主要介紹了詳解Vue結(jié)合后臺(tái)的增刪改案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

首先列表內(nèi)容還是與之前的列表內(nèi)容類似，不過此處我們會(huì)采用Vue中數(shù)據(jù)請(qǐng)求的方式來實(shí)現(xiàn)數(shù)據(jù)的增刪。那么我們使用的Vue第三方組件就是vue-resource，vue發(fā)起請(qǐng)求的方式與jQuery的ajax相似，組要是請(qǐng)求地址與參數(shù)。和方法

首先我們先看到的是列表請(qǐng)求

獲取列表

        <table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">刪除</a></td>
    
            </tr>
          </tbody>
          
        </table>

在methods中獲取到的加入獲取數(shù)據(jù)的list方法，使用get請(qǐng)求

        getList(){
          this.$http.get('list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        },

需要注意的是，使用vue-resource的請(qǐng)求獲取的數(shù)據(jù)，都封裝在回調(diào)數(shù)據(jù)的body域中，同時(shí)我們需要在Vue組件的created生命周期函數(shù)中加入使用該方法來渲染頁面

      created(){
      //在其他方法中調(diào)用定義的方法使用this關(guān)鍵字
          this.getList();
      },

增加和刪除元素的方法與此類似，這里給出詳細(xì)代碼，不做講解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
    <script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" rel="external nofollow" rel="external nofollow" />
  </head>
  <body>
    <div id="app">
      
      <div class="panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
      <div class="panel-body form-inline">
        <label>
          Id:<input type="text" v-model="id" class="form-control" />
        </label>
        <label>
          Name:
          <input type="text" v-model="title" class="form-control" />
        </label>
        <label>
          關(guān)鍵字
        </label>
        <input type="text" v-model="description" class="form-control"/>
        <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

      </div>       
      </div>
        <table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">刪除</a></td>
    
            </tr>
          </tbody>
          
        </table>
    </div>

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        id:"",
        title:"",
        description:"",
        list:[],

      },
      created(){
          this.getList();
      },
      methods:{

        getList(){
          this.$http.get('http://localhost:8080/list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        },
        add(){
          this.$http.post('http://localhost:8080/submit',{id:this.id,title:this.title,description:this.description},{emulateJSON:true}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        },
        del(id){
            this.$http.get('http://localhost:8080/del/'+id,{emulateJSON:true}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>

上述代碼中有兩個(gè)地方略顯啰嗦，第一個(gè)是url，第二個(gè)是傳遞Json數(shù)據(jù)之后對(duì)json的處理，vue-resource 提供了兩個(gè)簡化的操作，

url簡化

我們可以在定義Vue對(duì)象之前使用

 Vue.http.options.root=http://localhost:8080/;

來定義請(qǐng)求的基礎(chǔ)url，然后直接使用請(qǐng)求本身的url就可以了，但是需要注意的是兩段url連接起來之后，不允許出現(xiàn)‘//',否則會(huì)出問題，一般我會(huì)采用基礎(chǔ)url最后多‘/',而自定義的url則無

還有一個(gè)是對(duì)傳遞數(shù)據(jù)的參數(shù)的簡化，

我們可以在定義Vue對(duì)象之前使用

Vue.http.options.emulateJSON = true;

這樣我們?cè)谡?qǐng)求時(shí)即可默認(rèn)有此參數(shù)，請(qǐng)求的時(shí)候就不用加上這個(gè)參數(shù)了。

經(jīng)過簡化，上述代碼被簡化為

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
    <script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7.css" rel="external nofollow" rel="external nofollow" />
  </head>
  <body>
    <div id="app">
      
      <div class="panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">添加品牌</h3>
        </div>
      <div class="panel-body form-inline">
        <label>
          Id:<input type="text" v-model="id" class="form-control" />
        </label>
        <label>
          Name:
          <input type="text" v-model="title" class="form-control" />
        </label>
        <label>
          關(guān)鍵字
        </label>
        <input type="text" v-model="description" class="form-control"/>
        <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

      </div>       
      </div>
        <table class=" table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>CTime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{item.title}}</td>
              <td>{{item.description}}</td>
              <td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="del(item.id)">刪除</a></td>
    
            </tr>
          </tbody>
          
        </table>
    </div>

  <script>
    Vue.http.options.root="http://localhost:8080/";
     Vue.http.options.emulateJSON = true;
    var vm = new Vue({
      el:'#app',
      data:{
        id:"",
        title:"",
        description:"",
        list:[],

      },
      created(){
          this.getList();
      },
      methods:{

        getList(){
          this.$http.get('list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        },
        add(){
          console.log("1");
          this.$http.post('submit',{id:this.id,title:this.title,description:this.description}).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        },
        del(id){
          console.log(2);
            this.$http.get('del/'+id).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("獲取數(shù)據(jù)失敗");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>

此案例后臺(tái)為我使用mybatis和springboot所做的簡單后臺(tái)，大家也可以自行操作。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: