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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 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
php 在文件指定行插入数据的代码
2010/05/08 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python如何读写json数据
2018/03/21 Python
Python单元测试实例详解
2018/05/25 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
详解Python sys.argv使用方法
2019/05/10 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
化工专业推荐信范文
2013/11/28 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
预备党员转正材料
2014/12/19 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP