iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
1

今天換講講Vue好了寫了19天的後端跟理論,換點口味吧!
今天要來研究的是 Axios
在最早一開始的時候,Vue官方推薦的ajax套件並不是,一直到了去年年底的時候,Vue才將Axios加入到推薦項目中,取代vue-resource,當然如果你用習慣vue-resource也是可以使用的。

axios Github

Promise based HTTP client for the browser and node.js

在github中他有幾項特色

  • 可以從流覽器發送XMLHttpRequests ( 簡單來說可以發送ajax )
  • 可以從Nodejs發送 Http 請求
  • 支援ES6 Promise
  • 可以攔截請求跟回應
  • 改變或轉換請求與回應的資料(這跟上面有相互呼應的感覺)
  • 取消(多個?!)請求(Requests)
  • 自動轉換成Json格式
  • 可以預防XSRF攻擊

我們今天應該沒有要來講在伺服器端的研究,我們就以最簡單的方式來引入

首先我們先在html引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

為了做範例我們新寫一個頁面,裡面做的事情很簡單,按下按鈕以後要發送Request到我們之前用golang寫的api去取得資料
我將這次的範例放在
index.html

<!DOCTYPE html>
<html>
<head>
  <title>Axios Demo</title>
</head>
<body>
  <div id="app">
    <p v-for="teacher in teachers">{{ teacher.TeacherName }}</p>
    <button @click="getAllTeacher">取得</button>
  </div>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
"use strict";

const vm = new Vue({
  el : '#app',
  data : {
    teachers : []
  },
  methods : {
    getAllTeacher : function() {
      let self = this;
      axios({
        methods: 'get',
        url: 'http://localhost:8080/ironSchool/teacher'
      })
      .then((resp) => {
        self.teachers = resp.data;
      });
    }
  }
});

好吧開始遇到到麻煩了!
於是你打開你的F12,看到了Console的地方會這樣出現,怎麼都紅紅的,可是也是看不懂他在講啥
F12_console

然後覺得奇怪你又切換到Network的頁籤,看到沒錯阿的確有傳資料進來
F12_network

我可以很放心的跟你講這是CORS。

** CORS **

什麼是CORS
簡單來說,就是你這個頁面的網域名稱,跟API的網域名稱不一樣,如果沒有伺服器沒有加以阻擋,瀏覽器接收到的Response就會含有CORS。
詳細解說在這

至於在伺服器怎麼解我將在寫一篇來做紀錄。在這邊先跳過

在解決完伺服器端的問題,我們就可以來使用啦~~
success


減肥專欄、每日一句 (停刊中)

模特兒真的怎麼穿都帥,肥宅怎麼穿都變態
Pinterest
(Pic From Pinterest)


上一篇
Day18 依然廢文 什麼是MVC
下一篇
Day20 純、手工系列 JS(Vue JQuery篇)
系列文
Go!從無到打造最佳行動網站30

尚未有邦友留言

立即登入留言