[[402087]]

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

先創(chuàng)建一個(gè) Vue 項(xiàng)目

執(zhí)行下面的命令，就可以創(chuàng)建并啟動(dòng)一個(gè) Vue 的 hello-world 項(xiàng)目：

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

默認(rèn)情況下，服務(wù)將監(jiān)聽(tīng) localhost 的 8080 端口，瀏覽器訪問(wèn) http://localhost:8080 就會(huì)看到 Vue 框架渲染的網(wǎng)頁(yè)。

注意第一步執(zhí)行 vue create hello-world 時(shí)我們選擇默認(rèn)的 Vue2， Vue3 是 2020 年 09 月 18 日發(fā)布的，我在使用 Vue3 時(shí)后面生成樣例代碼那一步報(bào)錯(cuò)了，這里暫時(shí)用 Vue2 吧，讓 Vue3 再飛一會(huì)兒。

如果你還沒(méi)有用過(guò) Vue，請(qǐng)去官方網(wǎng)站[1]學(xué)習(xí)一下。

使用 Vue Apollo

Vue Apollo[2] 是一個(gè)三方庫(kù)，可以讓你在 Vue 的應(yīng)用中使用 GraphQL，使用起來(lái)也很輕松，在上述 hello-world 目錄下，也就是 package.json 同級(jí)的目錄下，打開(kāi)命令窗口執(zhí)行：

vue add apollo 

這個(gè)命令會(huì)自動(dòng)安裝 npm 包：graphql graphql-tag @apollo/client。除此之外會(huì)讓你選擇是否生成代碼，是否配置相關(guān)的 API，如下圖所示：

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

生成樣例代碼后，我們先修改配置文件，將 graphql 的接口對(duì)接 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 目錄內(nèi)的其他文件，新建文件 CookbookCategory.gql，內(nèi)容就是之前 Django 里面的 graphql 的查詢(xún)語(yǔ)句，因?yàn)樾枰獋魅雲(yún)?shù)，這里外層做了一下封裝，不要問(wèn)為啥這樣寫(xiě)，這是 apollo 規(guī)定好了的，我們只需要比葫蘆畫(huà)瓢，如下：

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

接下來(lái)就是讓前端調(diào)用這個(gè)查詢(xún)，并展示數(shù)據(jù)了。

前端展示

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

刪除多余的部分，只保留一個(gè)文本框和展示數(shù)據(jù)的部分，修改后的最終結(jié)果如下所示：

<template> 
  <div class="apollo-example"> 
    <!-- Cute tiny form --> 
    <div class="form"> 
      <label for="field-name" class="label">查詢(xún)菜譜分類(lèi)</label> 
      <input 
        v-model="name" 
        placeholder="請(qǐng)輸入菜譜名稱(chēng)" 
        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 數(shù)據(jù)格式更加好看，我這里用了插件：vue-json-pretty，只需要使用 npm install vue-json-pretty --save 安裝下，然后像上述代碼那樣導(dǎo)入：

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

然后加入組件：

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

接下來(lái)就可以在 html 里面以標(biāo)簽的形式使用了：

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

確保 django 服務(wù)已啟動(dòng)，現(xiàn)在重新執(zhí)行下 npm run serve，瀏覽器的顯示如下所示：

由于搜索框有默認(rèn)值 'Dairy' 因此顯示時(shí)已經(jīng)查詢(xún)出了 Django 的數(shù)據(jù)。

改變搜索的菜譜分類(lèi)名稱(chēng)，可以看到結(jié)果立刻顯示：

到這里，我們已經(jīng)實(shí)現(xiàn)了前端通過(guò) GraphQL API 獲取后端數(shù)據(jù)的過(guò)程。

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

可能遇到的問(wèn)題

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

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，他們是兩個(gè)不同的域，只要不是 localhost:8000 發(fā)過(guò)來(lái)的請(qǐng)求，Django 都會(huì)阻止。

現(xiàn)在讓我們來(lái)解決這一問(wèn)題：

安裝

pip install django-cors-headers 

配置 setting.py

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

運(yùn)行

python manage.py runserver 

另外，如果 django 輸出：

說(shuō)明可能遇到了 django cors 錯(cuò)誤，按照上面的方法解決即可。

總結(jié)

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

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

參考資料

[1]官方網(wǎng)站: 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

本文轉(zhuǎn)載自微信公眾號(hào)「Python七號(hào)」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系Python七號(hào)公眾號(hào)。