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对接后台接口基本流程

1. 安装相关依赖包：npm install --save vue-apollo graphql apollo-boost
2. 配置Vue的apollo插件

import Vue from 'vue'
import VueApollo from 'vue-apollo'
Vue.use(VueApollo)

3. 实例化apollo客户端对象

import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/graphql'
})
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

4. 将apollo客户端实例对象挂载到Vue实例中

new Vue({
  apolloProvider,
  render: h => h(App),
}).$mount('#app')

5. 导入GraphQL相关api：import gql from ‘graphql-tag’;
6. 调用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}]
})