サーブレット+ JDBC + HTML + CSSの小さなケース

MVCは、小さな機能を実現する小型ケースのシンプルなウェブは、学んだ自分でDIYを行うことができますいくつかのJavawebの子供用の靴

ログイン画面の実装は次のようになった後

最初のIでの使用のCSSをしましたが、CSSまたはあまりにも多くの食品の使用、および無用良いので、私たちは、CSSに上っていなかった、私を許して

私の考え：

1、最初のWebルートに3つの.jspファイルを作成します

2、サーブレットクラスを作成し、あなたは直接ダニにおけるプロジェクト - >に自動的にビルド、自動的にweb.xmlファイルを構成してオンに覚えて、作成することができます

データベースからの3、書き込みがloginservletクラス、JDBC接続、およびデータを検索すると、ユーザは、ユーザのログイン名とパスワードが同一であるか否かを判定する

図4は、リンク先のページが.jspファイルのリンクを決定するために、合意するかどうかを判断します

5、データベースの準備とも持っているような

コードを書き始める、アイデアが明確でなければなりません。

1、私はlogin1.jspファイルを書きますよ

具体的なコードは次のよう：

<％@ページ言語= "javaの"インポート= "java.utilの。*"のcontentType = "text / htmlの;のcharset = UTF-8" ％>
<％
文字列のパス= request.getContextPath（）;
ストリングbasePathを= request.getScheme（）+ "：//" + request.getServerName（）+ "：" + request.getServerPort（）+パス+ "/"。
％>

<DOCTYPE HTML PUBLIC！ " - // W3C // DTD HTML 4.01移行// EN">
<HTML>
<HEAD>
<基本のhref = "<％= basePathを％>">

<タイトル>ログイン</ TITLE>

<META HTTP-当量= "プラグマ"コンテンツ= "キャッシュなし">
<META HTTP-当量= "キャッシュ制御"コンテンツ= "キャッシュなし">
<META HTTP-当量=内容= "0"を"有効期限が切れます" >

<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "Styles.cssを">
- >
<リンクのrel = "スタイルシート"のhref = "/ CSS / login1.css" />
</ HEAD>
<BODY >
<DIV CLASS = "コンテナ">
<DIV CLASS = "NAV-トップ"> </ div>
<DIV CLASS = "NAV-底">
<DIV CLASS = "コンテンツ">
<DIV CLASS = "コンテンツ・トップ" >
<PのID = "mangerment">管理员登陆面板</ P>
</ div>
<DIV CLASS = "コンテンツ底">
<フォームアクション= "サーブレット/がloginservlet" METHOD = "GET">
<Pクラス= "PP">账号＆NBSP;＆NBSP; <入力クラス= "PUT"タイプ=」テキスト」名前= "ユーザ名" /> </ P>
<Pクラス= "PP">密码＆NBSP;＆NBSP; <入力クラス= "PUT"タイプ= "パスワード"名前= "パスワード" /> </ P>
<入力クラス= "BTN"タイプ= "提出"値= "登录" />
<入力クラス=タイプ=値を"送信" "BTN" = "取消" />
</フォーム>
</ div>
</ div>
</ div>
</ div>
</ body>
</ HTML>

キーコード：

CSSファイルのパターンマッチングをリンクされた、なぜなら私のCSSの後、あなたはかなりのCSSについて学ぶために、インターフェイスを美化することができ、私はまた、無用コメントアウト、彼らが必要な場合は私を許し、そのためのスタイルに影響を与えない、非常に良いではありません良いです

<WRL-パディング> web.xmlの図に記入しなければならない要求されたアクションの一つの実施形態において：

補完：CSSスタイルは、おそらく大体このように、作りました

出典：

