Vueを詳細に説明し、バックグラウンドのリストを削除し、例を変更します。

11218 ワード
Vue リスト 添削する
まずリストの内容は前のリストの内容と似ていますが、ここではVueのデータ要求の方式を採用してデータの削除を実現します。私たちが使っているVueのサードパーティ・コンポーネントはvue-resourceで、vueが要求する方式はjQueryのajaxに似ています。グループが要求する住所とパラメータなら。と方法
まず私たちが先に見たのはリスト要求です。
リストを取得

        <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で取得した参加取得データのリスト方法は、get要求を使用する。

        getList(){
          this.$http.get('list').then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.list = result.data
              
            }else{
              alert("      ");
            }
          })
        },
注意したいのは、vue-resourceの要求で取得したデータを使って、すべてフィードバックデータのbody領域にカプセル化するとともに、Vueコンポーネントのcreatedライフサイクル関数にこの方法を使用してページをレンダリングする必要があることです。

      created(){
      //               this   
          this.getList();
      },
要素の追加と削除の方法はこれと似ています。ここで詳細コードを示します。説明しません。

<!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>
             
        </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("      ");
            }
          })
        },
        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("      ");
            }
          })
        },
        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("      ");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>
上記のコードの中には二つのところがあります。一つ目はurlで、二つ目はJsonデータを転送した後、jsonに対する処理です。vue-resourceは二つの簡単な操作を提供しています。
url簡略化
私たちはVueオブジェクトを定義する前に使うことができます。

​ Vue.http.options.root=http://localhost:8080/;
要求の基礎urlを定義して、直接に要求自体のurlを使ってもいいですが、注意すべきなのは二つのurlがつながってから、「//」が現れてはいけません。そうでないと問題が発生します。基本urlを使って最後に「/」が多くなりますが、カスタムのurlはありません。
もう一つはデータを伝えるパラメータの簡略化であり、
私たちはVueオブジェクトを定義する前に使うことができます。

Vue.http.options.emulateJSON = true;
このパラメータは要求時にデフォルトで設定できます。要求時にはこのパラメータを追加しなくてもいいです。
簡略化された後、上述のコードは

<!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>
             
        </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("      ");
            }
          })
        },
        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("      ");
            }
          })
        },
        del(id){
          console.log(2);
            this.$http.get('del/'+id).then(result=>{
            var result =result.body;
            if(result.code ===200){
              this.getList();
              
            }else{
              alert("      ");
            }
          })
        }
      }
      
    })
  </script>
  </body>
</html>
このケースのバックグラウンドはmybatisとspringbootの簡単なバックグラウンドを使ってくれます。みんなも自分で操作できます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
winddwosでphpを使ってoracleデータベースに接続する過程を共有します。
JavaScriptイベントのリリース/購読モードの原理と使い方の分析