Java+SSH+Bootstrap 開発ノート_html/css_WEB-ITnose

JDK+Tomcat+MyEclipse 開発環境構築

JDK のダウンロードとインストール

(1) 対応するバージョンの JDK をダウンロードし、ダブルクリックして JDK をインストールし、インストール パスを指定し、インストール完了後に続行する JRE をインストールし、インストール パスを変更し、インストール後に環境変数を構成します。 [コンピュータ] → [プロパティ] → [システムの詳細設定] → [詳細設定] → [環境変数]。

(2) システム変数 → JAVA_HOME 変数を新規作成します。 jdk のインストール ディレクトリに変数値を入力します (インストール ディレクトリに移動してプロパティを表示し、それをコピーするだけです。私の場合は D:Program FilesJavajdk1.8.0_72 です)。

(3) システム変数 → パス変数の検索 → 編集

変数値の最後に %JAVA_HOME%bin;%JAVA_HOME%jrebin; を入力します (「;」記号があるかどうかに注意してください)元の Path 変数値の末尾)、そうでない場合は、最初に ; 記号を入力し、次に上記のコードを入力します)

(4) システム変数 → 新しい CLASSPATH 変数を作成します

変数値.;%JAVA_HOME%lib;%JAVA_HOME%libtools.jar (先頭のドットに注意してください)

システム変数が設定されています。

(5) cmd を実行し、java -version と入力します (java と -version の間にスペースがあります)。図のようにバージョン情報が表示されれば、インストールとインストールが完了します。設定は成功しました。

Tomcat をダウンロードしてインストールします

(1) 対応するバージョンの Tomcat をダウンロードします。apache-tomcat-8.0.32-windows-x64.zip をインストール不要でダウンロードします。ここでバージョンを確認し、必要なディレクトリに直接解凍してください。

(2) CATALINA_HOME 環境変数を設定します (コンピューター → プロパティ → システムの詳細設定 → 詳細 → 環境変数)。システム変数 → 新しい CATALINA_HOME を作成し、変数値を Tomcat インストール ルート ディレクトリに入力します。たとえば、私の場合は D:Program Filesapache-tomcat-8.0.32 です。

(3) Tomcat の設定が成功したかどうかをテストします (以前の JDK 環境変数の設定によって異なります)。Tomcat のインストール ディレクトリに入り、bin フォルダーに入り、cmd ウィンドウを実行し、startup.bat をドラッグして実行します。コマンドを実行すると、DOS インターフェイスが実行され、ブラウザを開いて http://localhost:8080/ と入力されれば、設定は成功です。

MyEclipse をダウンロード、インストール、構成します

(1) 対応するバージョンの myeclipse をダウンロードします (私は myeclipse-pro-2014-GA-offline-installer-windows です。 exe)、インストールするインストールパスを選択するだけです。インストール後、クラックチュートリアルに従ってクラックしてください。

(2) myeclipse を開き、ウィンドウ → 設定 → Java → インストールされた JRE → 追加 → 標準 VM → 次へ → ディレクトリを選択し、JDK インストール ディレクトリを選択します。私の場合は D:Program FilesJavajdk1.8.0_72 をクリックし、完了をクリックします。新しく追加した JDK を選択し、[OK] をクリックして終了します。

(3) ウィンドウ → 設定 → MyEclipse → サービス → tomcat を選択し、Tomcat のバージョンを選択します (私の場合は Tomcat 8.x) → [有効にする] をクリックして、JDK を参照します。 tomcathome ディレクトリ (私の場合は D:Program Filesapache-tomcat-8.0.32)、tomcat 8.x を展開→ JDK を選択→ 追加したばかりの JDK VM を選択します (私の場合は jdk1.8.0_72)

構成は次のとおりです成功。

Web テスト環境

(1) myeclipse を開き、ファイル → 新規 → Web プロジェクトを開き、プロジェクト名 test を入力し、完了をクリックして新しい Web プロジェクトを作成します。

