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 ...
随机推荐
- A1139-引爆炸弹 计蒜客 bfs剪枝
题目链接 https://nanti.jisuanke.com/t/A1139 在一个 n \times mn×m 的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上 ...
- JS ----- 底层原理
什么是JS JavaScript是一种基于对象的动态.弱类型脚本语言(简称JS),是一种解释型语言,和其他的编程语言不同,如java/C++等编译型语言,这些语言在代码执行前会进行通篇编译,先编译成字 ...
- djangourl进阶
- 爬取网易云音乐评论！python 爬虫入门实战（六）selenium 入门！
说到爬虫,第一时间可能就会想到网易云音乐的评论.网易云音乐评论里藏了许多宝藏,那么让我们一起学习如何用 python 挖宝藏吧! 既然是宝藏,肯定是用要用钥匙加密的.打开 Chrome 分析 Head ...
- GITFLOW流程
GITFLOW流程规范 GIT的使用非常的灵活,但是灵活就导致在使用的过程中有各种各样的情况,根据现有项目组的情况,使用GITFLOW流程规范作为项目开发流程规范. 该规范参考地址: 深入理解学习Gi ...
- P1216数字三角形
这是USACO的一道记忆化搜索题,还记得原来学搜索就是被此所困. 给定n深的数,第i层有i个节点,存储有一个数字,询问从第一层走到最后一层所经过节点上数字和的最大值.我们很容易想到枚举所有路径来计算最 ...
- E - 卿学姐与城堡的墙(树状数组求逆序数)
卿学姐与城堡的墙 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit ...
- url简单加密
使用urlencode和urldecode可以对传输的字符串进行简单的加密,也可用于将汉字转换为16进制数字进行传输,每个16进制数前面都带一个% urlencode : 将中文转换为16进制数 ur ...
- 运维LVS-NAT模式理解
一.LVS-NAT模式的工作原理这个是通过网络地址转换的方法来实现调度的.首先调度器(LB)接收到客户的请求数据包时(请求的目的IP为VIP),根据调度算法决定将请求发送给哪个 后端的真实服务器(RS ...
- vue的v-model指令原理分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...