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实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- vue+express+mongodb 实现 增删改查
一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...
- node 后台使用增删改查（4）
无论node还是java增删改查都是一样的原理,变得是配合框架使用时候有简便方法而已. 这里我接着上一篇开始讲,使用同一个数据库(数据库创建)这里必须创建了数据库 优化:为了维护方便这里我们把sql语 ...
- vue.js动态表格增删改代码
新建一个html文件,内容如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- Flask项目实战：创建电影网站(3)后台的增删改查
添加预告 根据需求数据库创建表格 需求数据库,关键字title logo # 上映预告 class Preview(db.Model): __tablename__ = "preview&q ...
- VUE2.0增删改查附编辑添加model(弹框)组件共用
Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- Hibernate入门案例及增删改查
一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...
随机推荐
- 高级测试工程师面试必问面试基础整理——python基础（一）（首发公众号：子安之路）
现在深圳市场行情,高级测试工程师因为都需要对编程语言有较高的要求,但是大部分又没有python笔试机试题,所以面试必问python基础,这里我整理一下python基本概念,陆续收集到面试中python ...
- sublime3配置php开发环境
Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...
- mysql——单表查询——其它整理示例00
), sname ), sage ), ssex ) ); ','zhaolei','1990-01-01','nan'); ','qiandian','1990-12-21','nan'); ',' ...
- mysql 关键字大全
mysql无论表名,还是字段名都应该避开mysql关键字. 如字段使用关键字,sql查询需加上` `. 查询插件,当使用关键字,会报错. usage
- [转贴]linux lsof命令详解
linux lsof命令详解 https://www.cnblogs.com/sparkbj/p/7161669.html 简介 lsof(list open files)是一个列出当前系统打开文件的 ...
- python调用jenkinsapi
在通过python 调用jenkinsapi的时候,需要对一些作业进行定时对构建 报错: <title>Error 403 No valid crumb was included in t ...
- 死磕并发之CountDownLatch解析
CountDownLatch解析 CountDownLatch是什么 CountDownLatch是基于AQS的阻塞工具,阻塞一个或者多个线程,直到所有的线程都执行完成. CountDownLatch ...
- Python字符串和正则表达式中的反斜杠('\')问题
在Python普通字符串中 在Python中,我们用'\'来转义某些普通字符,使其成为特殊字符,比如 In [1]: print('abc\ndef') # '\n'具有换行的作用 abc defg ...
- 一道并发和锁的golang面试题
今天面试golang碰到了一道考并发和锁的题目,没有完成,所以把它记录下来,仅为以后复习. 场景:在一个高并发的web服务器中,要限制IP的频繁访问.现模拟100个IP同时并发访问服务器,每个IP要重 ...
- P1224 [NOI2013]向量内积
传送门 发现这个内积和矩乘有点像,考虑构造一个 $n$ 行 $m$ 列的矩阵 $A$,每一行都是一个题目给定的 $m$ 维向量 设 $B=AA^T$ ,其中 $A^T$ 为 $A$ 的转置矩阵,那么对 ...