お題

前回に続き、今回もまだFirebaseAuth導入前。ログインフォームを実装する。
また、フロントだけでなくバックエンドともゆくゆく連携が必要なのでガワを作っておく。

前提

以下は他にいくらでもよい記事があるので省略。

開発環境の構築（GolangやらYarnやらのインストール等）
Google Cloud Platform環境の取得（App Engine有効化）
Firebase環境の取得
Vue.jsやNuxt.jsのチュートリアル

開発環境

# OS

$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"

# 依存モジュールのバージョン

package.jsonの内容より、以下の通り。

    "nuxt": "^2.3.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/axios": "^5.3.6"

# Yarn

$ yarn -v
1.12.3

# Golang

$ go version
go version go1.11.4 linux/amd64

実践

frontend/components/login.vueを下記の通り修正してみる。
せっかくvuetifyを使っていても、デザインは適当。。。
とりあえず、FirebaseAuthを使うにあたって、べたな「メールアドレス」と「パスワード」での認証を試す予定なので、フォームの要素もそれに合わせる。
※バリデーションやエラーハンドリングなど、お試しレベルでは不要なものは未実装。

修正後のソース

[frontend/components/login.vue]

<template>
  <v-layout
    class="py-3"
  >
    <v-form>
      <v-text-field
        v-model="email"
        label="Email"
        class="py-2"
      />
      <v-text-field
        v-model="password"
        label="Password"
        :type="`password`"
        class="py-2"
      />
      <v-btn
        class="mx-1 my-2 px-3 py-2 lime"
        @click="login"
      >
        LOGIN
      </v-btn>
    </v-form>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    login: function() {
      console.log('login')
      // FIXME: ここにFirebaseAuthを用いたログイン処理を書く想定

      // ログイン正常終了時はログイン後の初期画面に遷移する。
      this.$router.push('/')
    }
  }
}
</script>

修正後の画面表示

■ログイン後トップ画面のデザイン修正

固定文字列を表示していたfrontend/pages/index.vueを修正する。
ログイン後には、お知らせくらい表示するだろうということで、「お知らせコンポーネント」を追加。
それを使うことにする。

修正後のソース

[frontend/pages/index.vue]

<template>
  <v-content>
    <notice />
  </v-content>
</template>

<script>
import notice from '~/components/notice.vue'

export default {
  components: {
    notice
  }
}
</script>

[frontend/components/notice.vue]

<template>
  <v-layout
    class="py-3"
  >
    <v-list two-line>
      <v-list-tile v-for="notice in notices" :key="notice">
        <v-list-tile-content class="mb-2">
          <v-list-tile-title>{{ notice.sentence }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-layout>
</template>

<script>
export default {
  data() {
    return {
      notices: []
    }
  },

  mounted() {
    this.$axios
      .get(process.env.apiBaseUrl + '/notices')
      .then(res => {
        console.log(res.data)
        this.notices = res.data
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

お知らせの内容は axiosを用いてバックエンド(GoでWebAPIを実装)から取得する。

修正後の画面表示

■バックエンド(GoによるWebAPI実装)のディレクトリ構造

巷ではクリーン・アーキテクチャが流行りだけど、お試しプロジェクトでそこまでの汎用性は不要なので、当初はmain.goだけで済まそうとした。
ただ、一応、ある程度機能拡張する可能性も考慮し、MVC+S くらいの作りにはしておくことに。
※MVC+Sに関しては過去に記事化していた。
https://qiita.com/sky0621/items/c7b196a1ba0e126cc3f5

$ tree -L 2 backend/
backend/
├── README.md
├── app.yaml
├── controller
│   ├── apierror.go
│   ├── form
│   ├── notice.go
│   ├── response
│   └── router.go
├── go.mod
├── go.sum
├── index.yaml
├── logger
│   └── logger.go
├── main.go
├── middleware
│   ├── basic.go
│   └── custom.go
├── model
│   ├── dto.go
│   └── notice.go
├── service
│   └── notice.go
├── system
│   ├── local.go
│   └── setting.go
├── util
│   ├── stringbuilder.go
│   └── util.go
└── view

★controller -> service -> model の呼び出し関係
★viewの下にはfrontendでビルドしたファイルを出力する。

■バックエンドの使用フレームワーク

■バックエンドのつくり

この時点ではFirebaseAuthとの絡みは出てこないので省略。
実際のソースは下記。
https://github.com/sky0621/Dotato-di-una-libreria/tree/38261c1768ca8da0aba77ced9d5a1b795172e89c/backend

■ここまでの全ソース