蝙蝠岛资源网 Design By www.hbtsch.com
上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解。这里我们讲讲如何在Vue中使用GraphQL。
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 <template> <div id="app"> <div class="list"> <h1>文章列表</h1> <ul> <li v-for="(v, k) of list" :key="k"> 文章名称: {{ v.title }}----------------({{ v.author.name }}) </li> </ul> </div> <div class="form"> <h1>添加文章</h1> 标题:<input v-model="formData.title" type="text"><br> 作者名称: <input v-model="formData.author.name" type="text"><br> 作者年龄: <input v-model.number="formData.author.age" type="text"><br> 文章内容: <textarea v-model="formData.content" name="" id="" cols="30" rows="10"></textarea> <button @click="createArticle">添加</button> </div> </div> </template> <script> import { getArticleList, createArticle } from './graphql/article' export default { name: 'app', data() { return { list: [], formData: { title: '', content: '', author: { name: '', age: '' } } } }, mounted() { this.initData() }, methods: { initData() { getArticleList({first: 0}) .then(res=>{ console.log('request success') console.log(res.data.articleList.length) this.list = res.data.articleList }) .catch(err=>{ console.log(err) }) }, createArticle() { createArticle(this.formData) .then(()=>{ this.initData() }) .catch(err=>{ console.log(err) }) } } } </script>
效果如下:
总结
以上所述是小编给大家介绍的vue中使用GraphQL的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无vue中使用GraphQL的实例代码的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]