[[402087]]

接前文為 Django 配備 GraphQL API，Django 提供 GraphQL 接口服務之后，我們需要讓前端來消費這些接口數據，以 Vue 為例，看一看前端如何訪問后端 GraphQL API。本文提供一個跑的通的 demo，可以先收藏，后面如有需要可以直接使用。

先創建一個 Vue 項目

執行下面的命令，就可以創建并啟動一個 Vue 的 hello-world 項目：

vue create hello-world  
cd hello-world 
npm run serve 

默認情況下，服務將監聽 localhost 的 8080 端口，瀏覽器訪問 http://localhost:8080 就會看到 Vue 框架渲染的網頁。

注意第一步執行 vue create hello-world 時我們選擇默認的 Vue2， Vue3 是 2020 年 09 月 18 日發布的，我在使用 Vue3 時后面生成樣例代碼那一步報錯了，這里暫時用 Vue2 吧，讓 Vue3 再飛一會兒。

如果你還沒有用過 Vue，請去官方網站[1]學習一下。

使用 Vue Apollo

Vue Apollo[2] 是一個三方庫，可以讓你在 Vue 的應用中使用 GraphQL，使用起來也很輕松，在上述 hello-world 目錄下，也就是 package.json 同級的目錄下，打開命令窗口執行：

vue add apollo 

這個命令會自動安裝 npm 包：graphql graphql-tag @apollo/client。除此之外會讓你選擇是否生成代碼，是否配置相關的 API，如下圖所示：

這里只選擇生成樣例代碼即可，其他都選否。生成樣例代碼的好處是我們不需要關心配置信息，集中精力放在業務邏輯即可。

生成樣例代碼后，我們先修改配置文件，將 graphql 的接口對接 Django 的 url。也就是修改文件配置文件 vue-apollo.js 的 httpEndpoint， 修改后的 httpEndpoint 如下所示：

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://127.0.0.1:8000/graphql/' 

然后參考 hello-world/graphql 目錄內的其他文件，新建文件 CookbookCategory.gql，內容就是之前 Django 里面的 graphql 的查詢語句，因為需要傳入參數，這里外層做了一下封裝，不要問為啥這樣寫，這是 apollo 規定好了的，我們只需要比葫蘆畫瓢，如下：

query categoryByName($name: String!) { 
  categoryByName(name: $name) { 
    id 
    name 
    ingredients { 
      id 
      name 
    } 
  } 
} 

接下來就是讓前端調用這個查詢，并展示數據了。

前端展示

修改文件：hello-world/src/components/ApolloExample.vue

刪除多余的部分，只保留一個文本框和展示數據的部分，修改后的最終結果如下所示：

<template> 
  <div class="apollo-example"> 
    <!-- Cute tiny form --> 
    <div class="form"> 
      <label for="field-name" class="label">查詢菜譜分類</label> 
      <input 
        v-model="name" 
        placeholder="請輸入菜譜名稱" 
        class="input" 
        id="field-name" 
      > 
    </div> 
 
    <!-- Apollo watched Graphql query --> 
    <ApolloQuery 
      :query="require('../graphql/CookbookCategory.gql')" 
      :variables="{ name }" 
 
    > 
      <template slot-scope="{ result: { loading, error, data } }"> 
        <!-- Loading --> 
        <div v-if="loading" class="loading apollo">Loading...</div> 
 
        <!-- Error --> 
        <div v-else-if="error" class="error apollo">An error occured</div> 
 
        <!-- Result --> 
        <div v-else-if="data" class="result apollo"> 
          <vue-json-pretty :data="data" @click="handleClick"> </vue-json-pretty> 
        </div> 
 
        <!-- No result --> 
        <div v-else class="no-result apollo">No result :(</div> 
      </template> 
    </ApolloQuery> 
 
 
  </div> 
</template> 
 
<script> 
import VueJsonPretty from 'vue-json-pretty'; 
import 'vue-json-pretty/lib/styles.css'; 
export default { 
  components: { 
    VueJsonPretty, 
  }, 
  data () { 
    return { 
      name: 'Dairy', 
      newMessage: '', 
    } 
  }, 
 
  apollo: { 
    files: FILES, 
  }, 
 
  computed: { 
    formValid () { 
      return this.newMessage 
    }, 
  }, 
 
  methods: { 
  }, 
} 
</script> 
 
<style scoped> 
...... 
</style> 

這里為了讓返回的 json 數據格式更加好看，我這里用了插件：vue-json-pretty，只需要使用 npm install vue-json-pretty --save 安裝下，然后像上述代碼那樣導入：

import VueJsonPretty from 'vue-json-pretty'; 
import 'vue-json-pretty/lib/styles.css'; 

然后加入組件：

export default{ 
  components: { 
    VueJsonPretty, 
  } 
  ...... 
} 

接下來就可以在 html 里面以標簽的形式使用了：

<vue-json-pretty :data="data" @click="handleClick"> </vue-json-pretty> 
       </div> 

確保 django 服務已啟動，現在重新執行下 npm run serve，瀏覽器的顯示如下所示：

由于搜索框有默認值 'Dairy' 因此顯示時已經查詢出了 Django 的數據。

改變搜索的菜譜分類名稱，可以看到結果立刻顯示：

到這里，我們已經實現了前端通過 GraphQL API 獲取后端數據的過程。

其實，Vue Apollo 還有很多功能，比如上傳文件。今天的介紹只是拋磚引玉，更多 Vue Apollo 功能請參考文末的官方鏈接。

可能遇到的問題

使用 Django API 最常見的問題就是跨域(CORS)問題，前端的錯誤提示可能是這樣的：

Access to XMLHttpRequest at 'url’' from origin  has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

CORS (Cross-origin resource sharing) 就是跨域資源共享，django 的域是 localhost:8000，而 Vue 的域是 localhost:8080，他們是兩個不同的域，只要不是 localhost:8000 發過來的請求，Django 都會阻止。

現在讓我們來解決這一問題：

安裝

pip install django-cors-headers 

配置 setting.py

• INSTALLED_APPS 內添加 "corsheaders",
• MIDDLEWARE 內添加 'corsheaders.middleware.CorsMiddleware',
• setting.py 末尾添加 CORS_ORIGIN_ALLOW_ALL = True

運行

python manage.py runserver 

另外，如果 django 輸出：

說明可能遇到了 django cors 錯誤，按照上面的方法解決即可。

總結

用了 GraphQL ，前端需要哪一種數據格式可以自助實現，后端不需要再配合前端來修改接口，前后端分離更加徹底，這樣可以滿足前端頻繁的數據格式變化需求，大大提升了開發效率。今后做接口開發，能用 GraphQL 的，就不用 REST API。

本文代碼地址：https://gitee.com/somenzz/hello-world.git[3]

參考資料

[1]官方網站: https://cn.vuejs.org/index.html

[2]Vue Apollo: https://v4.apollo.vuejs.org/

[3]https://gitee.com/somenzz/hello-world.git: https://gitee.com/somenzz/hello-world.git

本文轉載自微信公眾號「Python七號」，可以通過以下二維碼關注。轉載本文請聯系Python七號公眾號。