add Vue 2.x：vue-resource发起Ajax请求
This commit is contained in:
qianguyihao
parent
c616642834
commit
f4dbef94dd
@ -136,11 +136,25 @@ Sass 文件格式化。
|
||||
- <https://www.zhihu.com/question/62385647>
|
||||
|
||||
|
||||
### Express
|
||||
|
||||
在本地开启Node服务器：
|
||||
|
||||
20180611_2230.png
|
||||
|
||||
然后在浏览器的地址栏输入`http://localhost/` + 文件的相对路径，就可以通过服务器的形式打开这个文件。
|
||||
|
||||
### Copy Relative Path
|
||||
|
||||
复制文件的相对路径：（相对于根路径而言）
|
||||
|
||||
20180611_2235.png
|
||||
|
||||
|
||||
### Vue 相关的插件
|
||||
|
||||
- vetur：vue 文件的基本语法高亮
|
||||
## Vue 相关的插件
|
||||
|
||||
### vetur：vue 文件的基本语法高亮
|
||||
|
||||
安装完 vetur 后还需要加上这样一段配置下：
|
||||
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
|
||||
## 介绍
|
||||
|
||||
### 定义
|
||||
|
||||
|
||||
|
||||
- [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
|
||||
@ -15,11 +13,14 @@
|
||||
生命周期钩子 = 生命周期函数 = 生命周期事件。
|
||||
|
||||
|
||||
### 生命周期函数的主要分类
|
||||
## 生命周期函数的主要分类
|
||||
|
||||
|
||||
|
||||
1、创建期间的生命周期函数：
|
||||
根据上面这张图，我们把生命周期函数主要分为三类。
|
||||
|
||||
|
||||
### 1、创建期间的生命周期函数
|
||||
|
||||
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
|
||||
|
||||
@ -29,21 +30,8 @@
|
||||
|
||||
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
|
||||
|
||||
2、运行期间的生命周期函数：
|
||||
|
||||
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
|
||||
|
||||
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
|
||||
|
||||
|
||||
3、销毁期间的生命周期函数：
|
||||
|
||||
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
|
||||
|
||||
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
|
||||
|
||||
|
||||
举例1：创建期间的生命周期函数
|
||||
**举例**：
|
||||
|
||||
|
||||
```html
|
||||
@ -103,9 +91,15 @@
|
||||
|
||||
20180610_1500.png
|
||||
|
||||
### 运行期间的生命周期函数
|
||||
|
||||
举例2：运行期间的生命周期函数
|
||||
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
|
||||
|
||||
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
|
||||
|
||||
|
||||
|
||||
**举例**：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -167,3 +161,31 @@
|
||||
当我们点击按钮后，运行效果是：
|
||||
|
||||
20180610_1528.png
|
||||
|
||||
可以看出：
|
||||
|
||||
- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的
|
||||
|
||||
- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
|
||||
|
||||
|
||||
|
||||
### 3、销毁期间的生命周期函数
|
||||
|
||||
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
|
||||
|
||||
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
|
||||
|
||||
|
||||
|
||||
|
||||
## 生命周期函数图解
|
||||
|
||||
20180610_2130.png
|
||||
|
||||
PS：图片来自网络。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,21 +1,34 @@
|
||||
|
||||
|
||||
## vue-resource
|
||||
|
||||
## vue-resource的介绍
|
||||
|
||||
`vue-resource`是Vue高度集成的第三方包。
|
||||
|
||||
官网链接：
|
||||
|
||||
- http相关：<https://github.com/pagekit/vue-resource/blob/master/docs/http.md>
|
||||
- 文档（http相关）：<https://github.com/pagekit/vue-resource/blob/master/docs/http.md>
|
||||
|
||||
vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。
|
||||
|
||||
**解释**：
|
||||
|
||||
`vue.js`文件向Windows对象暴露了`Vue`这个关键词；`vue-resource.js`向Vue身上挂载了`this.$http`这个属性。于是，我们可以直接写`this.$http.get`或者`this.$http.post`或者`this.$http.jsonp`来调用。
|
||||
|
||||
## vue-resource 发送Ajax请求
|
||||
|
||||
常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。
|
||||
|
||||
按照先后顺序，导入vue.js和vue-resource.js文件。
|
||||
|
||||
### get 请求
|
||||
|
||||
**格式**：
|
||||
**格式举例**：
|
||||
|
||||
```javascript
|
||||
this.$http.get(url)
|
||||
.then(function (response) {
|
||||
var data = response.body; //response.body是要获取的数据
|
||||
.then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数
|
||||
console.log(result.body); // response.body就是服务器返回的成功的数据
|
||||
var result = result.body;
|
||||
},
|
||||
function (err) {
|
||||
//err是异常数据
|
||||
@ -135,17 +148,18 @@
|
||||
|
||||
|
||||
|
||||
如果我直接在浏览器中输入请求的url，获取的json数据如下：（这种方式获取的是相同的数据）
|
||||
如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）
|
||||
|
||||
|
||||
|
||||
|
||||
### post请求
|
||||
|
||||
**格式**：
|
||||
**格式举例**：
|
||||
|
||||
```javascript
|
||||
// 调用 $http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true})
|
||||
// 方法：$http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true})
|
||||
// 通过 post 方法的第三个参数{ emulateJSON: true } ，来设置 提交的内容类型 为 普通表单数据格式
|
||||
this.$http.post(url, { name: '奔驰' }, { emulateJSON: true })
|
||||
.then(function (response) {
|
||||
alert(response.body.message);
|
||||
@ -425,6 +439,9 @@
|
||||
|
||||
|
||||
|
||||
|
||||
**格式举例**：
|
||||
|
||||
```javascript
|
||||
// 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
|
||||
// url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
|
||||
@ -441,5 +458,26 @@
|
||||
|
||||
|
||||
|
||||
## JSONP的实现原理
|
||||
|
||||
由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。
|
||||
|
||||
**JSONP的实现原理**：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。
|
||||
|
||||
|
||||
具体实现过程：
|
||||
|
||||
|
||||
- 先在客户端定义一个回调方法，预定义对数据的操作
|
||||
|
||||
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；
|
||||
|
||||
- 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
|
||||
|
||||
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了
|
||||
|
||||
|
||||
## axios
|
||||
|
||||
除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user