帶大家通過 Node.js ，來手動實現一個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 [url]http://127.0.0.1:3000'[/url]);
  });
 

vue-resource 的配置步驟：

直接在頁面中，通過script標籤，引入 vue-resource 的指令碼檔案；
注意：引用的先後順序是：先引用 Vue 的指令碼檔案，再引用 vue-resource 的指令碼檔案；

傳送get請求：

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

傳送post請求：

postInfo() {
var url = 'http://127.0.0.1:8899/api/post

 this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}
傳送JSONP請求獲取資料：

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

配置本地資料庫和資料介面API
先解壓安裝 PHPStudy;
解壓安裝 Navicat 這個資料庫視覺化工具，並激活；
開啟 Navicat 工具，新建空白資料庫，名為 dtcmsdb4;
雙擊新建的資料庫，連線上這個空白資料庫，在新建的資料庫上右鍵 -> 執行SQL檔案，選擇並執行 dtcmsdb4.sql 這個資料庫指令碼檔案；如果執行不報錯，則資料庫匯入完成；
進入資料夾 vuecms3_nodejsapi 內部，執行 npm i 安裝所有的依賴項；
先確保本機安裝了 nodemon, 沒有安裝，則執行 npm i nodemon -g 進行全域性安裝，安裝完畢後，進入到 vuecms3_nodejsapi目錄 -> src目錄 -> 雙擊執行 start.bat
如果API啟動失敗，請檢查 PHPStudy 是否正常開啟，同時，檢查 app.js 中第 14行 中資料庫連線配置字串是否正確；PHPStudy 中預設的 使用者名稱是root，預設的密碼也是root

品牌管理改造
展示品牌列表新增品牌資料刪除品牌資料Vue中的動畫
為什麼要有動畫：動畫能夠提高使用者的體驗，幫助使用者更好的理解頁面中的功能；