Zuvor haben wir Easyui und SSH verwendet, um den grundlegenden Rahmen des Backends zu erstellen und die grundlegenden Funktionen des Backends, einschließlich der Verwaltung von Produktkategorien und Produktmanagement, zu erfüllen. In diesem Abschnitt begannen wir, die Frontend -Seite zu bauen.
Die Idee der Homepage: Angenommen, die Geschäftslogik von Produkten ist jetzt verfügbar, müssen wir zunächst einen Hörer erstellen, die Daten auf der Startseite abfragen und sie in die Anwendung einfügen, wenn das Projekt startet, dh die Methode der Back-End-Produkt-Business-Logik im Hörer.
1. Homepage -Produktanzeigelogik
Auf der Homepage zeigen wir nur die ersten Produkte in den Kategorien heißer Produkte, wie die Freizeit der Kinder, die Freizeit von Frauen und die Freizeit von Männern. Wir haben drei Abschnitte, um verschiedene Produktkategorien anzuzeigen, und in jeder Kategorie werden mehrere spezifische Produkte angezeigt. Wenn wir eine solche Homepage implementieren möchten, welche Daten müssen wir abfragen? Erstens ist es definitiv eine heiße Thema Kategorie, dh Fragen in der Datenbank, für die die Kategorie ein heißes Thema ist, und anschließend Abfrageprodukte dieser Kategorie aus der Datenbank basierend auf der Kategorie heißer Thema, damit wir alle gewünschten Daten haben. Lassen Sie uns zuerst diese Abfragedienste im Hintergrund abschließen:
// CategoryService Interface Public Interface CategoryService erweitert BaseSeService <kategorie> {// andere Methoden weglassen ... // Kategorien mit Hot- oder Nicht-Hot-Spot basierend auf den Boelen-Werten öffentliche Liste <kategorie> querybyHot (boolean hot); } @SuppressWarnings ("deaktiviert") @Service ("categoryService") öffentliche Klassen -CategoryServiceImpl erweitert BaseSeServiceImpl <category> implementiert categoryService {// andere Methoden ... @Override public list <kategorie> kategorie> queryByHot (boolean) {string hql = aus category c: conc.hot = motiT) {String hql = aus category C: c.hot = hot) {String hql = "from Category c, wobei c.hot = hot) {String hql =" from Category c "; return getSession (). CreateEquery (HQL) .setboolean ("Hot", Hot) .List (); }} // ProductService Interface Public Interface ProductService erweitert BaseSeService <produkt> {// andere Methoden weglassen ... // empfohlene Produkte basierend auf heißen Kategorien (nur der ersten 4) öffentliche Liste <produkt> querByCategoryID (int CID); } @SuppressWarnings ("Unbekämpft") @Service ("ProductService") PUBLIC CLASSELSPRODUCTSIVICEIMPL erweitert BaseSeServiceImPl <Product> implementiert ProductService {// andere Methoden aus. p.category.id =: cid order von p.date desc "; return getSession (). createEquery (HQL) .setInteger ("cid", cid) .setFirstresult (0) .setMaxResults (4) .List (); }} 2. Erstellen Sie einen Initdatalistener, um Homepage -Daten zu erhalten
Der Hintergrund hat das Produktdisplay -Logikgeschäft abgeschlossen, und wir werden die erforderlichen Daten abrufen. Erstellen Sie zunächst einen Hörer initdatalistener erben servletContextListener. Wie der Hörer die Frühlingskonfigurationsdatei erhält
//@component // Listener ist eine Komponente der Webschicht. Es wird durch Tomcat instanziiert, nicht von Frühling. Kann nicht in die Frühlingsklasse eingebracht werden Initdatalistener implementiert servletContextListener {private productService productService = null; private categoryService categoryService = null; private applicationContext context = null; @Override public void contextDestroyed (servletContexevent Ereignis) {// Todo Auto-Generated-Methode Stub} @Override public void contextInitialized (ServletConteEvent Ereignis) {context = webapplicationContextils.getwebaplicationContext (Event.GetServletContext (); categoryService = (categoryService) context.getBean ("categoryService"); // Kategorie Informationsprodukte protousService = (ProductService) context.getBean ("ProductService"); // Produktinformationsliste <Produkt >> bigList = new ArrayList <Liste <produkts laden <produkts <produkte >> (); // BigList speichert eine Liste mit der Kategorieklasse in BigList // 1. Fragen Sie die Hotspot -Kategorie für (Kategorie Kategorie: Kategorieservice ab BigList.Add (LST); // Die Liste mit der Kategorie in BigList} // 2. Überlassen Sie die Abfrage BigList dem integrierten Objekt-Ereignis.getServletContext (). }} OK, jetzt werden alle Daten in die Biglist -Sammlung eingerichtet.
3. Design der Homepage -UI -Seitendesign
Wir werden die Vorlage vom Künstler auf der UI -Homepage erhalten. Diese Vorlage ist HTML. Alles, was wir tun müssen, ist es in unserem JSP zu ändern und dann die Daten in der BigList -Sammlung auf der Homepage anzuzeigen. Zunächst kopieren wir das Bild und das CSS, das die Vorlage in das Webroot -Verzeichnis benötigt, und stellen dann diese beiden Dateien in Webroot/public/head.jspf ein, da Head.jspf ein öffentlicher Kopf ist, den andere Seiten enthalten müssen:
Schalten Sie die HTML in die Vorlage in den Index.jsp auf der Homepage an der Rezeption ein und verwenden Sie das JSTL -Tag, um den Anzeigeinhalt zu ändern, wie unten gezeigt (nur die Screenshots zum Anzeigen des Produktteils):
Jetzt geben wir die Backend -Add -Produktseite ein, die wir zuvor gemacht haben, ein paar Produkte zur weiblichen Freizeitklasse hinzufügen, dann mit Tomcat beginnen und den Homepage Index.jsp ausführen. Der Effekt ist wie folgt:
Okay, die UI -Schnittstelle an der Rezeption wurde eingerichtet, und der nächste Schritt besteht darin, einige verschiedene Unternehmen auszuführen.
Originaladresse: http://blog.csdn.net/eson_15/article/details/51373403
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.