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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
canvas 实现中国象棋
Feb 17 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python实现三维拟合的方法
2018/12/29 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
浅析NumPy 切片和索引
2020/09/02 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
就业协议书的作用
2014/04/11 职场文书
班主任对学生的评语
2014/04/26 职场文书
关于安全的演讲稿
2014/05/09 职场文书
婚礼秀策划方案
2014/05/19 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
网络营销计划
2015/01/17 职场文书
保研导师推荐信
2015/03/25 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2016年国陪研修感言
2015/11/18 职场文书
靠谱准确的求职信
2019/04/02 职场文书
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python