详解Vue结合后台的列表增删改案例

时间：2021-05-25

首先列表内容还是与之前的列表内容类似，不过此处我们会采用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中获取到的加入获取数据的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" 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所做的简单后台，大家也可以自行操作。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章