Eclipse + Spring でログイン画面を簡単に作成！！

みなさん、コウタロウです！！

今日はタイトルについて。

下記の記事を参考に、Springの準備をして下さい。

“Hello world”と表示されればOKです。

今は、わざわざイチから画面を作る必要はありません。

オシャレで洗練されたHTMLテンプレートが数多くあるので、HTMLテンプレートを使って、簡単にオシャレなログイン画面をサクッと作っちゃいましょう！！

Google検索で”ログイン　テンプレート“と検索すると使えるテンプレートがたくさん出てきます。

今回は、下記から１つ利用させてもらってログイン画面を作成します。

利用するのはこれにします、URLをクリックするとcodepenのページが開きます。

画面右下にあるExportボタンを押下し、ログイン画面一式(HTML、CSS)を自分のPCにダウンロードします。

ダウンロードしたZIPを解凍すると、index.htmlとcssディレクトリがあるのでこれをEclipseのほうへコピーします。

まずは、cssディレクトリを“src/main/webapp/resources”配下に、

index.htmlは“src/main/webapp/Web-INF/views”ディレクトリ配下に置いて下さい。

※ハードコピー撮り忘れてindex.htmlではなく、変更後のlogin.jspになってます。すいません。。。

次にファイル名を変更します。index.htmlから”login.jsp”へ変更して下さい。

それではログイン用のコントローラーを作成します。

上記、”src/main/java”の”jp.org.web”配下のHomeController.javaをコピーしてLoginController.javaを作成して下さい。

※パッケージエクスプローラー上でHomeController.javaをコピーしてそのまま貼り付ければ貼付け後のソース名を聞かれるのでLoginController.javaにしてくれればOKです。

無事にLoginController.javaができました。

中身はシンプルにします。

URLが”/login”だったら、login.jspを表示するだけです。

また、login.jspも内容を少し書きかえます。

これでTomcatを起動し下記URLをブラウザに入力して下さい。

すると

ほら表示されました。

テンプレートを使うと簡単ですね。

時間かけずに成果を出すには、利用できるものはどんどん利用しましょう。

HTMLテンプレートを使えば、このログイン画面でも１０分くらいで作成できますよ。

【関連記事】