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 ...
随机推荐
- MSF魔鬼训练营-3.1.1信息收集-通过DNS和IP地址挖掘目标网络信息
情报搜集环境站渗透测试全过程的80%~90% 一.外围信息搜集(公开渠道信息搜集OSINT open source intelligence) 3.1.1信息收集-通过DNS和IP地址挖掘目标网 ...
- [百度知道]ssm和ssh各自的优势
https://zhidao.baidu.com/question/875108451824176892.html SSM和SSH不同主要在MVC实现方式,以及ORM持久化方面不同(Hiibernat ...
- Python3.7 下安装pyqt5
第一步:首先进入python安装目录下的 [scripts]. 第二步:执行安装pyqt5的命令:python37 -m pip install pyqt5 出现以下安装过程代表安装成功. 第三步:在 ...
- 小记---------Hadoop读、写文件步骤，HDFS架构理解
Hadoop 是一个开源框架,可编写和运行分布式应用处理大规模数据 Hadoop框架的核心是HDFS 和 MapReduce HDFS是分布式文件系统(存储) MapReduce是分布式数据处理模型和 ...
- Oracle数据库跟踪存储过程
1.[右击]该存储过程 ——>勾选[添加调试信息]——>点击[测试]选项 2.输入对应参数,点击下图左上角红框按钮,开始跟踪,可逐语句逐过程跟踪
- numpy数组转置与轴变换
numpy数组转置与轴变换 矩阵的转置 >>> import numpy as np >>> arr=np.arange(15).reshape((3,5)) &g ...
- BZOJ 1303 中位数图 题解
题面 因为所求的是中位数,所以考虑改变原序列.把大于 b 的数全部变为 1,小于 b 的数变为 −1,等于 b 则为 0.问题就变为求存在几个包含 b的区间和为 0 . 根据乘法原理,我们枚举每一个l ...
- 如何输出opencv编译信息
本文链接:https://mangoroom.cn/opencv/how-to-print-compile-info-of-opencv.html opencv提供了一个函数,利用这个函数可以输出当前 ...
- MySQL数据库创建时间和更新时间错乱问题
在数据中勾选create_time和update_time不为空可以解决更新记录时,create_time也被更新的毛病
- PythonDay11
第十一章函数使用_迭代器 今日内容 函数名的第一类对象及使用 f-strings 迭代器 函数名的第一类对象及使用 函数名可以当做值,赋值给变量 函数名可以当做容器内的元素 函数名可以当做函数的参数 ...