Vueのデータベース接続インタフェース取得リストによる追加削除機能

最近vueを学習したいくつかの知識点を記録して、今日Vueがvue-resourceを通じてデータベースインタフェースを接続してリストをレンダリングして削除機能を追加することを記録します
まずvueのバージョンファイルとvue-resourceを導入しなければなりません.js,注意:vue-resourceの導入はvueバージョンファイルの後に行う
リストページを書き、methodsにリストデータを取得する方法を書きます.

getAllList() {   //         
                   this.$http.get('api/getprodlist').then(result => {
                       var result = result.body
                       if (result.status === 0) {
                           this.list = result.message
                       } else {
                           alert('      ')
                       }
                   })
               }

もちろんリストはdataで定義されています

data: {
                name: '',
                list: [
                    { id: 1, name: '    ', ctime: new Date() },
                    { id: 2, name: '    ', ctime: new Date() }
                ]
            }

次に、vueのライフサイクル関数のcreated()関数を呼び出します.この関数を呼び出すと、vmインスタンスのdataとmethodsの初期化が完了すると、vmインスタンスが自動的に実行され、この関数には書いたばかりのgetAllList()関数が呼び出されます.リストが取得されます.追加と削除機能は似ていますが、削除時に対応するデータのid値を入力する必要があることに注意してください.urlの後ろに直接接続することができます.インタフェースアドレスの変更操作を容易にするために、グローバル構成を通じて、データインタフェースのルートドメイン名とグローバル有効化emulateJSONオプションを要求することができます.

 Vue.http.options.root='http://www.liulongbin.top:3005/';
  Vue.http.options.emulateJSON=true;

以下はすべてのコードです.

    
    
    
    
    
    
    




    


        

            

                
    
            
            

                
                    Name:
                    
                
                
            
        

        

            

                

                    
Id
                    
Name
                    
Ctime
                    
Operation
                
            
            

                

                    
{{ item.id}}
                    
{{ item.name}}
                    
{{ item.ctime}}
                    

                          
                    
                
            
        

    
    
        //        ，          
        Vue.http.options.root='http://www.liulongbin.top:3005/';
        //    emulateJSON  
        Vue.http.options.emulateJSON=true;
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                list: [
                    { id: 1, name: '    ', ctime: new Date() },
                    { id: 2, name: '    ', ctime: new Date() }
                ]
            },
            created() {    // vm   data methods      ，vm       
                this.getAllList()
            },
            methods: {
                add() {   //  
                    this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
                        if (result.body.status === 0) {
                            //  
                            this.getAllList()
                            this.name=''
                        } else {
                            alert('      ')
                        }
                    })
                },
                getAllList() {   //         
                    this.$http.get('api/getprodlist').then(result => {
                        var result = result.body
                        if (result.status === 0) {
                            this.list = result.message
                        } else {
                            alert('      ')
                        }
                    })

                },
                del(id){    //  
                    this.$http.get('api/delproduct/'+id).then(result=>{
                        if (result.body.status === 0) {
                            //  
                            this.getAllList()
                        } else {
                            alert('      ')
                        }
                    })
                }
            }
        })