為 Vue 配置 GraphQL API

閱讀大約需要 3 分鐘

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

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

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

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

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

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

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

使用 Vue Apollo

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

vue add apollo

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

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

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

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

接下來就是讓前端調(diào)用這個查詢，并展示數(shù)據(jù)了。

前端展示

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

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

<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 數(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,
  }
  ......
}

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

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

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

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

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

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

其實，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 發(fā)過來的請求，Django 都會阻止。

現(xiàn)在讓我們來解決這一問題：

1. 安裝

pip install django-cors-headers

2. 配置 setting.py

• INSTALLED_APPS 內(nèi)添加  "corsheaders",

• MIDDLEWARE 內(nèi)添加 'corsheaders.middleware.CorsMiddleware',

• setting.py 末尾添加 CORS_ORIGIN_ALLOW_ALL = True

3. 運行

python manage.py runserver 

另外，如果 django 輸出：

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

總結(jié)

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

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

關(guān)注「Python七號」并加星標，第一時間收到文章推送，如果你需要技術(shù)支持，請加我微信。

留言

參考資料