Java+SSH+Bootstrap 開発ノート_html/css_WEB-ITnose-htmlチュートリアル-php.cn

JDK+Tomcat+MyEclipse 開発環境構築

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

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

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

Web テスト環境

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

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

MyEclipse 構成 SSH フレームワーク

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

DWR 環境の準備

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

Jun 21, 2016 am 08:54 AM

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 フレームワーク

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

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

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

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

<コントローラー

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

</controller>

<message-resourcesparameter=”com.

<plug-in className=”org.springframework.web.struts. ContextLoaderPlugIn”>

<set-property=”contextConfigLocation”

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

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

<!–springcoding filter start –>

<フィルタ名>encodingFilter</フィルタ名>

org.springframework.web.filter.CharacterEncodingFilter

;/フィルタークラス>

エンコーディング

-8</param -value>

</init-param>

<param-name>forceEncoding</param-名前>

<パラメータ値> true

</init-param>

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

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

<url-pattern>/*</url-pattern>

< /filter-mapping>

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

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

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

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

文字列パス = request.getContextPath (); >

%> ; <! DOCTYPE html >

&lt ;head>

“utf-8″

<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>

<!– Bootstrap 核心 CSS –>

<!— 自己编写的 css 文件 –>

</head>

<body>

<label>

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

</label>

</div>

</form>

</div>

</html>

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

サービス
;

com

pojo

ユーザー情報

;

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 ( “エラー” );

}

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

依存関係の挿入 –>

<プロパティ名=”userinfoService”><ref bean=”userinfoService” /></property>

</bean>

ここの赤色のマークは struts-config に対応します。 .xml 対応するアクションのパスは「/userinfo」で、これはアクションの名前です。ビュー層はこのアクションを呼び出すことができ、Struts は Spring を通じてそれを実行します (ここでは Spring は Struts アクションを管理するために使用されます)。

ビューレイヤーの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 >

フォームのアクションを <form に変更しますclass=”form-signin” action=”userinfo.do?method= Loginexecute”method=”post”>

プロジェクトをサーバーにデプロイし、ブラウザを開いて 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 の </web-app> の前に次のコードを追加して、DWR フレームワークを構成します。

<サーブレット> dwr-invoker<サーブレットクラス> org.directwebremoting.servlet.DwrServlet </サーブレットクラス> ; <param-name>debug</param-value> </init-param</servlet-mapping> > <サーブレット名>dwr-invoker</サーブレット名> <url-pattern>/dwr/*</url-pattern>

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

<!DOCTYPE dwr PUBLIC “-//GetAhead Limited/ /DTD ダイレクト Web リモーティング 2.0//EN"

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

<dwr>

</allow>

DWR インスタンスのテスト

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

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

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 にサインインメソッドを構成して、アクセスできるようにします。

<? xml version=”1.0″ encode=”UTF-8″?>

<!DOCTYPE dwr PUBLIC “-//GetAhead Limited/ /DTD ダイレクト Web リモーティング 2.0//EN"

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

<dwr>

<allow>

<!– javascript の値は生成される js ファイルの名前 (フロントエンドで呼び出されるメソッド)、create="spring" は作成される DWR クラスですby spring–>

<!– のパスに対応する Bean 値を使用します。 struts の対応するアクション ->

<!– このアクションクラスのメソッドサインインは次のようになります。フロントビューからアクセス –

</create>

<!– アクションを Bean に変換します。以前の Beanname で使用するため –

< /allow>

</dwr>

フロントビューの login.jsp ファイルの <head> タグの間に次のコードを追加します。
< src = 'dwr/util.js' ></ スクリプト >

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

< script type = 'text/javascript' src = 'dwr/interface/signin.js' ></ script ><!— 最後の行になければなりません –> >
次に、ログインボタンの送信イベントを記述します。イベント名は 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" ;
}

</ script >

ログインボタンに onClick="onValidation()" として追加し、変更しますtype 属性を type="button" に設定します。

(4) プロジェクトを実行し、ブラウザを開いて、検証用のユーザーパスワードを入力します: