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 23 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
详解用async/await来处理异步
Aug 28 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
vue模式history下在iis中配置流程
2019/04/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
中药学专业毕业生推荐信
2014/07/10 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
北京青年观后感
2015/06/15 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技