Vue结合后台的增删改案例

首先列表内容还是与之前的列表内容类似，不过此处我们会采用Vue中数据请求的方式来实现数据的增删。那么我们使用的Vue第三方组件就是vue-resource，vue发起请求的方式与jQuery的ajax相似，组要是请求地址与参数。和方法

首先我们先看到的是列表请求

                
                    
                        
                            Id
                            Name
                            CTime
                            Operation
                        
                    
                    
                        
                            {{ item.id }}
                            {{item.title}}
                            {{item.description}}
                            删除
        
                        
                    
                    
                

在methods中获取到的加入获取数据的list方法，使用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();
            },

增加和删除元素的方法与此类似，这里给出详细代码，不做讲解

    
        
        
        
        
        
    
    
        
            
            
                
                    添加品牌
                
            
                
                    Id:
                
                
                    Name:                    
                
                
                    关键字                
                
                

                          
            
                
                    
                        
                            Id
                            Name
                            CTime
                            Operation
                        
                    
                    
                        
                            {{ item.id }}
                            {{item.title}}
                            {{item.description}}
                            删除
        
                        
                    
                    
                
        

    
    

上述代码中有两个地方略显啰嗦，第一个是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;

这样我们在请求时即可默认有此参数，请求的时候就不用加上这个参数了。

经过简化，上述代码被简化为

    
        
        
        
        
        
    
    
        
            
            
                
                    添加品牌
                
            
                
                    Id:
                
                
                    Name:                    
                
                
                    关键字                
                
                

                          
            
                
                    
                        
                            Id
                            Name
                            CTime
                            Operation
                        
                    
                    
                        
                            {{ item.id }}
                            {{item.title}}
                            {{item.description}}
                            删除
        
                        
                    
                    
                
        

    
    

此案例后台为我使用mybatis和springboot所做的简单后台，大家也可以自行操作。

作者：镇屌要逆袭
链接：https://www.jianshu.com/p/011c2bc916ec