iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 19

【D19 - 用Vue實作網頁】請GET我然後POST我出去吧!

HTTP Request 一直以來都是一個很大的課題,他也牽扯到了API的概念,所以這篇基本上我們就要好好聊聊API是甚麼? Vue 要怎麼用到HTTP request?

前言

其實我必須要跟大家說聲抱歉,我在https://ithelp.ithome.com.tw/articles/10236817 這篇時其實就有用到了HTTP Request的東西:

this.$http
      .get("http://jsonplaceholder.typicode.com/posts")
      .then(function(data) {
        this.blogs = data.body.slice(0, 10);
      });

能使用get, post 就是因為我們有一個plugin 叫做vue-resorce。ㄟ不對啊?我們有裝過嗎? 不相信的話可以打開你的 main.js:

import VueResource from "vue-resource";
Vue.use(VueResource);

答對,我之前有跟各位說到要這樣寫,但是沒有好好介紹這是甚麼XD。在這之前,我們先來了解一下API到底是甚麼?


API

Goolgle 上面說API是要叫做應用程式介面,mmm...甚麼鬼XDXD

API 其實是一個應用程式之間的郵差,舉個例子:
今天假設你是一個金牌特務,當你接收到總部的消息時候就要去出任務了,今天每當總部接受到有壞份子時候就會 --> 傳請求協助的指令給你 --> 然後你收到這個指令之後 --> 出任務

這個例子裏面,傳出請求協助的這個指令就是API,當特務收到總部的需求,就會出任務。而出任務就是你想要的結果。

HTTP

HTTP 是一種 protocol,也就是一種對於要求跟回應的規範、協定。

舉個例子,當我們今天要從client(你的電腦上)點選Google Chrome,接下來他就會傳送一個要求 (要求看到Google Page) 到Google 的server,Google伺服器拿到他這個想看網頁的請求之後,就會回傳Google Home Page (HTML)給我。

在client & Server 這一來一往的發送要求+接受要求的規範,就是我們的HTTP本人啦!!

GET

當我今天發送的請求是要獲得資料,就是一個GET

POST

如果今天我這個請求有包含新增資料,就會是POST


vue-resource

這是一個Vue的HTTP插件,跟很多人會用到的ajax是一樣的,下載的方法非常簡單 (也是要用npm)

// https://github.com/pagekit/vue-resource
npm install vue-resource

然後你要在 src/main.js 裡面去import這個新的dependency

import VueResource from 'vue-resource'
Vue.use(VueResource)

接下來你就可以用到最基本的 GET,POST功能~

// GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });

七大API

vue-resource裡面除了 GET,POST之外,還有其他五個不太常用但也很重要的API methods

  1. get(url, [config])
  2. post(url, [body], [config])
  3. head(url, [config])
  4. delete(url, [config])
  5. jsonp(url, [config])
  6. put(url, [body], [config])
  7. patch(url, [body], [config])

    url: 就是定義Request要送到哪裡~
    body: 就是要傳送出去的data
    config: 一些vue-resource提供的功能

POST 在我們專案的例子

剛剛給了很多GET 例子,我們之前從外部資源拿那些blogs array也是用到GET Request達到的,(可以回去看一下code是不是比較有概念了?)。 那這邊我們可以就來舉一個POST的案例~

我們今天假設要能在部落格裡面發表文章,那我們要把文章發表之後儲存到database資料庫裡面,就會用到POST這個API請求!

 post: function(){
            this.$http.post('https://firebaseio.com/posts.json', this.blog).then(function(data){
                this.submitted = true;
            });
        }
  • url: 就是那串網址,代表他要POST到哪裡 (這邊指向一個firebase)
  • this.blog: 就是你要新增上傳的POST (儲存在data(){blog: }裡面)

後記

今天講到的這個POST,之後會應用在一個page叫做 AddBlog.vue裡面,所以先知道一下甚麼是API, HTTP, POST, GET也好!

最後~ 大家周末愉快
/images/emoticon/emoticon12.gif


上一篇
【D18 - 用Vue實作網頁】做出一個美美的部落格
下一篇
【D20 - 用Vue實作網頁】Vue+Firebase 火力無法擋
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言