(2) プロジェクト名を右クリック → [実行] → [MyEclipse サーバー アプリケーション] を選択し、Tomcat 8.x を選択して [OK] をクリックし、Web プロジェクトを Tomcat サーバーに公開します。

(3) ブラウザを開き、http://localhost:8080/test/ と入力すると、環境設定は成功です。

インスタンスへのログイン (SSH フレームワーク + ブートストラップ 3)

データベースの準備 (mysql を選択)

(1) データベース環境のインストールと適切な mysql をダウンロードします。ここでは mysql-5.6.22-winx64.msi を使用し、インストールして設定します (デフォルトのエンコードは utf-8 で、中国語と互換性があります)。

(2) 接続データベース ドライバーを追加し、mysql の Java の jdbc ドライバーをダウンロードします。mysql-connector-java-5.1.34-bin.jar を使用し、MyEclipse を実行してデータベース ビューを開きます (次に示すように)。図:

DB ブラウザを右クリックし、新しいデータベース接続ドライバーを作成し、ドライバー モジュールを mysql コネクタ/J として選択し、ドライバー名を入力して URL を接続します (注)接続エンコード設定、データベースは utf-8 エンコードを使用、プロジェクトも utf-8、jdbc:mysql://localhost:3306/cls_anal?useUnicode=true&characterEncoding=utf-8 に設定)、mysql ログイン名、および図に示すように、パスワード、JAR を追加して jdbc ライブラリを追加、ドライバー クラス名で com.mysql .jdbc.Driver を選択し、パスワードの保存を選択し、[ドライバーのテスト] をクリックして、[完了] をクリックして完了します。

(3) mysql ドライバーを開いてデータベースに接続し、右クリックして新しいデータベースを作成します。ログインし、データベースの文字エンコーディングとして utf-8 を選択し、データベースを展開し、新しいテーブル userinfo を作成し、フィールド userid (主キー、自動インクリメント)、ユーザー名、ユーザーパス。新しい SQL ビューを作成して、テーブルにデータ行を挿入します。

プロジェクト ビューに切り替えます (右上隅のビューを選択します)。

MyEclipse 構成 SSH フレームワーク

1. ログインという名前で新しい Web プロジェクトを作成します。

1. Struts サポートを追加し、プロジェクトを右クリック→MyEclipse→プロジェクト ファクト→Struts 1.x のインストールを選択します。 up インターフェイスで [次へ] を選択し、[完了] をクリックします。

1. Spring サポートを追加し、プロジェクトを右クリック → MyEclipse → プロジェクト ファクト → [Install Spring] を選択し、ポップアップ インターフェイスで [次へ] を選択します。次に、WebRoot/WEB-INF ディレクトリで applicationContext.xml を選択し、[完了] をクリックします。

1. Hibernate サポートを追加し、プロジェクトを右クリック → MyEclipse → プロジェクト ファクト → [Install Hibernate] を選択し、ポップアップで [次へ] を選択します次に、DB ドライバーで以前に構築したデータベース ドライバー mysql を選択し、[完了] をクリックします。

以下に示すように、applicationContext.xml 構成ファイルをチェックして、データベース ドライバー構成が正しいことを確認します (自動生成されたドライバー構成は一般的に間違っているため)。 (自動生成されたものは間違っているものもあります)、URL (データベースが utf-8 であり、前から後ろに切り替えるスプリング フィルターも utf-8 であるため、エンコーディング セットを utf-8 として追加することを忘れないでください)、ユーザー名、パスワードが正しく設定されています。

< Bean ID = "dataSource"

クラス = "org.apache.commons.dbcp.BasicDataSource" >

< プロパティ名 = "driverClassName"

値 = “com.mysql.jdbc.Driver” >

< プロパティ名 = “url”

値 = “jdbc:mysql://localhost:3306/cls_anal?useUnicode=true&characterEncoding=utf-8” >

< "ユーザー名" 値 = "root" > プロパティ

< プロパティ名 = "パスワード" 値 = "55555" >/ プロパティ

< ;/ bean >

(5) struts-config.xml の の前に次の設定を追加します (message-resources をオーバーライドします) (ここでは struts アクションを管理するために spring が使用されています)。