<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD> <メタのcharset = "UTF-8">
<タイトル>登录界面</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0PX ;
パディング：0PX。
}
.container {
幅：100％。
高さ：100％;
}
.navトップ{
マージン：0PX。
パディング：0PX。
幅：100％;
高さ：60PX;
背景：スカイブルー。
}
.nav底{
幅：100％。
高さ：100％;
パディング：0PX。
マージン：0PX。
位置：絶対;
トップ：60PX;
左：0PX。
背景：lightpink。
}
.content {
幅：400ピクセル。
高さ：270px;
位置：固定;
トップ：50％;
左：50％;
margin-left：-200px;
マージントップ：-135px;
ボーダー：2ピクセル固体#FFF;
}
.contentトップ{
幅：100％。
高さ：70ピクセル;
国境：1pxのは＃000を点在しました。
マージン：0PX。
パディング：0PX。
背景：スカイブルー。
テキスト整列：センター;
フォントサイズ：25ピクセル;
フォントファミリー：ゴシック;
行の高さ：70ピクセル;
}
.content底{
背景：＃000044。
高さ：200pxの。
幅：100％;
ボーダー：0PX固体#FFF;
}
.content底.put {
幅：100％。
高さ：40ピクセル;
テキスト整列：センター;
フォントサイズ：16pxに;
フォントファミリー：ゴシック;
ボーダー：0PX固体＃000;
パディング：10pxの;
行の高さ：40ピクセル;
色：白;
}
.PP {
幅：100％。
高さ：40ピクセル;
パディング：10pxの;
テキスト整列：センター;
行の高さ：40ピクセル;
ボーダー：0PX固体＃000;
}
.TITLE {
幅：80px;
高さ：40ピクセル;
行の高さ：40ピクセル;
フォントサイズ：16pxに;
フォントファミリー：ゴシック;

}
</スタイル>
</ head>
<body>
<DIV CLASS = "コンテナ">
<DIV CLASS = "NAV-トップ"> </ div>
<DIV CLASS = "NAV-底">
<DIV CLASS = "コンテンツ">
<DIV CLASS ="コンテンツ・トップ」>

<DIV CLASS = "PUT">用户名：の<input type = "text"の名= "ユーザ名" /> </ div>
<divのクラス= "PUT">密码：＆NBSP;＆NBSP;の<input type = "パスワード"名前= "パスワード"> </ div>
<divのクラス= "PP"> <入力クラス= "タイトル"タイプ= "提出"値= "登录">＆NBSP;＆NBSP;＆NBSP;＆NBSP; <入力クラス= "タイトル"TYPE ="リセット」値= "取消"> </ div>
</ div>
</ div>
</ div>
</ div>
</ BODY>

</ HTML>

2、共感、そしてfail.jspファイル書かsuccess.jsp

success.jspファイルを書きます：

<％@ページ言語= "javaの"インポート= "java.utilの。*"のcontentType = "text / htmlの;のcharset = UTF-8" ％>
<％
文字列のパス= request.getContextPath（）;
ストリングbasePathを= request.getScheme（）+ "：//" + request.getServerName（）+ "：" + request.getServerPort（）+パス+ "/"。
％>

<DOCTYPE HTML PUBLIC！ " - // W3C // DTD HTML 4.01移行// EN">
<HTML>
<HEAD>
<基本のhref = "<％= basePathを％>">

<タイトル>登录成功提示</タイトル>

<META HTTP-当量= "プラグマ"コンテンツ= "キャッシュなし">
<META HTTP-当量= "キャッシュ制御"コンテンツ= "キャッシュなし">
<META HTTP-当量= =」コンテンツを"有効期限が切れます" 0" >

<リンクのrel =タイプ= "テキスト/ CSS"の"スタイルシート"のhref = "Styles.cssを">
- >

</ HEAD>

<BODY>
ログインに成功！<BR>
ログイン情報は次のとおりです。<BR>
アカウントを<％= request.getParameter（ "ユーザ名 "）％> <BR>
パスワード：<％= request.getParameter（ "パスワード"）％> <BR>
<A HREF = "<％= request.getContextPath（）％> / login1.jsp"> ログイン画面</a>を返す
</ BODY>を

</ HTML>

fail.jspファイルを書きます：

<％@ページ言語= "javaの"インポート= "java.utilの。*"のcontentType = "text / htmlの;のcharset = UTF-8" ％>
<％
文字列のパス= request.getContextPath（）;
ストリングbasePathを= request.getScheme（）+ "：//" + request.getServerName（）+ "：" + request.getServerPort（）+パス+ "/"。
％>

<DOCTYPE HTML PUBLIC！ " - // W3C // DTD HTML 4.01移行// EN">
<HTML>
<HEAD>
<基本のhref = "<％= basePathを％>">

<タイトル>登录失败提示</タイトル>

<META HTTP-当量= "プラグマ"コンテンツ= "キャッシュなし">
<META HTTP-当量= "キャッシュ制御"コンテンツ= "キャッシュなし">
<META HTTP-当量= =」コンテンツを"有効期限が切れます" 0" >

<リンクのrel =タイプ= "テキスト/ CSS"のhref = "Styles.cssを"の"スタイルシート">
- >

</ HEAD>

<BODY>
ログインに失敗しました！<BR>
<H4>間違ったパスワード</ H4>
あなたのログイン情報は、次のとおりです。<BR>
アカウントを<％= request.getParameter（ "ユーザ名"）％> <BR>
<A HREF =「<％= request.getContextPath （）％> / login1.jsp「>ログイン画面に復帰する</a>
</ BODY>

