Baas接口标准(四)-留言板案例——实现服务端之数据查询、数据变更 & vue-apollovue实现客户端之整合apollo调用接口基本步骤、查询数据并模板填充、添加留言信息、格式化时间
第5章 留言板案例实战
项目业务分析与展示
- 留言列表展示效果
- 项目业务分析
服务端实现
- 初始化项目
- 类型定义
- 数据解析
- 留言板信息
- 友情链接信息
- 天气预报信息
- 添加留言功能
# 核心类型定义 type Data { weather: Weather link: [FriendlyLink] list: [Comment] } type Query { info: Data } type Mutation { createComment(input: CommentInput): Comment } 对接数据源
- 对接评论信息数据源
- 对接友情链接数据源
- 对接天气数据源
- 实现数据源整合，完成响应数据的resolver函数功能
info: async (parent, args, context) => { // 调用数据源对象获取数据 return { list: list, link: link, weather: weather } } 客户端实现
- 初始化项目
- 实现布局效果
- 对接后台GraphQL接口（基于apollo-server客户端）
apollo-server对接后台接口基本流程
- 安装相关依赖包：npm install --save vue-apollo graphql apollo-boost
- 配置Vue的apollo插件
import Vue from 'vue' import VueApollo from 'vue-apollo' Vue.use(VueApollo) - 实例化apollo客户端对象
import ApolloClient from 'apollo-boost' const apolloClient = new ApolloClient({ uri: 'http://localhost:4000/graphql' }) const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) - 将apollo客户端实例对象挂载到Vue实例中
new Vue({ apolloProvider, render: h => h(App), }).$mount('#app') - 导入GraphQL相关api：import gql from ‘graphql-tag’;
- 调用GraphQL后台接口
// vue参数中配置查询逻辑 apollo: { info: { query: gql` query list { info { list { username content date } } } ` } }, data () { return { info: [] } } 完成页面数据展示
- 留言板信息
- 友情链接信息
- 天气信息
完成发送留言功能
- 表单数据绑定
- 发送按钮事件绑定
- 调用后台接口发送数据
this.$apollo.mutate({ mutation: gql` mutation createComment($commentInput: CommentInput) { createComment(commentInput: $commentInput) { username content } } `, variables: { commentInput: { username: username, content: content } }, refetchQueries:[{query: QueryListTag}] }) 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10727.html