Vue结合后台的增删改案例

Posted zhendiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="#" @click.prevent="del(item.id)">删除</a></td>
        
                        </tr>
                    </tbody>
                    
                </table>

在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();
            },

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

<!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" />
    </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="#" @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" />
    </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="#" @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所做的简单后台,大家也可以自行操作。

以上是关于Vue结合后台的增删改案例的主要内容,如果未能解决你的问题,请参考以下文章

Vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权

vue的增删改查

使用vue实现表格的增删改查

vue-实现对数组的增删改查

vue.js带复选框表单的增删改差

连接数据库的增删改查