Ранее мы использовали EasyUI и SSH для создания основной основы бэкэнда и выполнения основных функций бэкэнда, включая управление категориями продуктов и управление продуктами. В этом разделе мы начали строить страницу Frontend.
Идея создания домашней страницы: при условии, что в настоящее время доступна бизнес-логика продуктов, сначала нам нужно создать слушателя, и запросить данные на домашней странице и поместить его в приложение, когда проект начинается, то есть вызывает метод бизнес-логики продукта в слушателе.
1. Логика отображения продукта домашней страницы
На домашней странице мы отображаем только первые несколько продуктов в категориях горячих продуктов, таких как детское досуг, женский досуг и мужской досуг. У нас будет три раздела для отображения различных категорий продуктов, и в каждой категории будет отображаться несколько конкретных продуктов. Если мы хотим реализовать такую домашнюю страницу, какие данные нам нужны для запроса? Прежде всего, это определенно категория горячей темы, то есть элементы запроса в базе данных, для которой категория является горячей темой, а затем каскадные запросы этой категории из базы данных на основе категории горячей темы, чтобы у нас были все данные, которые мы хотим. Давайте сначала заполним эти услуги запросов на заднем плане:
// категория интерфейса интерфейса общедоступного интерфейса CategoryService Extends BaseService <Категория> {// Опустить другие методы ... // Query Hot или не HOT Spot Categories на основе общественного списка Boelen <Категория> QueryByhot (Boolean Hot); } @Suppresswarnings ("unchecked") @service ("категория -сервис") общедоступной категории класса ServiceImpl расширяет baseServiceImpl <Категория> реализует категорию {// Опустить другие методы ... @Override public list <Категория> Querybyhot (Boolean) hot) {string hql = "из категории cwery crate hrhot exhot exhot exhot ="; return getSession (). CreateQuery (hql) .setboolean ("hot", hot) .list (); }} // интерфейс ProductService Public Interface Productservice Extends BaseRvice <Продукт> {// Опустить другие методы ... // Рекомендуемые продукты запроса на основе горячих категорий (только первые 4) Общедоступный список <drop> QuerbyCategoryId (int cid); } @SuppressWarnings("unchecked") @Service("productService") public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService { //Omit other methods... @Override public List<Product> querByCategoryId(int cid) { String hql = "from Product p join fetch p.category " + "where p.commend=true and p.open=true and p.category.id =: cid order by p.date desc "; return getSession (). CreateQuery (hql) .setInteger ("cid", cid) .setfirstresult (0) .setMaxResults (4) .list (); }} 2. Создайте инициатор, чтобы получить данные домашней страницы
Фон завершил бизнес логики отображения продукта, и мы начнем получать необходимые данные. Сначала создайте слушатель initAdatalistener унаследовать ServletContextListener. Для того, как слушатель получает файл конфигурации Spring, пожалуйста, см. В этом блоге: как слушатель получает файл конфигурации Spring
//@Component // Слушатель является компонентом веб -слоя. Это создается Tomcat, а не весной. Нельзя поместить в весенний открытый класс initDatalistener реализует ServletContextLister {productservice productservice = null; частная категория CategoryService = null; Private ApplicationContext context = null; @Override public void contextDestroyed (EventContexTevent Event) {// TODO Auto Generated Method stub} @Override public void contextInitialized (EventContexTextent Event) {context = webApplication contextiltils.getwebpplication context (event.getServletContext ()); CategoryService = (CategoryService) context.getBean ("CategoryService"); // Нагрузка категория Информация productservice = (productservice) context.getbean ("productservice"); // Загрузить информацию о продукте <list <Продукт >> biglist = new arraylist <list <product >> (); // Biglist хранит список с классом категорий в BigList // 1. Запрос категории Hot Spot для (категория категория: CategoryService.QueryByhot (true)) {// get рекомендуется информация о продукте на основе списка идентификационных идентификаторов категории Hot Spot <drop> lst = productservice.querbycategoryid (category.getid ()); biglist.add (lst); // Поместите список с категорией в BigList} // 2. Оставьте запрос Biglist на встроенное event Object.getServletContext (). SetAtTribute ("BigList", BigList); }} Хорошо, теперь все данные помещаются в коллекцию BigList.
3. Дизайн страницы домашней страницы пользовательского интерфейса
Мы получим шаблон от художника на домашней странице пользовательского интерфейса. Этот шаблон HTML. Все, что нам нужно сделать, это изменить его на наш JSP, а затем отобразить данные в коллекции Biglist на домашней странице. Сначала мы копируем изображение и CSS, требуемые шаблоном в каталог WebRoot, а затем вводим эти два файла в WebRoot/public/Head.jspf, потому что Head.jspf - это общедоступный заголовок, который должны включать другие страницы:
Затем введите HTML в шаблон в index.jsp на домашней странице на стойке регистрации и используйте тег JSTL для изменения содержимого дисплея, как показано ниже (только снимки экрана для отображения детали продукта):
Теперь мы вводим страницу Backend Add Product, которую мы делали ранее, добавляем несколько продуктов в повседневное занятие женского пола, затем начинаем Tomcat и запускаем домашнюю страницу index.jsp, эффект заключается в следующем:
Хорошо, был настроен интерфейс пользовательского интерфейса на стойке регистрации, и следующий шаг - завершить различные предприятия.
Оригинальный адрес: http://blog.csdn.net/eson_15/article/details/51373403
Вышеуказанное - все содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.