10.Vue请求远端数据库
代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script 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 panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</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.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div> <script>
// 如果我们通过全局配置了，请求的数据接口根域名，则在每次单独发起 http请求的时候，请求的 url 路径应该以相对路径开头，
//$http.get('api/getprodlist')前面不能带/，否则不会启用根路径做拼接；
Vue.http.options.root = 'http://vue.studyit.io/'; // 全局启用 emulateJSON 选项
Vue.http.options.emulateJSON = true; // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [ // 存放所有品牌列表的数组
]
},
created() { // 当 vm 实例的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods: {
getAllList() { // 获取所有的品牌列表
// 分析：
// 1. 由于已经导入了 Vue-resource这个包，所以可直接通过 this.$http 来发起数据请求
// 2. 根据接口API文档知道，获取列表的时候，应该发起一个 get 请求
// 3. this.$http.get('url').then(function(result){})
// 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
// 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！ this.$http.get('api/getprodlist').then(result => {
// 注意：通过 $http 获取到的数据都在 result.body 中放着
var result = result.body
if (result.status === 0) {
// 成功了
this.list = result.message
} else {
// 失败了
alert('获取数据失败！')
}
})
},
//2.添加品牌列表到后台服务器
add() {
// 分析：
// 1. 通过查看数据API接口发现，要发送一个 Post 请求，this.$http.post
// 2. this.$http.post() 中接收三个参数：
// 2.1 第一个参数： 要请求的URL地址
// 2.2 第二个参数： 要提交给服务器的数据 ，要以对象形式提交给服务器 { name: this.name }
// 3.3 第三个参数： 是一个配置对象，要以哪种表单数据类型提交过去， { emulateJSON: true }, 以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
// 3.在 post方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要result.body /* this.$http.post('api/addproduct', }{ name: this.name , { emulateJSON: true }).then(result => {
if (result.body.status === 0) {
// 成功了！
// 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.name = ''
} else {
// 失败了
alert('添加失败！')
}
}) */ //全局启用了emulateJSON 选项
this.$http.post('api/addproduct', { name: this.name }).then(result => {
if (result.body.status === 0) {
// 成功了！
// 添加完成后，只需要手动，再调用一下 getAllList 就能刷新品牌列表了
this.getAllList()
// 清空 name
this.name = ''
} else {
// 失败了
alert('添加失败！')
}
})
},
//3.删除品牌
del(id) {
this.$http.get('api/delproduct/' + id).then(result => {
if (result.body.status === 0) {
// 删除成功
this.getAllList()
} else {
alert('删除失败！')
}
})
}
}
});
</script>
</body>
</html>
10.Vue请求远端数据库的更多相关文章
- 中间件学习之RMI+JDBC远端数据库的访问
问题: RMI+JDBC远端数据库的访问.实现简单的成绩查询系统(创建表,录入成绩,查询成绩等).在服务器端,通过JDBC访问数据库.客户端调用服务端提供的各种数据库操作. 环境准备: (1).确保J ...
- 使用HAProxy、PHP、Redis和MySQL支撑每周10亿请求
在公司的发展中,保证服务器的可扩展性对于扩大企业的市场需要具有重要作用,因此,这对架构师提出了一定的要求.Octivi联合创始人兼软件架构师Antoni Orfin将向你介绍一个非常简单的架构,使用H ...
- 转 使用HAProxy,PHPRedis,和MySQL支撑10亿请求每周架构细节
[编者按]在公司的发展中,保证服务器的可扩展性对于扩大企业的市场需要具有重要作用,因此,这对架构师提出了一定的要求.Octivi联合创始人兼软件架构师Antoni Orfin将向你介绍一个非常简单的架 ...
- OpenLayers添加点【php请求MySQL数据库返回GeoJSON数据】
php请求MySQL数据库返回GeoJSON数据的实现方法请参见: http://www.cnblogs.com/marost/p/6234514.html OpenLayers[v3.19.1-di ...
- 无法打开登录所请求的数据库 "ASPState"。登录失败。 用户 'NT AUTHORITY/SYSTEM' 登录失败。
原文:无法打开登录所请求的数据库 "ASPState".登录失败. 用户 'NT AUTHORITY/SYSTEM' 登录失败. 无法打开登录 'ASPState' 中请求的数据库 ...
- 无法打开登录 'ASPState' 中请求的数据库。登录失败。
问题: 无法打开登录 'ASPState' 中请求的数据库.登录失败.用户 'WH\Administrator' 登录失败. 解决方法: (启动SQL Server Agent服务) 从本系统中找到: ...
- MySQL性能调优的10个方法 - mysql数据库栏目
摘要: https://edu.aliyun.com/a/29036?spm=5176.11182482.related_article.1.hbeZbF 摘要: MYSQL 应该是最流行了 WEB ...
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- 10分钟理解Android数据库的创建与使用(附具体解释和演示样例代码)
1.Android数据库简单介绍. Android系统的framework层集成了Sqlite3数据库.我们知道Sqlite3是一种轻量级的高效存储的数据库. Sqlite数据库具有以下长处: (1) ...
随机推荐
- gd库的相关内容
gd库注意事项 对于乱码问题 在php里面包含 header("content-type:image/png"); 这样输出的图像就不会乱码了后面跟的Png也可以改变为自己想要输出 ...
- （CVE-2017-7494）Samba远程代码执行[Linux]
简介 此漏洞是针对开启了共享的smb服务 漏洞利用 启动msfconsole search is_known_pipename 搜索此模块 use exploit/linux/samba/is_k ...
- C#基础知识学习 linq 和拉姆表达式二
- @ResponseBody使用
@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML 数据,需 ...
- 用gcd库函数求最大公约数
如何直接调用库函数来求最大公约数呢? 1.首先看怎样求两个数的最大公约数 要注意gcd()前面是两个“_” !!! #include<bits/stdc++.h> using namesp ...
- [转帖]linux常用命令大全（linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习）
linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...
- NoSQL数据库一Redis基本使用
基本操作 参考教程:https://www.yiibai.com/redis/Redis 是 Key-Value 内存数据库,操作是通过各种指令进行的,比如 SET 指令可以设置键值对,而 GET 指 ...
- springboot整合thymeleaf——引用静态资源
原html src="/css/index.css" thymeleaf中,th:src="@{/css/index.css}"
- diy操作系统 附录：gcc栈帧开启与关闭
在gcc命令行参数中可以使用-fno-omit-frame-pointer来开启栈帧的使用,或者使用-fomit-frame-pointer选项来关闭. 然而,也可以针对某一个函数进行配置方法如下,这 ...
- EXIT(外部中断)控制实验
实验目的 设计使用外接的按键来作为触发源,使得控制器产生中断,并在中断服务函数中实现控制小灯的亮灭. 按键硬件点路 编程要点 初始化用来产生中断的 GPIO: 初始化 EXTI: 配置 NVIC: 编 ...