让我们一起为Vue配置GraphQLAPI

时间：2023-03-19 15:18:36 科技观察

......接上一篇文章，我们将用GraphQLAPI配置Django。Django提供GraphQL接口服务后，我们需要让前端消费这些接口数据。以Vue为例，看看前端是如何访问后端GraphQLAPI的。本文提供了一个工作demo，可以先保存，以后有需要可以直接使用。首先创建一个Vue项目，执行以下命令创建并启动一个Vuehello-world项目：vuecreatehello-worldcdhello-worldnpmrunserve默认服务会监听localhost的8080端口，浏览器会访问http://localhost：8080你会看到Vue框架渲染的网页。注意，第一步执行vuecreatehello-world时，我们选择默认的Vue2。Vue3发布于2020年9月18日，我在使用Vue3时，后面生成示例代码的步骤报错。我们暂时使用Vue2。让Vue3飞一会儿吧。如果你没有用过Vue，请到官网[1]学习。使用VueApolloVueApollo[2]是一个三方库，允许您在Vue应用程序中使用GraphQL，并且非常易于使用。在上面和package.json同级的hello-world目录下，打开命令窗口执行：vueaddapollo这个命令会自动安装npm包：graphqlgraphql-tag@apollo/client。另外会询问是否生成代码，是否配置相关API，如下图：这里只能选择生成示例代码，其他选择否。生成示例代码的好处是我们不需要关心配置信息，可以专注于业务逻辑。生成示例代码后，我们首先修改配置文件，将graphql接口连接到Djangourl。即修改文件配置文件vue-apollo.js的httpEndpoint，修改后的httpEndpoint如下：consthttpEndpoint=process.env.VUE_APP_GRAPHQL_HTTP||'http://127.0.0.1:8000/graphql/'然后参考到hello-world/graphql目录下的其他文件，新建一个文件CookbookCategory.gql，内容是之前Django中的graphql查询语句，因为需要传入参数，这里封装了外层，不要请问为什么要这样写，这是apollo的规定嘛，我们只需要比较葫芦，如下：querycategoryByName($name:String!){categoryByName(name:$name){idnameingredients{idname}}}的下一步是让前端调用这个查询并显示数据。前端显示修改文件：hello-world/src/components/ApolloExample.vue删除多余部分，只保留一个文本框和显示数据部分，修改后的最终结果如下：

......这里为了让返回的json数据格式更漂亮，我这里使用了一个插件：vue-json-pretty，使用npminstall即可vue-json-pretty--save安装好，然后像上面的代码导入：importVueJsonPrettyfrom'vue-json-pretty';import'vue-json-pretty/lib/styles.css';然后添加组件：exportdefault{components:{VueJsonPretty,}......}接下来在html中可以作为标签使用：

确保django服务已经启动，现在重新执行运行npmrunserve，浏览器显示如下：由于搜索框默认值为'Dairy'，显示时已经查询到Django数据。将搜索到的菜谱类别名称更改一下，可以看到结果马上显示出来了：到这里，我们就实现了前端通过GraphQLAPI获取后端数据的过程。其实VueApollo有很多功能，比如上传文件。今天的介绍只是一个开始。更多VueApollo功能请参考文末官方链接。可能出现的问题使用DjangoAPI时最常见的问题是跨源(CORS)问题。前端报错信息可能是这样的：AccesstoXMLHttpRequestat'url''fromoriginhasbeenblockedbyCORSpolicy:No'Access-Control-Allow-Origin'headerispresentontherequestedresource。CORS（Cross-originresourcesharing）即跨域资源共享。Django的域是localhost:8000，Vue的域是localhost:8080。它们是两个不同的域。只要请求不是从localhost:8000发送的，Django就会阻止它。.下面我们来解决这个问题：安装pipinstalldjango-cors-headers配置，在setting.py中的INSTALLED_APPS中添加“corsheaders”，在MIDDLEWARE中添加'corsheaders.middleware.CorsMiddleware'，在setting.py末尾添加CORS_ORIGIN_ALLOW_ALL=True并运行pythonmanage.pyrunserver，如果django输出：说明你可能遇到了djangocors错误，可以按照上面的方法解决。综上所述，有了GraphQL，前端需要什么数据格式都可以自己实现，后端不需要配合前端修改接口，前后端分离前端更彻底，可以满足前端频繁的数据格式变化需求，大大提高开发效率。以后的界面开发，如果能用GraphQL，就不需要RESTAPI了。本文代码地址：https://gitee.com/somenzz/hello-world.git[3]参考资料[1]官网：https://cn.vuejs.org/index.html[2]VueApollo:https://v4.apollo.vuejs.org/[3]https://gitee.com/somenzz/hello-world.git:https://gitee.com/somenzz/hello-world.git这篇文章是转载自微信公众号《蟒蛇7号》，可通过以下二维码关注。转载本文请联系Python七号公众号。