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弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript实现2048游戏示例
May 04 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue路由对象属性 .meta $route.matched详解
Nov 04 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使用feof()函数读文件的方法
2014/11/07 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
js自动生成对象的属性示例代码
2013/10/28 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python开发编码规范
2006/09/08 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python删除服务器文件代码示例
2018/02/09 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
门卫班长岗位职责
2013/12/15 职场文书
安全标语口号
2014/06/09 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
nginx内存池源码解析
2021/11/20 Servers