Auparavant, nous avons utilisé EasyUi et SSH pour construire le cadre de base du backend et faire les fonctions de base du backend, y compris la gestion des catégories de produits et la gestion des produits. Dans cette section, nous avons commencé à construire la page Frontend.
L'idée de faire de la page d'accueil: en supposant que la logique commerciale des produits est maintenant disponible, nous devons d'abord créer un auditeur et interroger les données sur la page d'accueil et les mettre dans l'application au début du projet, c'est-à-dire appeler la méthode de la logique commerciale des produits back-end dans l'auditeur.
1. Page d'accueil Logique d'affichage du produit
Sur la page d'accueil, nous affichons uniquement les premiers produits dans les catégories de produits chauds, tels que les loisirs pour enfants, les loisirs des femmes et les loisirs pour hommes. Nous aurons trois sections pour afficher différentes catégories de produits, et plusieurs produits spécifiques seront affichés dans chaque catégorie. Si nous voulons implémenter une telle page d'accueil, quelles données avons-nous besoin pour interroger? Tout d'abord, c'est certainement une catégorie de sujet brûlant, c'est-à-dire des éléments de requête dans la base de données pour lesquels la catégorie est un sujet brûlant, puis des produits de requête en cascade de cette catégorie à partir de la base de données basée sur la catégorie de sujet brûlant, afin que nous ayons toutes les données que nous voulons. Faisons d'abord ces services de requête en arrière-plan:
// CatégorieService Interface interface publique Catégorie de service étend BaseService <catégories> {// omettre d'autres méthodes ... // requête catégories de ponctes chaudes ou non hot basées sur les valeurs de Boelen Liste publique <Catégorie> QueryByhot (boolean hot); } @SuppressWarnings ("Unchecked") @Service ("CatégoryService") Catégorie de la classe PublicServiceImpl étend BaseServiceIMPL <catégories> Implementation Catégorie Service {// Omit d'autres méthodes ... @Override Public List <Catégorie> QueryByhot (Boolean) HOT) {String hql = " return getSession (). CreateQuery (hql) .setboolean ("hot", hot) .list (); }} // Interface de ProductService Interface publique ProduceService étend BaseService <Rudding> {// omettre d'autres méthodes ... // Requête des produits recommandés basés sur des catégories chaudes (seulement les 4 premières 4) Liste publique <Dudce> QuerByCategoryId (int CID); } @SuppressWarnings ("Unchecked") @Service ("ProductService") Public Class ProductServiceImpl étend BaseServiceImpl <Product> ImplementerService {// Omit d'autres méthodes ... @Override Public List <Product> QuerByCategoryId (int CID) {WHERE HICH HQL = "From Product Pench P.Category" + "+" WHERE P.COMMEND = P. et P. P.Category.id =: CID Order par P.Date Desc "; return getSession (). CreateQuery (hql) .setInteger ("cid", cid) .setFirStResult (0) .setMaxResults (4) .list (); }} 2. Créez un initDatalistener pour obtenir des données de page d'accueil
L'arrière-plan a terminé l'activité de logique d'affichage du produit et nous commencerons à obtenir les données requises. Créer d'abord un écouteur initDatalistener hérite de servletContextListener. Pour comment l'auditeur obtient le fichier de configuration de Spring, veuillez vous référer à ce billet de blog: comment l'auditeur obtient le fichier de configuration de Spring
// @ composant // L'auditeur est un composant de la couche Web. Il est instancié par Tomcat, pas le printemps. Impossible de placer dans la classe publique de printemps initDatalistener implémente servletContextListener {Private ProductService ProductService = NULL; catégorie privée catégorie de service = null; Private applicationContext context = null; @Override public void contextDestRoyed (ServletContexTevent Event) {// TODO Méthode générée automatiquement Stub} @Override public void contextinitialialialialized (ServletContexTevent Event) {contextServletContext ()); categoryService = (catégoryService) context.getBean ("catégorieService"); // Catégorie de catégorie Informations ProductionService = (ProductService) context.getBean ("ProductService"); // Charger la liste des informations du produit <list <Product>> bigList = new ArrayList <list <produit >> (); // Biglist stocke une liste avec la classe de catégorie dans Biglist // 1. Interrogez la catégorie Hot Spot pour (catégorie Catégorie: catégorieService.QueryBot (true)) {// Get recommandée des informations sur les produits basés sur la liste d'identité de catégorie Hot Spot <Product>; biglist.add (LST); // Mettez la liste avec la catégorie dans BigList} // 2. Laissez la requête Biglist à l'événement d'objet intégré.getServletContext (). SetAttribute ("BigList", BigList); }} OK, maintenant toutes les données sont placées dans la collection Biglist.
3. Page d'accueil de la page UI Conception
Nous obtiendrons le modèle de l'artiste sur la page d'accueil de l'interface utilisateur. Ce modèle est HTML. Tout ce que nous avons à faire est de le changer en JSP, puis d'afficher les données dans la collection Biglist sur la page d'accueil. Tout d'abord, nous copie l'image et le CSS requis par le modèle dans le répertoire WebRoot, puis introduisons ces deux fichiers dans webroot / public / head.jspf, car Head.jspf est un en-tête public que d'autres pages doivent inclure:
Ensuite, intégrez le HTML dans le modèle dans la page d'accueil index.jsp sur la réception et utilisez la balise JSTL pour modifier le contenu d'affichage, comme indiqué ci-dessous (seulement les captures d'écran pour afficher la partie du produit):
Maintenant, nous entrons dans la page Backend Ajouter le produit que nous avons fait auparavant, ajoutez quelques produits à la classe décontractée féminine, puis commencez à Tomcat et exécutez la page d'accueil index.jsp, l'effet est le suivant:
D'accord, l'interface de l'interface utilisateur de la réception a été configurée et l'étape suivante consiste à terminer différentes entreprises.
Adresse originale: http://blog.csdn.net/eson_15/article/details/51373403
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.