vue中使用GraphQL的实例代码


Posted in Javascript onNovember 04, 2019

上篇给大家介绍了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的实例代码 

总结

以上所述是小编给大家介绍的vue中使用GraphQL的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
js实现放大镜特效
May 18 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
织梦模板标记简介
2007/03/11 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python新手学习装饰器
2020/06/04 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
房屋租赁协议书范本
2014/04/10 职场文书
技术合作协议书范本
2014/04/18 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
给客户的感谢信
2015/01/21 职场文书
索赔员岗位职责
2015/02/15 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书