以前は、EasyUIとSSHを使用して、バックエンドの基本的なフレームワークを構築し、製品カテゴリと製品管理の管理など、バックエンドの基本機能を実行しました。このセクションでは、フロントエンドページの構築を開始しました。
ホームページを作成するというアイデア：製品のビジネスロジックが利用可能になったと仮定して、最初にリスナーを作成し、ホームページのデータを照会し、プロジェクトが開始されたときにアプリケーションに入れてください。つまり、リスナーのバックエンド製品ビジネスロジックの方法を呼び出します。
1.ホームページ製品表示ロジック
ホームページには、子供向けのレジャー、女性の余暇、男性のレジャーなど、ホット製品カテゴリに最初のいくつかの製品のみを表示します。さまざまな製品カテゴリを表示する3つのセクションがあり、各カテゴリにいくつかの特定の製品が表示されます。このようなホームページを実装したい場合、どのデータをクエリする必要がありますか？まず第一に、それは間違いなくホットトピックカテゴリです。つまり、カテゴリがホットトピックであるデータベース内のQueryアイテム、そしてHotトピックカテゴリに基づいてそのカテゴリのカテゴリの製品をクエリクエリするため、必要なすべてのデータがあります。最初にこれらのクエリサービスをバックグラウンドで完了しましょう。
// categoryServiceインターフェイスパブリックインターフェイスカテゴリサービス拡張baseService <カテゴリ> {//他のメソッドを省略... // boelen値に基づくクエリホットまたは非ホットスポットカテゴリパブリックリスト<カテゴリ> querybyhot（boolean hot）; } @suppresswarnings（ "Unchecked"）@Service（ "CategoryService"）Public Class CategoryServiceimpl拡張BaseSeServiceImpl <Category> CategoryService {// Omit other Method ... return getsession（）。create query（hql）.setboolean（ "hot"、hot）.list（）; }} // ProductserviceインターフェイスパブリックインターフェイスProductserviceはBaseService <Product> {//他のメソッドを省略します... //ホットカテゴリに基づく推奨製品（最初の4つのみ）パブリックリスト<製品> querbycategoryid（int cid）; } @suppresswarnings（ "Unchecked"）@service（ "Productervice"）Public Class ProductsErviceImpl拡張BaseServiceImpl <Product> Productservice {// Onit Other Method ... p.category.id =：p.date desc "によるcid order"; return getsession（）。create query（hql）.setinteger（ "cid"、cid）.setfirstreSult（0）.setMaxResults（4）.list（）; }} 2。initdatalistenerを作成して、ホームページデータを取得します
背景は製品ディスプレイロジックビジネスを完了しており、必要なデータの取得を開始します。最初にリスナーの作成initdatalistener servletcontextListenerを継承します。リスナーがSpring構成ファイルを取得する方法については、このブログ投稿を参照してください：リスナーがSpring構成ファイルを取得する方法
//@component //リスナーはWebレイヤーのコンポーネントです。春ではなく、Tomcatによってインスタンス化されています。春の公開クラスに置くことはできませんinitdatalistener servletcontextlistener {private productservice productservice = null;プライベートカテゴリサービスカテゴリサービス= null; Private ApplicationContext Context = null; @Override public void contextDestroyed（servletContextevent Event）{// todo auto-enerated method stub} @override public void contextInitialized（servletcontextevent event）{context = webapplicationcontextutils.getwebapplicationContext（event.getServletContext（）; categoryService =（categoryService）Context.getBean（ "CategoryService"）; // Category Information Productservice =（Productservice）Context.GetBean（ "Productservice"）; // Load Product Information List <List <List <製品>> biglist = new arraylist <list <product >>（）; // BigListは、BigListのカテゴリクラスのリストを保存します。//1。クエリ（カテゴリカテゴリ：カテゴリService.QueryByHot（true））{//ホットスポットカテゴリIDリスト<製品リスト> lst = procedervice.querbycategoryid（categry.getid（））に基づいて推奨される製品情報を取得します。 biglist.add（lst）; //カテゴリをbiglist}に配置する} //2。クエリBiglistを組み込みオブジェクトEvent.getServletContext（）。setAttribute（ "biglist"、biglist）に残します。 }}さて、すべてのデータがBigListコレクションに入れられます。
3.ホームページUIページデザイン
UIホームページでアーティストからテンプレートを入手します。このテンプレートはHTMLです。私たちがしなければならないのは、JSPに変更してから、ホームページのBigListコレクションにデータを表示することだけです。まず、テンプレートで必要な画像とCSSをWebrootディレクトリにコピーし、Webroot/public/head.jspfにこれら2つのファイルを導入します。
次に、テンプレートにHTMLをフロントデスクのホームページのindex.jspに埋め込み、JSTLタグを使用して表示コンテンツを変更します（以下に示すように）（製品部品を表示するスクリーンショットのみ）。
次に、以前に行ったバックエンドの追加製品ページを入力し、女性のカジュアルクラスにいくつかの製品を追加してから、Tomcatを開始し、ホームページindex.jspを実行すると、効果は次のとおりです。
さて、フロントデスクUIインターフェイスがセットアップされており、次のステップはいくつかの異なるビジネスを完了することです。
オリジナルアドレス：http：//blog.csdn.net/eson_15/article/details/51373403
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。