</ HTML>

3、サーブレットのパッケージservletlogin.javaでクラスを作成します

サーブレットの直後に作成されたイメージは、バックを直接測定することができる場合で、システムが役立つあなたのconfigure web.xmlのマッピング

ソースとして、次のとおりです。

サーブレットをパッケージ化。

インポートにjava.io.IOException;
輸入てjava.io.PrintWriter;
インポートのjava.sql.Connection;
インポートのjava.sql.DriverManager。
インポートのjava.sql.ResultSet;
輸入java.sql.Statementの;

インポートのjavax.servlet.RequestDispatcher;
輸入javax.servlet.ServletException;
輸入javax.servlet.http.HttpServlet。
インポートのjavax.servlet.http.HttpServletRequest;
インポートのjavax.servlet.http.HttpServletResponse;
パブリッククラスがloginservletはHttpServletを{延び
公衆接続CON = NULLと、
パブリック静的文字列のユーザ名。
パブリック静的文字列のパスワード。
公衆がloginservlet（）{
スーパー（）。
}

/ **
*サーブレットの破壊。<BR>
* /
公共ボイド（）{破壊
super.destroyを（）; //ただ、プットは、ログ内の文字列"破壊"
//ここにコードを入れ
}

ます。public void doGetメソッド（HttpServletRequestのリクエスト、HttpServletResponseの応答）
ServletExceptionがは、IOException {スロー
request.setCharacterEncoding（ "UTF-8"）;
ユーザ名= request.getParameter（ "ユーザ名"）;
パスワード= request.getParameter（ "パスワード"）;
System.out.println（ユーザー名）;
System.out.println（パスワード）;
System.out.println（ "取得要求的请求参数"）;
{しようと文字列DRIVERNAME = "com.mysql.cj.jdbc.Driver"。Class.forNameの（DRIVERNAME）。System.out.println（ "加载驱动完成"）;

文字列するDBURL = "はjdbc：mysqlの：//127.0.0.1：？3306 /テストcharacterEncoding = UTF8 && useSslオプション=真&& serverTimezone = GMT"; 文字列のユーザー名は「root」を=。文字列userPwd = ""; CON =たDriverManager.getConnection（するDBURL、ユーザ名、userPwd）。声明= con.createStatement（）; 文字列のSQL =「ログインから選択*」; ResultSetのRS = statement.executeQuery（SQL）。一方、（rs.next（））{ 文字列のユーザ= rs.getString（ "ユーザ名"）; 文字列のPWD = rs.getString（ "パスワード"）; もし（ユーザ名= nullの&&パスワード= NULL && username.equals（ユーザー）&& password.equals（PWD）！！）{ request.getRequestDispatcher（ "../ success.jsp"）、前方（リクエスト、レスポンス）。}他{ 要求。getRequestDispatcher（ "../ fail.jsp"）（要求、応答）を転送します。} rs.close（）。

con.close（）;
}
}キャッチ（例外e）{
e.printStackTrace（）;
}
}
公共ボイドのdoPost（HttpServletRequestのリクエスト、HttpServletResponseの応答）
ServletExceptionがは、IOException {スロー
のdoGet（要求、応答）。
}
公共のボイドのinit（）は、ServletExceptionが{スロー
//ここにあなたのコードを入れてください
}

}

場所は赤の接続私のMySQLデータベースをマークされ、この場所は私に長い時間がかかった、おそらく誰もが同じではありませんが、あなたは再び彼らの最初の使用をデータベースを構成することができます。

あなたがCSDNにもかかわらず、どこへ行くに答えを見つける方法がわからない場合は、多くの疑問が答えを持っています。

もし（ユーザ名= nullの&&パスワード= NULL && username.equals（ユーザー）&& password.equals（PWD）！！）{ request.getRequestDispatcher（ "../ success.jsp"）、前方（リクエスト、レスポンス）。}他{ request.getRequestDispatcher（ "../ fail.jsp"）フォワード（リクエスト、レスポンス）。

}

これは、ページをジャンプするための要求です。

ユーザ名= request.getParameter（ "ユーザ名"）;

パスワード= request.getParameter（ "パスワード"）;

これは、login.jspをユーザー名とパスワードから取得し、データベースと比較されます。

私は、ウェブサイトの着信リンクから開始されます。http：// localhost：8080 /がloginservlet / login1.jspもちろん、誰もが同じ入力セットではありません同じではありません

ページジャンプ後に達成され手段その.. ../success.jspファイルディレクトリに復帰