本篇內(nèi)容介紹了“ Vue 配置 GraphQL API的方法”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
成都創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)頁維護|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗,為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù),案例作品覆蓋成都混凝土攪拌罐等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身策劃品質(zhì)網(wǎng)站。
執(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[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)在讓我們來解決這一問題:
安裝
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
運行
python manage.py runserver
另外,如果 django 輸出:
說明可能遇到了 django cors 錯誤,按照上面的方法解決即可。
用了 GraphQL ,前端需要哪一種數(shù)據(jù)格式可以自助實現(xiàn),后端不需要再配合前端來修改接口,前后端分離更加徹底,這樣可以滿足前端頻繁的數(shù)據(jù)格式變化需求,大大提升了開發(fā)效率。今后做接口開發(fā),能用 GraphQL 的,就不用 REST API。
本文代碼地址:https://gitee.com/somenzz/hello-world.git[3]
“ Vue 配置 GraphQL API的方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
新聞名稱:Vue配置GraphQLAPI的方法
文章起源:http://muchs.cn/article8/pidgip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)