Go言語とVue.jsで作るユーザー認証アプリ~フロントエンド開発編Vol1~

こんにちは。KOUKIです。

前回に引き続き、ユーザー認証アプリの実装を行います。本記事は、主にフロントエンドで以下の処理について書きます。

1. ナビゲーションバーの作成
2. Registerページの作成

作業を始める前に、コンテナを起動しておきましょう。

コンテナを立ち上げたら、「localhost:8080」にアクセスしてみましょう。

前回

ファイル準備

開発に必要なファイルを作成します。

BootstrapCDNの導入

ページを簡単に作成するために、CSSのフレームワークであるBootstrapを導入します。ExamplesにBootstrapで何ができるかサンプルがあります。

BootstrapCDNから次のコードをコピーしてください。

これを、ui/public/index.htmlのhead要素内に記述します。

これで、Bootstrapが使えるようになります。

ナビゲーションバーの作成

最初にナビゲーションバーを作成しましょう。BootstrapのNavbarを使います。

router-linkは、Vue Routerの機能の一つです。

Vue Routerの機能は色々ありますが、ここでは各ページへのダイレクトリンクを貼っています。

Home, Login、Register.vueのそれぞれに以下の処理を実装してください。

これらをrouter/index.jsから呼び出します。

そして、App.vueJSでは、先ほど実装したNavを実装します。

router-viewでVue Routerの機能が使えるようになるので、忘れないようにしましょう。

ここまで実装すると、ヘッダが表示され、リンクを経由して各々のページに遷移できるようになります。

Registerの作成

次は、Registerを作成します。

ページの作成

最初に、ページを作成しましょう。Bootstrapの力を借ります。

v-modelは、フォーム入力バインディングと呼ばれるものです。フォームに入力した値が、変数(firstNameなど)に直接代入されます。

Submit処理の実装

次は、Submitボタンが押下された時の処理を書きます。

axiosが必要なので、ui配下で以下のコマンドを実行してください。

axios.postで、apiへリクエストを飛ばします。main.tsにベースとなるURLを定義しましょう。

この様にすると「http://localhost:80/api/register」へリクエストを飛ばせるようになります。

注意:camel caseエラー

筆者の環境だとcamel caseエラーが表示されました。

このエラーは、.eslintrc.jsに以下の設定を行うことで回避しました。

この設定を行ったらコンテナを立ち上げ直してください

動作確認

Registerページからユーザー情報を登録してみましょう。

リクエストが成功したので、ログインページに飛びました。

「http://localhost:8888/sql.php?db=go_auth&table=users&pos=0」にアクセスしてデータを確認したところ、問題なく登録されていました。

OKですね。長くなったきたので、ここまでにしましょう。

次回

次回も引き続き、Vue.jsを使ったフロントエンド開発を行います。

Vue記事まとめ

コメントを残す