0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Vue.js + golang】ログイン機能をdockerで構築

Posted at

はじめに

フロントの描画をvue、バックエンドをgolangで実装し、ログイン機能を実現したものをgithubで公開しました。
https://github.com/rirma/vue_golang_framework

Vue.jsとgolangで構築している記事は何個か見かけましたが、そのまま使えるログイン・ログアウトの機能を実装しているものや、dockerで開発できる環境をgitで公開してくれているものが存在しなかったため構築しました。

今回は、公開した機能一式の説明をします。

環境

  • PC: MacBook Pro (15-inch, 2019)
  • OS: Monterey
  • golang: ver1.17
  • Vue: ver3.2.13

goのフレームワーク
Webフレームワーク: gin
DB接続関連: gorm

LaravelライクなMVCモデルを目指して構築しています。

試される方いらっしゃいましたらまずはgithub記載の手順に沿ってVueのコンパイル、及びgolangサーバの立ち上げを行なってください。

画面

ログイン画面

ログインボタンを押すと、localhost:8082のgolangサーバにアクセスし、セッションを確立します。

スクリーンショット 2023-01-07 2.15.33.png

ログイン後の画面

ログインをするとまずこの画面に遷移します。
未ログインの状態でこのページにアクセスしようとすると、ログイン画面にリダイレクトします。
ログアウトボタンを押すと、セッション情報を破棄します。

スクリーンショット 2023-01-07 2.16.34.png

最後に

今回、Vueもgolangも実装するのは初めてで、configとしてまとめきれていないものやaxiosの非同期通信周りで粗い部分がまだまだあります。ベストプラクティスを教えていただけると嬉しいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?