vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
vue接收网络请求数据类型配置
vue中对接Graphql接口的实现示例说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点,可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的
一、对原来的Express返回Graphql项目修改本章节使用的代码是express返回Graphql的代码,在使用前要先对代码进行基本的配置,比如处理跨域问题(Graphql本质也是发送一个http请求,既然是这样在vue项目中自然存在跨域的问题,需要先处理)
1、安装跨域的包,并且配置中间件
npm install cors
const cors = require('cors'); // 处理跨域请求 app.use(cors());
2、配置获取请求体的中间件
// 处理请求 app.use(express.json());//express.json=bodyParser.json app.use(express.urlencoded({ extended: true }));
1、参考文档地址
2、安装依赖包
npm install --save vue-apollo graphql apollo-boost graphql-tag
3、在 src/main.js中引入 apollo-boost模块并实例化 ApolloClient
import ApolloClient from 'apollo-boost' ... const apolloClient = new ApolloClient({ // 你需要在这里使用绝对路径,这里就不区分环境开发了 uri: 'http://localhost:8000/graphql', }); ...
4、在 src/main.js 配置 vue-apollo 插件
import VueApollo from 'vue-apollo' Vue.use(VueApollo);
5、创建Apollo provider提供者,并且挂载到应用中
import Vue from 'vue' import App from './App.vue' import ApolloClient from 'apollo-boost' import VueApollo from 'vue-apollo' Vue.use(VueApollo); Vue.config.productionTip = false const apolloClient = new ApolloClient({ // 你需要在这里使用绝对路径 uri: 'http://localhost:8000/graphql', }); const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) new Vue({ render: h => h(App), // 挂载到应用 apolloProvider, }).$mount('#app')
1、使用apollo页面进来就查询数据
根据官方的介绍,只用将apolloProvider挂载到了vue中,在vue的钩子函数中就会多一个属性apollo
<template> <li class="about"> {{accountList}} </li> </template>
import gql from 'graphql-tag'; export default { name: 'About', apollo: { accountList: gql`query { accountList { id username password } }` }, }
2、apollo中使用函数来调用
import gql from 'graphql-tag'; export default { apollo: { accountList () { return { query: gql`query { accountList{ id username password created_at } }`, } }, } }
3、点击按钮获取数据
import gql from 'graphql-tag'; // 定义查询的schema const accountListGql = gql`{ accountList { id username password } }`; export default { data() { return { tableList: [], } }, methods: { getTableData() { this.$apollo.addSmartQuery('accountList', { query: accountListGql, result(response) { console.log(response); const {accountList} = response.data; this.tableList = accountList; }, error(error) { console.log('请求失败', error); } }) } } }
上面的方式也可以换成下面的写法,如果请求的业务不复杂可以这样写,如果复杂就根据上面的方式单独抽取一个schema
... getTableData() { this.$apollo.addSmartQuery('accountList', { query: gql`{ accountList{ id username password } }`, result(response) { console.log(response); const {accountList} = response.data; this.tableList = accountList; }, error(error) { console.log('请求失败', error); } }) } ...
4、传递参数的方式请求数据
handleClick (rowData) { this.$apollo.addSmartQuery('account', { query: gql` query($id: ID!) { account(id: $id) { id username password } } `, variables: { id: rowData.id, }, result (response) { console.log('查询单条数据', response.data); } }) }
1、以上的方法可以查询数据,但是不能重复点击按钮,否则就会出现错误
2、改进版查询数据,直接使用query方法来查询
getTableData () { this.$apollo.query({ query: gql`{ accountList{ id username password } }`, }).then(response => { console.log(response); const { accountList } = response.data; this.tableList =accountList; }) }
具体实现代码见下面
onSubmit () { this.$refs.form.validate(async (valid) => { if (valid) { console.log(this.form); const result = await this.$apollo.mutate({ mutation: gql` mutation addAccount($username: String!, $password: String!) { addAccount(username:$username,password: $password) } `, variables: { username: this.form.username, password: this.form.password, } }); console.log('更新结果', result); } else { // this.$message.error('请添加数据') return false; } }) }
1、打开浏览器控制台点击请求Graphql接口的时候你会发现有下面三个参数
2、如果同一个数据或者说variables的值没变动的时候,是不会向后端发起请求的
3、opertionName是什么呢,我相信很多人会有疑问,看到下面两个图,我相信大家就不会疑惑了
这个操作名称就是在你使用query或者mutation的时候的名字,这个命名可以随意命名,一般建议和后端的API操作名保持一致。
这个操作名有什么用呢?我们观察Graphql发送的请求都是同一个url地址,我们在传统的Restful API的时候,我们做登录鉴权或者获取url的时候会就需要获取当前请求的地址,对于Graphql来说,这个操作名也类似这个功能,区分是哪个API来请求的。
在传统的Restful api请求的时候,我们更倾向于在项目中创建一个services的文件夹来将api请求都放到一起,便于管理,很少将请求都写到vue页面中去的。在graphql中也可以如此操作,只是方式不一样。
1、在项目中创建一个graphql的文件夹,里面存放的类似Restful api的接口请求
2、在src/graphql/accountList.graphql创建关于查询的接口
query AccountList { accountList { id username password } }
3、在vue中引入
import AccountList from './../graphql/accountList.graphql'; ... methods: { async initTableData () { this.tableList = []; this.loading = true; const { data, loading } = await this.$apollo.query({ query: AccountList, }); console.log(data, '请求返回数据'); this.loading = loading; this.tableList = data.accountList; }, } ...
4、不出意外的话会直接报错,因为vue不能直接识别graphql文件,我们需要使用webpack配置对应加载graphql的loader
5、在项目根目录下创建一个vue.config.js配置loader
module.exports = { configureWebpack: (config) => { config.module.rules.push({ test: /\.(graphql|gql)$/, exclude: /node_modules/, loader: 'graphql-tag/loader' }) }, };
6、处理数据不刷新
上面每次新增数据、删除数据、修改数据,虽然我们调用了initTableData,但是Graphql,并没有到后端,这是因为缓存的问题,需要在查询的时候添加红框圈住的字段就可以做到没次调用的时候,重新更新数据
fetchPolicy: "no-cache",
7、本章节整体的效果图
8、本小节的代码代码下载地址
到此这篇关于vue中对接Graphql接口的实现示例的文章就介绍到这了,更多相关vue对接Graphql接口 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue编程加入购物车(vuex实现简单的购物车功能)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
- 每天1万吨牛奶倒进下水道,美国大萧条一幕重现(每天1万吨牛奶倒进下水道)
热门推荐
- sqlservercount函数怎么用(Sql Server中Substring函数的用法实例解析)
- 修改svn服务器地址
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- TransactionScope的使用
- iis部署后浏览没有主界面(IIS 浏览aspx页面出现无法显示XML页的解决方法分享)
- python变量指向讲解(详解python中init方法和随机数方法)
- css快速开发(纯 CSS 撸一个漂亮的加载)
- python判断对象是否是某一类型(Python判断对象是否相等及eq函数的讲解)
- mysql binlog如何查看(MySQL binlog_ignore_db 参数的具体使用)
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)