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) ...
随机推荐
- 【Leetcode_easy】599. Minimum Index Sum of Two Lists
problem 599. Minimum Index Sum of Two Lists 题意:给出两个字符串数组,找到坐标位置之和最小的相同的字符串. 计算两个的坐标之和,如果与最小坐标和sum相同, ...
- 第二十四章 在线会话管理——《跟我学Shiro》
目录贴:跟我学Shiro目录贴 有时候需要显示当前在线人数.当前在线用户,有时候可能需要强制某个用户下线等:此时就需要获取相应的在线用户并进行一些操作. 本章基于<第十六章 综合实例>代码 ...
- 斑马打印机ZT610有线IP地址设置
设定完毕IP地址后,将协议改为永久,并复位网络!设置完毕,复位网络!设置完毕,复位网络!设置完毕,复位网络! 不复位网络,设置无效!
- leetCode:twoSum 两数之和 【JAVA实现】
LeetCode 两数之和 给定一个整数数组,返回两个数字的索引,使它们相加到特定目标. 您可以假设每个输入只有一个解决方案,并且您可能不会两次使用相同的元素. 更多文章查看个人博客 个人博客地址:t ...
- vim文本编辑器的介绍及使用
(一)什么是vim编辑器 在Linux系统中配置应用服务,实际上就是在修改它的配置文件(配置文件可能有多个,其中包含不同的参数),而且日常工作中也一定免不了编写文档的事情吧,这些都是要通过文本编辑器来 ...
- 使用jquery操作iframe中的元素
使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...
- SecureCRT 配色方案
整体效果: 一:Options -- Global Options 1.Normal colors 2.Bold colors 二 :Options -- Session Options 1. ...
- dubbo探究
一 占位 待整理.. 二 问题汇总 1 谈谈dubbo的超时重试 dubbo 启动时默认有重试机制和超时机制.如果在一定的时间内,provider没有返回,则认为本次调用失败.重试机制出现在调用失败时 ...
- pipreqs 生成项目依赖的第三方包
项目开发的时候,总是要搭建和部署环境. 如果项目使用virtualenv环境,直接使用使用命令行pip freeze可以帮助我们自动生成项目所需要的环境 requirements.txt文件 $ pi ...
- 『Linux』第一节: 部署虚拟环境
一. 准备工具 1. VMware Workstation Pro下载 1.1 VMware Workstation Pro 激活许可证 UY758-0RXEQ-M81WP-8ZM7Z-Y3HDA V ...