日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
我們一起為Vue配置GraphQLAPI

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

成都創(chuàng)新互聯(lián)公司是專業(yè)的潯陽網(wǎng)站建設公司，潯陽接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行潯陽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

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

 
 
 
 
    
  
  
  
  
  1. vue create hello-world  
    2.   
  
  
  
  2. cd hello-world 
    3.   
  
  
  
  3. npm run serve 
    4.

默認情況下，服務將監(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]學習一下。

使用 Vue Apollo

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

 
 
 
 
    
  
  
  
  
  1. vue add apollo 
    2.

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. query categoryByName($name: String!) { 
    2.   
  
  
  
  2.   categoryByName(name: $name) { 
    3.   
  
  
  
  3.     id 
    4.   
  
  
  
  4.     name 
    5.   
  
  
  
  5.     ingredients { 
    6.   
  
  
  
  6.       id 
    7.   
  
  
  
  7.       name 
    8.   
  
  
  
  8.     } 
    9.   
  
  
  
  9.   } 
    10.   
  
  
  
  10. } 
    11.

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

前端展示

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.   
 
  •  
  •  
  •  
  •  
  •  
  • ...... 
  •  

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

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

    然后加入組件：

     
 
 
 
      
  
  
  
  
    1. export default{ 
      2.   
  
  
  
    2.   components: { 
      3.   
  
  
  
    3.     VueJsonPretty, 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   ...... 
      6.   
  
  
  
    6. } 
      7.

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

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.        
     

    確保 django 服務已啟動，現(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)問題，前端的錯誤提示可能是這樣的：

     
 
 
 
      
  
  
  
  
    1. 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. 
      2.

    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

    運行

     
 
 
 
      
  
  
  
  
    1. python manage.py runserver 
      2.

    另外，如果 django 輸出：

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

    總結(jié)

    用了 GraphQL ，前端需要哪一種數(shù)據(jù)格式可以自助實現(xiàn)，后端不需要再配合前端來修改接口，前后端分離更加徹底，這樣可以滿足前端頻繁的數(shù)據(jù)格式變化需求，大大提升了開發(fā)效率。今后做接口開發(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)載自微信公眾號「Python七號」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系Python七號公眾號。


    名稱欄目：我們一起為Vue配置GraphQLAPI
    文章轉(zhuǎn)載：http://www.5511xx.com/article/cddpiod.html