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

eclipse

 

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

 

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

 

  • 最後に
  •  

    最初の準備

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

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

    【Java】Eclipse + Spring(STS) でMVCサンプル簡単作成 – フリーランス チャレンジ!!

     

    HTMLテンプレートを使う

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

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

     

    テンプレートをダウンロード

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

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

    sounansa.net

     

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

    Attention Required! | Cloudflare

    f:id:ksakae1216:20170320163724j:plain

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

     

    テンプレートをEclipseへ格納

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

    f:id:ksakae1216:20170320223049j:plain

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

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

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

     

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

    f:id:ksakae1216:20170320165341j:plain

     

    コントローラー作成

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

    f:id:ksakae1216:20170320165446j:plain

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

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

     

    f:id:ksakae1216:20170320165828j:plain

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

     

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

    gist5da40d8faf41d2bed978a8c22505c09e

     

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

     

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

    gistaea87a792bbb340830810f75468b11b7

     

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

    404 Not Found

     

    すると

    f:id:ksakae1216:20170320225400j:plain

     

    ほら表示されました。

     

    最後に

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

     

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

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

     

    【関連記事】 

    www.ksakae1216.com

     

    www.ksakae1216.com

    コメント

    タイトルとURLをコピーしました