[SaaS-エクスポートプロジェクト] -04フロントデスクでのAdminLTEの紹介と使用開始、AdminLTEの中国語版のダウンロード、およびAdminLTEの紹介ページの作成

1.AdminLTEの概要

1）AdminLTEは、ブートストラップjqueryに基づいて構築されており、テンプレートテーマツール（完全な応答の管理用テンプレート）の収益を上回っています。ダッシュボード、メール、カレンダー、ロック画面、ログインと登録、404エラー、500エラー、その他のページを含む組み込みの複数のページ。

2）AdminLTEはGitHubでホストされており、次のアドレスからアクセスしてダウンロードできます：https：//github.com/ColorlibHQ/AdminLTE/releases

公式のオリジナルバージョン（英語）：https：//adminlte.io/
もクローン化してgitcloneで使用できます
git clone https://github.com/almasaeed2010/AdminLTE.git

中国語版のダウンロードリンク：
adminlte2-pro-master中国語版、抽出コード[8888]
ディレクトリ構造：
ここに写真の説明を挿入
基本的な使用法release/distは、ディレクトリ内の4つのファイルを使用するだけでよく、

release/dist/pages/all-admin-datalist.html効果はおそらく次のようになります。基本的に必要なすべての機能です。
ここに写真の説明を挿入

3）AdminLTEの機能

AdminLTEにはJQueryおよびBootstrap3フレームワークが付属しており、個別にダウンロードする必要はありません。
一連の応答性の高い再利用可能なコンポーネントを提供し、必要に応じてリアルタイムで調整できるさまざまなカラーマッチングスキンを備えた複数のテンプレートページが組み込まれています。
複数の画面解像度に適応し、PCおよびモバイル端末と互換性があります（コンピューターおよび携帯電話は自動的に画面解像度に適応します）。
応答性の高いHtml5Webサイトをすばやく作成できます。
AdminLTEは美しいだけでなく、多くのCSSやJSを作成する手間を省きます。

[注]のソース・ファイル・パッケージにAdminLTE二つアイコンプラグイン4.6.3-フォント素晴らしいとionicons-2.0.1は、欠落しているされ、ロードにCDNの形ネットワークが良好でない場合、負荷が困難であり得ます。または遅い場合は、ローカル静的ファイルの形式を使用するのが最善です。解決策は、これら2つのプラグインを含めることです。これらは直接使用できます。もちろん、自分でダウンロードしてインストールすることもできます。

2.AdminLTEエントリープログラムの使用

2.1アイデアはWebプロジェクトを作成し、css / js静的リソースを導入します

Webプロジェクトディレクトリへのadminlte2-pro-master/release/dist次のパス。pagesディレクトリのhtmlテンプレート。必要に応じてインポートすることもできます（このエントリはページのみを使用します）css、img、pages、pluginswebappall-admin-datalist.html
ここに写真の説明を挿入

2.2Web基本パッケージの依存関係をインポートする

 <!--web基础包 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

2.3 release / dist / pages`all-admin-datalist.html`をテンプレートとしてindex.jspにコピーします

jspヘッダーファイルを追加する必要があります

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

デプロイして実行し、アクセスできるかどうかを確認します。
ここに写真の説明を挿入
上の図では、スタイルがないことがわかりました。12を開いてネットワークの状況を表示し、（多数のエラー）を見つけました

。404エラーの理由：../たとえば…/plugins ../css ../img、テンプレートのパスが使用されています。パスはプロジェクトパスではありません。
解決策：JSP内の現在のプロジェクトのパスを取得します：
<% pageContext.setAttribute("path",request.getContextPath()); %>
その後Ctrl+Shift+R。ワンクリックの交換で現在のプロジェクトパスパスを交換するために../plugins例../plugins替换为${path}/plugins、CSSとIMGは同じ操作です

…/プラグインが${path}/plugins
…に置き換えられました/ cssが${path}/css
…/ imgに置き換えられました${path}/img

ここに写真の説明を挿入

すべてのコストアイテムパスを置き換えたところ、表示は正常であり、エラーはありませんでした。
ここに写真の説明を挿入

2.4テンプレートを使用して左側のメニューバーを作成する

左側のメニューバーのコードを見つけて、すべて取り出し、left_menu.jspページを再作成して配置します（将来の管理と変更のために）

left_menu.jspには、JSPヘッダーファイルと現在のプロジェクトパスが必要です。

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%    pageContext.setAttribute("path",request.getContextPath()); %>

次に、表示されたものに応じて変更し、削除して増やします。その後、テスト表示は正常であり、他の位置も引き出して変更することができます。
引き出した後、メインページindex.jspは左側のメニューバーページを導入する必要があります

	<%--导入左侧菜单栏 --%>
    <jsp:include page="left_menu.jsp"/>

たとえば、左側のメニューバー（ナビゲーションバー）の表示を変更します。
ここに写真の説明を挿入