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) ...
随机推荐
- Hibernatne 缓存中二级缓存简单介绍
hibernate的session提供了一级缓存,每个session,对同一个id进行两次load,不会发送两条sql给数据库,但是session关闭的时候,一级缓存就失效了. 二级缓存是Sessio ...
- Android Monkey压力测试（转）
参考链接:https://www.cnblogs.com/yyh8/p/6707745.html Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Andr ...
- 如何区分浏览器发起的是基于http/1.x还是http/2的请求？
前言 随着2015年http2.0被推出以来,主流的现代浏览器大多都开始慢慢去实现这个协议,那么如果查看自己的浏览器是否支持发送http2.0的请求,或者如何查看浏览器发送的请求是基于哪一个 ...
- 关于lib和dll
关于lib和dll 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:这里说的就是静态链接库LIB和动态链接库DL,有些时候经常弄混淆这两个东西,这里基于 ...
- mysql每次update数据，自动更新对应表中时间字段
mysql 已经创建完成表的情况下, 使得其中的时间字段 在每次 uodate 数据的时候 自动更新事件, 运行如下sql ALTER TABLE tab_name MODIFY COLUMN upd ...
- poj2185（kmp算法next数组求最小循环节，思维）
题目链接:https://vjudge.net/problem/POJ-2185 题意:给定由大写字母组成的r×c矩阵,求最小子矩阵使得该子矩阵能组成这个大矩阵,但并不要求小矩阵刚好组成大矩阵,即边界 ...
- dubbo探究
一 占位 待整理.. 二 问题汇总 1 谈谈dubbo的超时重试 dubbo 启动时默认有重试机制和超时机制.如果在一定的时间内,provider没有返回,则认为本次调用失败.重试机制出现在调用失败时 ...
- WebSocket 中的Netty
测试Channelhandler EmbeddedChannel提供了下面一些方法: writeInbound(Object...),写一个消息到入站通道 writeOutbound(Object ...
- 堆学习笔记（未完待续）（洛谷p1090合并果子）
上次讲了堆,别人都说极其简单,我却没学过,今天又听dalao们讲图论,最短路又用堆优化,问懂了没,底下全说懂了,我???,感觉全世界都会了堆,就我不会,于是我决定补一补: ——————来自百度百科 所 ...
- Django 关联查询
查询id=1的XXXXX关联的YYYYY信息 a = XXXXX.objects.get(id=1) a.YYYYY.all() 查询id=1的YYYYY关联的XXXXX信息 b = YYYYY.ob ...