我使用AWS Amplify和Vue.js构建了一个GraphQL数据注册和获取功能

2 年 ago
新, 韵
4 minutes

本文是关于“AWS Amplify Advent Calendar 2020”的第13篇文章。

我尝试使用AWS Amplify和Vue.js构建了一个GraphQL数据的注册和获取功能。

预先准备好

    • AWS AmplifyとVue.jsのログイン機能までの設定

 

    • 以前書いた記事からの続きで説明します。

 

    AWS AmplifyとVue.jsでログイン機能を構築してみた

后端

首先，我们将构建后端。
在之前的文章中，我们已经添加了认证功能，所以这次我们将使用AppSync来配置GraphQL环境。

只需使用API功能，即可在2个命令中实现！

amplify add api
画像

API制作完成后，可以修改模板以生成用于示例的模式。

以下是一个本地化的中文表达：

../amplify/backend/api/sample：
示例：../加强/后端/API/示例

规范图形语言模式

type Sample @model {
    id: ID!
    name: String!
}

请用中文将以下内容进行翻译，只需要一种版本：

amplify push
画像

当处理完成时，可以确认几乎自动创建了API的配置！

src / graphql 的中文翻译：源代码/图灵机制

变异.js

export const createSample = /* GraphQL */ `
  mutation CreateSample(
    $input: CreateSampleInput!
    $condition: ModelSampleConditionInput
  ) {
    createSample(input: $input, condition: $condition) {
      id
      name
      createdAt
      updatedAt
    }
  }
`;
export const updateSample = /* GraphQL */ `
  mutation UpdateSample(
    $input: UpdateSampleInput!
    $condition: ModelSampleConditionInput
  ) {
    updateSample(input: $input, condition: $condition) {
      id
      name
      createdAt
      updatedAt
    }
  }
`;
export const deleteSample = /* GraphQL */ `
  mutation DeleteSample(
    $input: DeleteSampleInput!
    $condition: ModelSampleConditionInput
  ) {
    deleteSample(input: $input, condition: $condition) {
      id
      name
      createdAt
      updatedAt
    }
  }
`;

src/graphql 的含义是什么？
src/graphql 指的是什么？
src/graphql 是什么意思？
src/graphql 想表达什么？
src/graphql 的定义是什么？

queries.js的查询

export const getSample = /* GraphQL */ `
  query GetSample($id: ID!) {
    getSample(id: $id) {
      id
      name
      createdAt
      updatedAt
    }
  }
`;
export const listSamples = /* GraphQL */ `
  query ListSamples(
    $filter: ModelSampleFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listSamples(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

仅凭这一点，后端的构建就完成了。

前端

接下来，我们将构建前端部分。

运行环境

    • node v12.7.0

npm v6.13.4

整体构成

画像

包描述文件

{
  "name": "amplify_prj",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/cli": "^4.37.1",
    "aws-amplify": "^1.3.3",
    "aws-amplify-vue": "^0.2.17",
    "bootstrap-vue": "^2.0.0-rc.19",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.4.4",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "bootstrap": "^4.3.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "mutationobserver-shim": "^0.3.3",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "portal-vue": "^2.1.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-bootstrap-vue": "^0.4.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

源代码/视图

Home.vue 的原生中文释义为“首页.vue”。

<template>
    <div class='home'>
        <b-container>
            <b-row>
                <b-col sm='12' class='mb-3'>
                    <h3>ログイン済</h3>
                    <hr>
                </b-col>
                <b-col sm='3' class='mx-auto mb-3'>
                    <b-form-input v-model='id' placeholder='id'></b-form-input>
                    <b-form-input v-model='name' placeholder='name'></b-form-input>
                </b-col>
                <b-col sm='12' class='mb-5'>
                    <b-button variant='primary' v-on:click='postData'>登録</b-button>
                </b-col>
                <b-col sm='3' class='mx-auto mb-3'>
                    <b-table striped hover :items='items'></b-table>
                    <b-form-input v-model='text' placeholder='id'></b-form-input>
                </b-col>
                <b-col sm='12' class='mb-5'>
                    <b-button variant='success' v-on:click='getData'>表示</b-button>
                    <hr>
                </b-col>
                <b-col sm='12' class='mb-5'>
                    <!--ログアウトコンポーネント-->
                    <amplify-sign-out></amplify-sign-out>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
    // API機能読み込み
    import { API, graphqlOperation } from 'aws-amplify'
    import { createSample } from '../graphql/mutations'
    import { getSample } from '../graphql/queries'

    export default {
        name: 'home',
        components: {
        },
        data() {
            return {
                id: '',
                name: '',
                text: '',
                items: []
            }
        },
        methods: {
            getData: async function () {
                // データ取得
                await API.graphql(graphqlOperation(getSample, {id: this.text}))
                .then(response => {
                    // テーブル表示
                    this.items = [
                        {
                            id: response.data.getSample.id,
                            name: response.data.getSample.name
                        }
                    ];
                }).catch(error => {
                    // テーブルリセット
                    this.items = [];
                });
            },
            postData: async function () {
                // オプション
                const myInit = {
                    id: Number(this.id),
                    name: String(this.name)
                };
                // データ登録
                await API.graphql(graphqlOperation(createSample, {input: myInit}))
                .then(response => {
                    console.log(response);
                }).catch(error => {
                    console.log(error)
                });
            }
        }
    }
</script>

<style scoped>

</style>

载入Amplify的API功能。

// API機能読み込み
import { API, graphqlOperation } from 'aws-amplify'
import { createSample } from '../graphql/mutations'
import { getSample } from '../graphql/queries'

设定用于获取数据的函数。

getData: async function () {
     // データ取得
    await API.graphql(graphqlOperation(getSample, {id: this.text}))
    .then(response => {
        // テーブル表示
        this.items = [
            {
                id: response.data.getSample.id,
                name: response.data.getSample.name
            }
        ];
    }).catch(error => {
        // テーブルリセット
        this.items = [];
    });
},

我将设置一个函数来进行数据注册。

postData: async function () {
    // オプション
    const myInit = {
        id: Number(this.id),
        name: String(this.name)
    };
    // データ登録
    await API.graphql(graphqlOperation(createSample, {input: myInit}))
    .then(response => {
        console.log(response);
    }).catch(error => {
        console.log(error)
    });
}

我会在简易本地服务器上进行确认。

npm run serve

我将启动本地服务器并尝试登录。现在可以进行数据的注册和获取。

画像

我会在AWS控制台中选择DynamoDB并确认是否已经注册成功。

画像

我在使用AWS Amplify和Vue.js的过程中，成功搭建了GraphQL数据的注册和获取功能。

我使用Amplify在AppSync上构建了一个GraphQL的API并成功地显示出来。虽然还有很多详细的设置需要完成，并且还需要了解Amplify的更多用法，但一旦记住了，就可以轻松地构建数据的注册和获取功能，所以在构建无服务器应用程序时，它非常方便，就像使用Firebase一样。

希望您能够与以前的REST API的文章 “尝试使用AWS Amplify和Vue.js构建数据注册和获取功能” 进行比较。

如果您感兴趣的话，我还有其他关于Vue.js的文章，欢迎阅读。

尝试系列

请用中文将以下内容进行意译，只需要一种选项:

“I am grateful for every opportunity that comes my way.”

book
✖
广告
将在 10 秒后关闭
bannerAds