03-vue實例生命週期和vue-resource

vue實例的生命週期

• 什麼是生命週期：從Vue實例建立、運行、到銷燬期間，老是伴隨着各類各樣的事件，這些事件，統稱爲生命週期！
• 生命週期鉤子：就是生命週期事件的別名而已；
• 生命週期鉤子 = 生命週期函數 = 生命週期事件
• 主要的生命週期函數分類：

• 建立期間的生命週期函數：
  • beforeCreate：實例剛在內存中被建立出來，此時，尚未初始化好 data 和 methods 屬性
  • created：實例已經在內存中建立OK，此時 data 和 methods 已經建立OK，此時尚未開始 編譯模板
  • beforeMount：此時已經完成了模板的編譯，可是尚未掛載到頁面中
  • mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
• 運行期間的生命週期函數：
  • beforeUpdate：狀態更新以前執行此函數， 此時 data 中的狀態值是最新的，可是界面上顯示的 數據仍是舊的，由於此時尚未開始從新渲染DOM節點
  • updated：實例更新完畢以後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被從新渲染好了！
• 銷燬期間的生命週期函數：
  • beforeDestroy：實例銷燬以前調用。在這一步，實例仍然徹底可用。
  • destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

 

vue-resource 實現 get, post, jsonp請求

1. JSONP的實現原理

• 因爲瀏覽器的安全性限制，不容許AJAX訪問 協議不一樣、域名不一樣、端口號不一樣的 數據接口，瀏覽器認爲這種訪問不安全；
• 能夠經過動態建立script標籤的形式，把script標籤的src屬性，指向數據接口的地址，由於script標籤不存在跨域限制，這種數據獲取方式，稱做JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支持Get請求）；
• 具體實現過程：
  • 先在客戶端定義一個回調方法，預約義對數據的操做；
  • 再把這個回調方法的名稱，經過URL傳參的形式，提交到服務器的數據接口；
  • 服務器數據接口組織好要發送給客戶端的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析執行；
  • 客戶端拿到服務器返回的字符串以後，看成Script腳本去解析執行，這樣就可以拿到JSONP的數據了；

　　例子：

　　

const http = require('http');
   // 導入解析 URL 地址的核心模塊
   const urlModule = require('url');

   const server = http.createServer();
   // 監聽 服務器的 request 請求事件，處理每一個請求
   server.on('request', (req, res) => {
     const url = req.url;

     // 解析客戶端請求的URL地址
     var info = urlModule.parse(url, true);

     // 若是請求的 URL 地址是 /getjsonp ，則表示要獲取JSONP類型的數據
     if (info.pathname === '/getjsonp') {
       // 獲取客戶端指定的回調函數的名稱
       var cbName = info.query.callback;
       // 手動拼接要返回給客戶端的數據對象
       var data = {
         name: 'zs',
         age: 22,
         gender: '男',
         hobby: ['吃飯', '睡覺', '運動']
       }
       // 拼接出一個方法的調用，在調用這個方法的時候，把要發送給客戶端的數據，序列化爲字符串，做爲參數傳遞給這個調用的方法：
       var result = `${cbName}(${JSON.stringify(data)})`;
       // 將拼接好的方法的調用，返回給客戶端去解析執行
       res.end(result);
     } else {
       res.end('404');
     }
   });

   server.listen(3000, () => {
     console.log('server running at http://127.0.0.1:3000');
   });

　　2.vue-resource 的配置步驟：

• • 直接在頁面中，經過script標籤，引入 vue-resource 的腳本文件；
  • 注意：引用的前後順序是：先引用 Vue 的腳本文件，再引用 vue-resource 的腳本文件；

1. 發送get請求：　　

getInfo() { // get 方式獲取數據
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

　　　　　　2.發送post請求：

postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三個參數：
  // 參數1： 要請求的URL地址
  // 參數2： 要發送的數據對象
  // 參數3： 指定post提交的編碼類型爲 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

　　　　　　3.發送JSONP請求獲取數據：

jsonpInfo() { // JSONP形式從服務器獲取數據
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

 

 

 

配置本地數據庫和數據接口API

1. 先解壓安裝 PHPStudy;
2. 解壓安裝 Navicat 這個數據庫可視化工具，並激活；
3. 打開 Navicat 工具，新建空白數據庫，名爲 dtcmsdb4;
4. 雙擊新建的數據庫，鏈接上這個空白數據庫，在新建的數據庫上右鍵 -> 運行SQL文件，選擇並執行 dtcmsdb4.sql 這個數據庫腳本文件；若是執行不報錯，則數據庫導入完成；
5. 進入文件夾 vuecms3_nodejsapi 內部，執行 npm i 安裝全部的依賴項；
6. 先確保本機安裝了 nodemon, 沒有安裝，則運行 npm i nodemon -g 進行全局安裝，安裝完畢後，進入到 vuecms3_nodejsapi目錄 -> src目錄 -> 雙擊運行 start.bat
7. 若是API啓動失敗，請檢查 PHPStudy 是否正常開啓，同時，檢查 app.js 中第 14行 中數據庫鏈接配置字符串是否正確；PHPStudy 中默認的 用戶名是root，默認的密碼也是root