我想在Vue.js中充分利用AWS Amplify！（API篇）

1 年 ago
逸, 科
5 minutes

首先

以下是之前所写文章的续篇。

在Amplify中，您可以使用GraphQL来添加API。

GraphQL是一种查询语言。

使用GraphQL与传统的RESTful API设计不同，可以准确无误地获取所需数据。与JSON的交互非常接近，并且非常直观。

在 Amplify 中，当在 GraphQL 中定义数据结构时，相应地制定了数据的结构。

在 Amplify 中，当使用 GraphQL 定义数据结构时，随之定义了数据的结构。

在 Amplify 中，当使用 GraphQL 对数据进行结构定义时，相应的定义了数据结构。

在 Amplify 中，当使用 GraphQL 定义数据结构时，随之而来的是数据的结构。

    • データの追加

 

    • データの更新

 

    • データの取得

 

    データの削除

它可以自动创建执行函数。非常方便。

安装设定

在终端上执行以下命令。

$ amplify add api

按照指示进行设置。

スクリーンショット 2020-01-28 23.15.42.png

我們將設定授權類型。這次我們選擇了Amazon Cognito用戶池。

各种方式的特点都被总结在这里。

type Todo @model {
  id: ID!
  name: String!
  description: String
}

这次，我们将直接使用标准的待办事项。
在有感叹号标记的情况下，表示不允许为空。也就是说，它是必需项。

接下来，我们将远程创建GraphQL的表格。

amplify push

✔ Successfully pulled backend environment develop from the cloud.

Current Environment: develop

| Category | Resource name         | Operation | Provider plugin   |
| -------- | --------------------- | --------- | ----------------- |
| Api      | amplifysample         | Create    | awscloudformation |
| Auth     | amplifysample******** | No Change | awscloudformation |

看起来准备工作已经完成了。我们将保持其他项目的默认设置并继续进行。

云端更新可能需要一些时间，请耐心等待。

当创建完成后，会显示GraphQL的端点，请记下来。

GraphQL endpoint: https://*******.appsync-api.us-east-1.amazonaws.com/graphql

这个以”https://”开头的URL是GraphQL操作的起点，记下来吧。

接下来，将自动生成用于操作GraphQL的函数。让我们立即进行确认。

让我们来看一下 src/graphql。
让我们瞧瞧 src/graphql。
我们来看看 src/graphql。

首先，我们先检查mutation.js文件。

/* eslint-disable */
// this is an auto generated file. This will be overwritten

export const createTodo = `mutation CreateTodo(
  $input: CreateTodoInput!
  $condition: ModelTodoConditionInput
) {
  createTodo(input: $input, condition: $condition) {
    id
    name
    description
  }
}
`;
export const updateTodo = `mutation UpdateTodo(
  $input: UpdateTodoInput!
  $condition: ModelTodoConditionInput
) {
  updateTodo(input: $input, condition: $condition) {
    id
    name
    description
  }
}
`;
export const deleteTodo = `mutation DeleteTodo(
  $input: DeleteTodoInput!
  $condition: ModelTodoConditionInput
) {
  deleteTodo(input: $input, condition: $condition) {
    id
    name
    description
  }
}
`;

在普通数据库中，突变（Mutation）指的是CREATE，UPDATE，DELETE操作。在GraphQL中，可变更数据的操作被称为Mutation。

接下来，让我们检查一下queries.js文件。


/* eslint-disable */
// this is an auto generated file. This will be overwritten

export const getTodo = `query GetTodo($id: ID!) {
  getTodo(id: $id) {
    id
    name
    description
  }
}
`;
export const listTodos = `query ListTodos(
  $filter: ModelTodoFilterInput
  $limit: Int
  $nextToken: String
) {
  listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      name
      description
    }
    nextToken
  }
}
`;

getTodo是用于获取特定的Todo，而listTodos是以列表形式获取所有存在的Todo。

此外，我们会继续确认subscription.js文件。

/* eslint-disable */
// this is an auto generated file. This will be overwritten

export const onCreateTodo = `subscription OnCreateTodo {
  onCreateTodo {
    id
    name
    description
  }
}
`;
export const onUpdateTodo = `subscription OnUpdateTodo {
  onUpdateTodo {
    id
    name
    description
  }
}
`;
export const onDeleteTodo = `subscription OnDeleteTodo {
  onDeleteTodo {
    id
    name
    description
  }
}
`;

通过使用AppSync，您可以监视数据的变化。当添加新的待办事项或者修改/删除现有待办事项时，可以立即更新数据。

Vue编辑

为了实际能够添加Todo，我们将编辑Vue文件。
首先，我们将编辑views/Home.vue文件。


<template>
  <div class="home">
      <new-todo></new-todo>
      <amplify-connect :query="listTodosQuery"
          :subscription="createTodoSubscription"
          :onSubscriptionMsg="onCreateTodo">
        <template slot-scope="{loading, data, errors}">
          <div v-if="loading">Loading...</div>

          <div v-else-if="errors.length > 0"></div>

          <div v-else-if="data">
            <TodoList :items="data.listTodos.items"></TodoList>
          </div>
        </template>
      </amplify-connect>
  </div>
</template>

<script>
import { components } from 'aws-amplify-vue';
import TodoList from '@/components/TodoList.vue';
import NewTodo from '@/components/NewTodo.vue';

