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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
使用Vue自定义指令实现Select组件
May 24 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
web方式ftp
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
教师节促销活动方案
2014/02/14 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
让生命充满爱观后感
2015/06/08 职场文书
javascript函数式编程基础
2021/09/15 Javascript