首先列表内容还是与之前的列表内容类似,不过此处我们会采用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结合后台的增删改案例的更多相关文章

  1. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  2. vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  3. vue+express+mongodb 实现 增删改查

    一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...

  4. node 后台使用增删改查(4)

    无论node还是java增删改查都是一样的原理,变得是配合框架使用时候有简便方法而已. 这里我接着上一篇开始讲,使用同一个数据库(数据库创建)这里必须创建了数据库 优化:为了维护方便这里我们把sql语 ...

  5. vue.js动态表格增删改代码

    新建一个html文件,内容如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  6. Flask项目实战:创建电影网站(3)后台的增删改查

    添加预告 根据需求数据库创建表格 需求数据库,关键字title logo # 上映预告 class Preview(db.Model): __tablename__ = "preview&q ...

  7. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  8. JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  9. Hibernate入门案例及增删改查

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

随机推荐

  1. qs.js使用方法

    https://github.com/ljharb/qs 占个空

  2. Linux系统中使用Nignx配置反向代理负载均衡

    目录 使用nginx实现动静分离的负载均衡集群 使用nginx实现负载均衡和动静分离 使用nginx实现动静分离的负载均衡集群 Nginx官网源码包下载链接:http://nginx.org/en/d ...

  3. poj2352(树状数组)

    题目链接:https://vjudge.net/problem/POJ-2352 题意:在直角坐标系中给出n个点的 (x,y),(0<=x,y<=32000),定义每个点的level为(x ...

  4. Statistics项目学习笔记

    1. http://218.244.157.0:55443/index.html 初始访问时,弹出的窗口为index.html文件,文件有html命令组成.html展现的UI界面用的是WIN10-UI ...

  5. Spring(八)-- 代理设计模式

    代理设计模式 1:基本概念 2:JDK动态代理 1. 创建接口 2. 创建实现类 3. 创建代理类 /** * jdk动态代理 不能满足 继承父类的情况 * * AnimalProxy 代理类 */ ...

  6. 数组遍历方法forEach 和 map 的区别

    数组遍历方法forEach 和 map 的区别:https://www.cnblogs.com/sticktong/p/7602783.html

  7. 掌握 analyze API,一举搞定 Elasticsearch 分词难题

    初次接触 Elasticsearch 的同学经常会遇到分词相关的难题,比如如下这些场景: 为什么明明有包含搜索关键词的文档,但结果里面就没有相关文档呢? 我存进去的文档到底被分成哪些词(term)了? ...

  8. springboot中的编码设置

    在springboot中编码配置可以通过filter也可以通过springboot的核心配置文件application.properties中配置如下信息: #配置字符编码spring.http.en ...

  9. s:schema报错问题

    解决方案: 删除所有<s:element ref="s:schema"/>标签 说明书改为本地文件

  10. 万兴神剪手 Wondershare Filmora v9.2.11.6 简体中文版

    目录 1. 介绍 2. 简体中文9.2.1.10汉化版下载 3. 安装和激活说明 1. 介绍 万兴神剪手 Filmora 是一款界面简洁时尚.功能强大的视频编辑软件,它是深圳万兴科技公司近年来的代表作 ...