const ListTodosQuery = `query ListTodos {
    listTodos {
      items {
        id
        name
      }
    }
  }`;

  const OnCreateTodoSubscription = `subscription OnCreateTodo {
      onCreateTodo {
        id
        name
      }
    }`;

export default {
  name: 'home',
  components: {
    NewTodo,
    TodoList,
    ...components
  },
  computed: {
    listTodosQuery() {
      return this.$Amplify.graphqlOperation(ListTodosQuery);
    },
    createTodoSubscription() {
      return this.$Amplify.graphqlOperation(OnCreateTodoSubscription);
    }
  },
  methods: {
    onCreateTodo(prevData, newData) {
      console.log('New todo from subscription...');
      const newTodo = newData.onCreateTodo;
      prevData.data.listTodos.items.push(newTodo);
      return prevData.data;
    }
  }
}
</script>

接下来，我们将添加components/NewTodo.vue文件。

<template>
  <div>
    <amplify-connect :mutation="createTodoMutation" @done="onCreateFinished">
      <template slot-scope="{ loading, mutate, }">
        <input v-model="name" placeholder="item name" />
        <input v-model="description" placeholder="item description" />
        <button :disabled="loading" @click="mutate">Create Todo</button>
      </template>
    </amplify-connect>
  </div>
</template>

<script>
import { components } from 'aws-amplify-vue';

const CreateTodoMutation = `mutation CreateTodo($name: String!, $description: String) {
    createTodo(input: { name: $name, description: $description }) {
      id
      name
    }
  }`;

export default {
  name: 'NewTodo',
  components: {
    ...components
  },
  data () {
    return {
      name: '',
      description: ''
    }
  },
  computed: {
    createTodoMutation () {
      return this.$Amplify.graphqlOperation(CreateTodoMutation,
        { name: this.name, description: this.description });
    }
  },
  methods: {
    onCreateFinished () {
      console.log('Todo created!');
    }
  }
}
</script>

此外，我们将继续编辑 components/TodoList.vue。

<template>
  <div>
    <ul v-for="item in items" :key="item.id">
      <li>
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['items'],
}
</script>

讲解

您可以从这里查看amplify-connect组件的实现。
可以看到它加载并执行了查询。

执行

スクリーンショット 2020-01-29 18.20.03.png

数据结构

スクリーンショット 2020-01-29 18.26.15.png

这个表中存储着固有的ID、类型名称、创建时间、各个参数和更新时间。由于ID是分区键，所以可以使用ID在O(1)的时间复杂度内获取数据。

指令

我們將開始創建更複雜的架構。

@关键指令

添加@key指示，可以通过指定的属性进行搜索。
本次将使用电子邮件地址的唯一性添加用户。
首先要修改schema.graphql。

type Todo @model {
  id: ID!
  name: String!
  description: String
}

type User @model @key(fields: ["email"]) {
  email: String!
  username: String!
}

只是在本地更改模式是无法实际使用的。

$ amplify push

重新执行，以更新本地模式。

接下来，创建一个用于更新用户数据的组件。

<template>
  <div>
    <amplify-connect :mutation="createUserMutation" @done="onCreateFinished">
      <template slot-scope="{ loading, mutate, }">
        <input v-model="email" placeholder="email" />
        <input v-model="username" placeholder="username" />
        <button :disabled="loading" @click="mutate">Create User</button>
      </template>
    </amplify-connect>
  </div>
</template>

<script>
import { components } from 'aws-amplify-vue';

const CreateUserMutation = `mutation CreateUser($email: String!, $username: String!) {
    createUser(input: { email: $email, username: $username }) {
      email
      username
    }
  }`;

export default {
  name: 'NewUser',
  components: {
    ...components
  },
  data () {
    return {
      email: '',
      username: ''
    }
  },
  computed: {
    createUserMutation () {
      return this.$Amplify.graphqlOperation(CreateUserMutation,
        { email: this.email, username: this.username });
    }
  },
  methods: {
    onCreateFinished () {
      console.log('User created!');
    }
  }
}
</script>

下面，我們將使用電子郵件地址來創建一個查詢使用者名稱的函數。

async getUser(){
      const userInfo = await API.graphql(graphqlOperation(queries.getUser, { email: this.email }))
      console.log(userInfo)
    }

当实际执行时，

{data: {…}}data: getUser: {email: "test@example.com", username: "John Doe"}__proto__: Object__proto__: Object

您可以正确地查看刚刚添加的数据！

在AppSync中执行GraphQL查询。

让我们再次查看在本次回合中在NewUser.vue文件中创建的mutation。

mutation CreateUser($email: String!, $username: String!) {
    createUser(input: { email: $email, username: $username }) {
      email
      username
    }
  }

在CreateUser函数（外部）中，定义了变量$email和$username，并在其中执行createUser（内部）函数。

スクリーンショット 2020-03-01 16.37.35.png
パラメータ入力内容ClientIdaws-exports.jsのaws_user_pools_web_client_idユーザー名ログインできる有効なユーザのメールアドレスパスワードログインできる有効なユーザのパスワード

接下来，让我们亲自执行变异。
之前我们使用`$`符号来表示变量，比如`$email`，但这一次我们将直接输入执行。

mutation CreateUser {
    createUser(input: { email: "test2@example.com" username: "Jane Doe"}) {
      email
      username
    }
  }
スクリーンショット 2020-03-01 17.03.02.png
スクリーンショット 2020-03-01 17.02.41.png

如果得到好评的话，下次会有续集。

✖
广告
将在 10 秒后关闭
bannerAds