add Vue 2.x：vue-resource发起Ajax请求

smyhvae · smyhvae · commit bda829278f9f · 2018-06-11T23:02:04.000+08:00
diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md
@@ -79,14 +79,14 @@ live-server
     "username": "", //用户名
     "password": "", //密码
     "protocol": "sftp", //模式
-    "agent": null,  
+    "agent": null,
     "privateKeyPath": null,
     "passphrase": null,
     "passive": false,
     "interactiveAuth": false,
     "remotePath": "/root/node/build/",  //服务器上的文件地址
     "context": "./server/build",        //本地的文件地址
-    
+
     "uploadOnSave": true,   //监听保存并上传
     "syncMode": "update",
     "watcher": {            //监听外部文件
@@ -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 相关的插件
+## Vue 相关的插件
 
-- vetur：vue 文件的基本语法高亮
+### vetur：vue 文件的基本语法高亮
 
 安装完 vetur 后还需要加上这样一段配置下：
 
@@ -176,7 +190,7 @@ Sass 文件格式化。
 |:-------------|:-------------|:-----|:-----|
 | Shift + Alt + F |Shift + option + F| 代码格式化 |  |
 | Ctrl + Shift + N | |在当前行上面增加一行并跳至该行  |   |
-|  **Ctrl + Shift + D** | |复制当前行到下一行  |   | 
+|  **Ctrl + Shift + D** | |复制当前行到下一行  |   |
 
 
 
diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/21-Vue基础/02-Vue实例的生命周期函数.md
@@ -3,8 +3,6 @@
 
 ## 介绍
 
-### 定义
-
 
 
 - [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
@@ -15,11 +13,14 @@
 生命周期钩子 = 生命周期函数 = 生命周期事件。
 
 
-### 生命周期函数的主要分类
+## 生命周期函数的主要分类
 
 ![](http://img.smyhvae.com/20180422_1650.png)
 
-1、创建期间的生命周期函数：
+根据上面这张图，我们把生命周期函数主要分为三类。
+
+
+### 1、创建期间的生命周期函数
 
 - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
 
@@ -29,21 +30,8 @@
 
 - mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
 
-2、运行期间的生命周期函数：
-
-- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
-
-- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
-
-
-3、销毁期间的生命周期函数：
-
-- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
-
-- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
 
-
-举例1：创建期间的生命周期函数
+**举例**：
 
 
 ```html
@@ -103,10 +91,16 @@
 
 20180610_1500.png
 
+### 运行期间的生命周期函数
+
+- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+
+- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
 
-举例2：运行期间的生命周期函数
 
 
+**举例**：
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -167,3 +161,31 @@
 当我们点击按钮后，运行效果是：
 
 20180610_1528.png
+
+可以看出：
+
+- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的
+
+- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
+
+
+
+### 3、销毁期间的生命周期函数
+
+- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+
+- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
+
+
+
+
+## 生命周期函数图解
+
+20180610_2130.png
+
+PS：图片来自网络。
+
+
+
+
+
diff --git a/21-Vue基础/03-Vue中的Ajax请求.md b/21-Vue基础/03-Vue中的Ajax请求.md
@@ -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 @@
 
 ![](http://img.smyhvae.com/20180422_2152.png)
 
-如果我直接在浏览器中输入请求的url，获取的json数据如下：（这种方式获取的是相同的数据）
+如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）
 
 ![](http://img.smyhvae.com/20180422_2150.png)
 
 
 ### 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 @@
 
 ![](http://img.smyhvae.com/20180420_2250.png)
 
+
+**格式举例**：
+
 ```javascript
     // 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
     // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
@@ -441,5 +458,26 @@
 ![](http://img.smyhvae.com/20180420_2256.png)
 
 
+## JSONP的实现原理
+
+由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。
+
+**JSONP的实现原理**：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。
+
+
+ 具体实现过程：
+
+
+- 先在客户端定义一个回调方法，预定义对数据的操作
+
+- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；
+
+- 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
+
+- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了
+
+
+## axios
 
+除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
 
