みなさん、コウタロウです!!
今日はタイトルについて。
最初の準備
下記の記事を参考に、Springの準備をして下さい。
“Hello world”と表示されればOKです。
【Java】Eclipse + Spring(STS) でMVCサンプル簡単作成 – フリーランス チャレンジ!!
HTMLテンプレートを使う
今は、わざわざイチから画面を作る必要はありません。
オシャレで洗練されたHTMLテンプレートが数多くあるので、HTMLテンプレートを使って、簡単にオシャレなログイン画面をサクッと作っちゃいましょう!!
テンプレートをダウンロード
Google検索で”ログイン テンプレート“と検索すると使えるテンプレートがたくさん出てきます。
今回は、下記から1つ利用させてもらってログイン画面を作成します。
利用するのはこれにします、URLをクリックするとcodepenのページが開きます。
画面右下にあるExportボタンを押下し、ログイン画面一式(HTML、CSS)を自分のPCにダウンロードします。
テンプレートをEclipseへ格納
ダウンロードした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ができました。
中身はシンプルにします。
gist5da40d8faf41d2bed978a8c22505c09e
URLが”/login”だったら、login.jspを表示するだけです。
また、login.jspも内容を少し書きかえます。
gistaea87a792bbb340830810f75468b11b7
これでTomcatを起動し下記URLをブラウザに入力して下さい。
すると
ほら表示されました。
最後に
テンプレートを使うと簡単ですね。
時間かけずに成果を出すには、利用できるものはどんどん利用しましょう。
HTMLテンプレートを使えば、このログイン画面でも10分くらいで作成できますよ。
【関連記事】
コメント