详解Vue结合后台的列表增删改案例
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
首先列表内容还是与之前的列表内容类似，不过此处我们会采用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="/UploadFiles/2021-04-02/vue-2.4.0.js">
上述代码中有两个地方略显啰嗦，第一个是url，第二个是传递Json数据之后对json的处理，vue-resource 提供了两个简化的操作，
url简化
我们可以在定义Vue对象之前使用
"htmlcode">
Vue.http.options.emulateJSON = true;
这样我们在请求时即可默认有此参数，请求的时候就不用加上这个参数了。
经过简化，上述代码被简化为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/vue-2.4.0.js">
此案例后台为我使用mybatis和springboot所做的简单后台，大家也可以自行操作。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：JQuery扩展对象方法操作示例
下一篇：JavaScript事件发布/订阅模式原理与用法分析