大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解。这里我们讲讲如何在Vue中使用GraphQL。
创新互联长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为舞钢企业提供专业的成都网站建设、做网站,舞钢网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
1. 初始化vue项目
npm install -g @vue/cli vue create vue-apollo-demo
选择默认cli的默认模板就可以了
添加 /src/graphql/article.js 、 /src/utils/graphql.js 两个文件。
├── node_modules └── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── home.js │ ├── components │ │ └── HelloWorld.js │ ├── graphql │ │ ├── article.js │ ├── utils │ │ ├── graphql.js │ ├── App.vue │ └── main.js ├── package.json └── package-lock.json
2. 安装Apollo客户端
vue-apollo 可以帮助你在应用中使用GraphQL的一套工具。
你可以使用Apollo Boost或 直接使用 Apollo Client(需要更多配置工作)。
name这里用 Apollo Boost 就可以了,如果你想要更细粒度的控制,可以去看 Vue Apollo 的文档。
Apollo Boost 是一种零配置开始使用 Apollo Client 的方式。它包含一些实用的默认值,例如我们推荐的 InMemoryCache 和 HttpLink ,它非常适合用于快速启动开发。
将它与 vue-apollo 和 graphql 一起安装:
npm install --save vue-apollo graphql apollo-boost
3. 创建ApolloClient实例
在你的应用中创建一个 ApolloClient 实例:
/src/utils/graphql.js import ApolloClient from 'apollo-boost'; const apolloClient = new ApolloClient({ // 你需要在这里使用绝对路径 uri: 'http://127.0.0.1:7001/graphql' }) export default apolloClient;
4. 添加GraphQL的操作实例
/src/utils/article.js import gql from 'graphql-tag' import apolloClient from '../utils/graphql' export function getArticleList(params) { return apolloClient.query({ query: gql`query ($first: ID) { articleList(first: $first){ id title content author { name age } } }`, variables: params }) } export function createArticle(params) { return apolloClient.mutate({ mutation: gql`mutation ($title: String, $content: String, $author: AddAuthor) { addArticle(title: $title, content: $content, author: $author){ id title content author { age name } } }`, variables: params }) }
5. 调试
/src/App.vue文章列表
- 文章名称: {{ v.title }}----------------({{ v.author.name }})
添加文章
标题:
作者名称:
作者年龄:
文章内容:
效果如下:
总结
以上所述是小编给大家介绍的vue中使用GraphQL的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!