서버리스 웹 앱에 메일 양식 추가 구현 ~ 프런트 엔드 편 ~

소개

AWS를 활용한 서버리스 웹 앱 제작로 만든 웹 앱에 메일 양식을 추가 구현합니다.
프런트 엔드 백엔드의 2부 구성으로 하고 있습니다.
백엔드편은 이쪽.
서버리스 웹 앱에 메일 양식 추가 구현 ~ 백엔드편 ~

프런트 엔드

Vue.js 웹 앱에 메일 양식용 페이지를 추가합니다.

VeeValidate 사용

메일 폼의 각 입력값 체크를 위해서, VeeValidate라고 하는 것을 이용했습니다.
VeeValidate는 Vue.js의 유효성 검사 구성 요소 라이브러리입니다.

사용하려면 먼저 VeeValidate를 프로젝트에 설치해야합니다.

npm i vee-validate

사용법 등에 대한 자세한 내용은 다음 페이지를 참조하십시오.
htps : // ぉ 가라 tm. 기주 b. 이오/ゔぇ에ーゔぁぃ다테/오오゜rゔぃ에w. html

구성 요소 구현

VeeValidate를 이용해 유효성 검증을 적용한 메일 양식 화면의 구성 요소를 구현합니다.
디자인 컴포넌트는 예에 따라 Vuetify를 활용합니다.
필요한 입력 항목을 모두 적절하게 입력하지 않으면 SUBMIT 버튼이 유효하지 않게 밸리데이션을 유효하게 하고, 단, SUBMIT 버튼을 눌러도 입력 내용을 경고하는 것만으로 둡니다. (백엔드 호출은 나중에 구현됩니다.)

src/components/Mail.vue

<template>
  <v-container>
    <p>Mail Form</p>

    <ValidationObserver ref="observer" v-slot="{ validate, reset, invalid }">
      <ValidationProvider v-slot="{ errors }" name="name" rules="required|max:25">
        <v-text-field
          label="Name"
          v-model="name"
          :counter="25"
          :error-messages="errors"
          required
        ></v-text-field>
      </ValidationProvider>

      <ValidationProvider v-slot="{ errors }" name="email" rules="required|email">
        <v-text-field
          label="E-mail"
          v-model="email"
          :error-messages="errors"
          required
        ></v-text-field>
      </ValidationProvider>

      <ValidationProvider v-slot="{ errors }" name="contens" rules="required|max:300">
        <v-textarea
          label="Message"
          v-model="message"
          :error-messages="errors"
          :counter="300"
          rows="8"
          required
        ></v-textarea>
      </ValidationProvider>

      <v-btn @click="onSubmit" :disabled="invalid">submit</v-btn>
      <v-btn @click="onValidate">validate</v-btn>
      <v-btn @click="onClear">clear</v-btn>
    </ValidationObserver>

  </v-container>
</template>

<script>
import { required, email, max } from "vee-validate/dist/rules"
import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from "vee-validate"

setInteractionMode("eager");

extend("required", {
  ...required,
  message: "{_field_} can not be empty",
});

extend("max", {
  ...max,
  message: "{_field_} may not be greater than {length} characters",
});

extend("email", {
  ...email,
  message: "Email must be valid",
});

export default {
  name: "Mail",

  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data: () => ({
    name: "", 
    email: "", 
    message: "", 
  }), 

  methods:{
    async onSubmit(){
      alert(this.name + " / " + this.email + " / " + this.message);
    }, 
    onValidate(){
      this.$refs.observer.validate();      
    }, 
    onClear(){
      this.name = "";
      this.email = "";
      this.message = "";
      this.$refs.observer.reset();
    }
  }
}
</script>

실행 결과

백엔드

백엔드편 에 기재되어 있습니다.
끝나면 돌아와주세요.

프런트 엔드에서 AppSync 호출

백엔드가 끝나면 마지막으로 웹 앱에서 호출합니다.
백엔드편에서 AppSync에 추가한 IF(processSendMail)를 웹 앱에서 요청합니다.

src/graphql/mutations.js

export const processSendMail = `
    mutation processSendMail($input: ProcessSendMailInput!) {
        processSendMail(input: $input) {
            statusCode
            body
        }
    }
`;

src/components/Mail.vue

 :
<script>
import { required, email, max } from "vee-validate/dist/rules"
import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from "vee-validate"
import { Auth, API, graphqlOperation } from 'aws-amplify';
import { processSendMail } from "../graphql/mutations";
 :
  methods:{
    async onSubmit() {
      let apiResult = await API.graphql(graphqlOperation(processSendMail, 
        {input : {name: this.name, email: this.email, message: this.message}})
      ).catch(error => {
        console.error(error);
      });
    }, 

실행하여 양식을 작성하고 SUBMIT 버튼을 눌러 메일이 도착하는지 확인하십시오.

후기

백엔드편 에 정리해 씁니다.