<コントローラー

processorClass=”org.springframework.web.struts.DelegatingRequestProcessor”>

login.struts.ApplicationResources” />

value=”/WEB-INF/applicationContext.xml” /> plug-in>

(6) web.xml を開き、 の前に次のコードを追加して、リクエストのエンコーディングを設定します (Spring コンバーターを使用し、エンコーディングは utf-8 です)。 utf- は一律に使用されます。 8. 中国語の文字はデータベースに保存されるときに文字化けしません):

<フィルタ名>encodingFilter

org.springframework.web.filter.CharacterEncodingFilter

;/フィルタークラス>

エンコーディング

-8

forceEncoding

<パラメータ値> true

<🎜; > <フィルタマッピング>

<フィルタ名>エンコーディングフィルタ

/*

< /filter-mapping>

ブートストラップ設計ログインページ

コピーコンパイルされたブートストラップ バージョン 図に示すように、フォルダー全体をプロジェクト WebRoot の下に配置します。

新しい login.jsp を作成します。 WebRoot内のファイル。ブートストラップ ログイン コンポーネントを使用する場合、login.jsp コードは次のようになります:

1. <%@

   page language=”java” import=”java.util. *” pageEncoding= "utf-8"
%>

1. 文字列パス = request.getContextPath (); >
文字列basePath = request.getScheme ()+ “://” + request.getServerName ()+ “:” + request.getServerPort ()+ path + “/”

%> ;

"en" >

< ;head>

“utf-8″

>

“X-UA-Compatible” content = “IE=edge” >

“viewport” content = “width=device-width, initial-scale=1″ >

“description” content = “ 登录界面 “ >

“author” content = “jly” >

“icon” href = “../../favicon.ico” >

“bootstrap/css/bootstrap.min.css” rel = “stylesheet” >

“css/signin.css” rel = “stylesheet” >

“container” >

“form-signin” >

“form-signin-heading” > 用户登录

“inputEmail” class = “sr-only” > 用户名

“text” id = “inputUser” class = “form-control” placeholder = “ 用户名 “ required autofocus >

“inputPassword” class = “sr-only” > 密码

“password” id = “inputPassword” class = “form-control” placeholder = “ 密码 “ required >

“checkbox” >

“checkbox” value = “remember-me” > 记住我

“btn btn-lg btn-primary btn-block” type = “submit” > 登录

1. WebRoot の下に新しいフォルダー css を作成し、フォルダー css の下に新しい login.css スタイル ファイルを作成します。 ファイルの内容は次のとおりです。 🎜>

ボディ

{

パディングトップ : 40px;

パディングボトム : 40px; -color : #eee;

}

. フォームサインイン

{

最大幅 :

パディング : 15px;

margin : 0 auto;

}

.

フォームサインイン見出し

,

. form -signin . チェックボックス

{

margin-bottom : 10px; .フォームサインイン

.

チェックボックス

{

フォントの太さ : } 。 .

フォームコントロール

{

位置 : 相対;

高さ : 自動; -webkit-box-sizing : border-box ;

-moz-box-sizing : ボーダーボックス;

パディング : 10px;サイズ : 16px;

}

.フォームサインイン

.

フォームコントロール

: フォーカス

z-index : 2 ;

}

. フォームサインイン入力

[ type=”email” ] {

margin-bottom : -1px;

border-bottom-right-radius : 0;

border-bottom-left-radius : 0;

} . フォームサインイン入力 [ type=”password” ]

{

margin-bottom : 10px;

ボーダー上左半径 : 0;

ボーダー上右半径 : 0; >

ログイン プロジェクトを実行します。 サーバーに移動し、ブラウザに http://localhost:8080/login/login.jsp と入力します。表示は次のようになります。

ログイン検証ロジック関数を完了します

プロジェクト フォルダー src の下に新しいパッケージ com.pojo (エンティティ層) と com.dao (永続層) を作成し、MyEclipse に切り替えますデータベース エクスプローラー ビューでログイン データベースの userinfo テーブルを開き、右クリックして [Hibernate] を選択します。 リバース エンジニアリングがインターフェイスをポップアップ表示します。src フォルダーとして [login/src] を選択し、パッケージとして com.pojo を選択し、必要な項目を選択します。が生成されたら、「次へ」をクリックして ID ジェネレーターをネイティブに設定し (データベースによって異なりますが、通常、自動番号付けにはネイティブを選択できます。主キーが自分で決定されている場合は、「割り当て済み」を選択します)、図に示すように、「終了」をクリックします。図:

図に示すように、生成された UserinfoDao.java を com.dao パッケージにドラッグします:

新しい com.service パッケージを作成し、そのパッケージの下に新しいクラス UserinfoService.java を作成して永続化操作をカプセル化します。 コードは次のとおりです。

パッケージ com

.
1. サービス

   ;

com

.

pojo

.

ユーザー情報

;

1. import com

   .

   dao
.

UserinfoDAO

; public class UserinfoService {

// 依存関係の注入 UserinfoDAO は Spring 構成ファイルを設定する必要があります applicationContext.xml private UserinfoDAO userinfoDAO ;

public UserinfoDAO getUserinfoDAO

() { return

userinfoDAO

;

}

public void setUserinfoDAO (

UserinfoDAO userinfoDAO

) {

this . userinfoDAO = userinfoDAO ; >

}

// ログインを決定 public boolean Login ( Userinfo user )

{ if ( userinfoDAO .findByExample(user).size()>0)

return true ;

return

false ; >

新しいアクションとアクションフォームを作成し、右クリックして [新規] >その他->MyEclipse->Web Struts 1.x->Struts フォーム、アクション&Jsp->次のポップアップ インターフェイス設定フォーム、ユーザー情報としてユースケースを入力、フォーム プロパティを追加、ユーザー名 username、ユーザー パスワード userpass を追加(ビュー レイヤー フォームの名前に対応するインスタンス属性。ここではログイン インターフェイス JSP フォームのユーザー名とユーザー パスワードに対応するため、クライアントはこのフォーム Bean を変換する Struts インスタンスを渡すことができます)。 🎜>

[次へ] をクリックし、アクションを設定し、スーパークラスの継承に org.apache.struts.actions.DispatchAction を選択します (つまり、1 つのアクションが多数のメソッド アクションに対応することができます)。入力ソース (フォーム データを送信するページ) に login.jsp を選択します。 ); パラメータ オプションを選択し、パラメータをメソッドに設定します (ここでは、アクションを呼び出す特定の関数アクションを指定する必要があります)。 [Forward] オプションを選択し、クリックして複数の Forward を追加します (ロジック処理後の関連ジャンプに使用されます)。

この時点で、Action クラスと Form クラスはインスタンス化された Bean として使用されます。ビュー層の入力JSPのフォーム要素に変数が対応している必要があります。属性名とID、アクション応答としてのActionは、論理処理層によるビュー層のサブミットロジック処理となります。

生成された UserinfoAction.java のロジック処理を変更します (execute 関数を上書きし、Loginexecute 関数を追加します)。 変更されたコードは次のとおりです。

package com . struts ;

import javax . servlet . http . HttpServletRequest ;

import javax . サーブレット . http . HttpServletResponse ;

インポート組織. apache . struts . アクション . アクション ;

インポート組織 . apache . struts . アクション . ActionForm ;

インポート組織 . apache . struts . アクション . ActionForward ;

インポート組織 . apache . ストラット . アクション . ActionMapping ;

import com . サービス 。 UserinfoService ;

import com . pojo . ユーザー情報

// DispatchAction は同じアクションに対して複数のアクションを許可します アクションの反応には関数が使用されます

public class UserinfoAction extends DispatchAction {

依存関係の注入 UserinfoService 設定するにはSpring 構成ファイル applicationContext.xml

private UserinfoService userinfoService ;

public UserinfoService getUserinfoService () {

return userinfoService ;

}

public void setUserinfoService ( UserinfoService userinfoService ) {

this . userinfoService = userinfoService ;

}

public ActionForward Loginexecute ( ActionMapping マッピング , ActionForm フォーム ,

HttpServletRequest リクエスト , HttpServletResponse応答 ) {

UserinfoActionForm userinfoActionForm = ( UserinfoActionForm ) フォーム ; // TODO 自動生成されたメソッド スタブ

Userinfo user = new Userinfo ();

user . setUsername ( userinfoActionForm . getUsername ());

user . setUserpass ( userinfoActionForm . getUserpass ());

// ユーザー名とパスワードが正しく入力されていれば、ログインは成功します

if ( userinfoService . ログイン ( ユーザー ))

{

return マッピング . findForward ( “success” );

}

else

{

return マッピング . findForward ( “エラー” );

}

}

}

1. は UserinfoAction のため、java と UserinfoService.java は Spring 関連の依存関係挿入テクノロジを使用するため、Spring 設定ファイル applicationContext.xml の の前に次の設定を追加します。

依存関係の挿入 –>

ビューレイヤーのlogin.jspを変更して、ユーザー名とパスワードの入力フォームのIDと名前の設定をUserinfoFormに対応する変数名にマッピングします。

< input type = “text” id = “username” name = “username” class = “form-control” placeholder = “username” オートフォーカスが必要です >

< input type = “password” id = “userpass” name = “userpass” class = “form-control” placeholder = “password” required >

フォームのアクションを

1. プロジェクトをサーバーにデプロイし、ブラウザを開いて http と入力します。 : //localhost:8080/login/login.jsp、テスト用、正しいユーザー パスワードを入力する場合:

ログイン インスタンス (SSH フレームワーク + ブートストラップ 3+) DWR+ AJAX)

DWR 環境の準備

(1) dwr 環境パッケージをダウンロードします。ここでは dwr3.x.jar を使用し、dwr.jar を WebRoot/WEB-INF/lib にコピーします。前のプロジェクト。

(2) web.xml ファイルを設定します。 web.xml の の前に次のコードを追加して、DWR フレームワークを構成します。

<サーブレット> dwr-invoker<サーブレットクラス> org.directwebremoting.servlet.DwrServlet ; debug > <サーブレット名>dwr-invoker /dwr/*

(3) web.xml と同じディレクトリに新しい dwr.xml (dwr1.x 2.x または 3.x に従って構成) ファイルを作成します。設定は次のとおりです。

"http://www.getahead.ltd.uk/dwr/dwr20.dtd">

DWR インスタンスのテスト

UserinfoAction に次の関数を Java クラスに追加します:

1. // 受信したユーザーのパスワードに基づいてログインの戻り情報を判断します

public

String サインイン(String username, String userpass)

{

String miss= “error” ;

Userinfo user=

new

Userinfo(username,userpass) );

システム。out .println( “55″ );

if ( userinfoService .Login(user))

messes= “成功” ; 🎜> return混乱;

}

dwr.xml ファイルを構成します。 dwr.xml にサインイン メソッドを構成して、アクセスできるようにします。

1. "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

< /allow>

1. フロントビューの login.jsp ファイルの タグの間に次のコードを追加します。

   < src = 'dwr/util.js' >

   < スクリプト タイプ = 'text/javascript' src = 'dwr/engine.js' >

   < script type = 'text/javascript' src = 'dwr/interface/signin.js' > >

   次に、ログイン ボタンの送信イベントを記述します。イベント名は onValidation() です。具体的な実装コードは次のとおりです (
   スクリプト タイプ)。 = “text/javascript” >

   function onValidation()

   {
   signin.signin(document.getElementById( “username” ). value,document.getElementById( “userpass " ).value,signinCallback);
   }

   functionsigninCallback(data){

   if (data== "error" ) alter( "ユーザーまたはパスワードが間違っています" );

   else if (data== "success" ) window.location.href= "success.jsp" ;

   }
   ログインボタンに onClick="onValidation()" として追加し、変更しますtype 属性を type="button" に設定します。
   (4) プロジェクトを実行し、ブラウザを開いて、検証用のユーザー パスワードを入力します: