本篇内容介绍了“ Vue 配置 GraphQL API的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
执行下面的命令,就可以创建并启动一个 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[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]
“ Vue 配置 GraphQL API的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。