В первых двух статьях мы интегрировали SSH и извлекли интерфейсы деталей обслуживания и действий. Можно сказать, что основная среда разработки была построена. В этом разделе мы построим страницу бэкэнд. Давайте обсудим два способа построения: основанные на фрейме и EasyUI. Наконец, мы будем использовать EasyUI для разработки.
1. Извлечение публичных страниц JSP
Давайте сначала посмотрим на текущую страницу JSP:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <! doctpe html public "-//w3c // dtd httm.01.01. <html> <head> </head> <body> <!-опустить ...-> </c: foreach> </body> </html> </span>
Давайте сначала не будем читать содержание части тела, потому что все они используются для предыдущих тестов. Извлечение страницы JSP означает извлечение некоторых общих частей в новую страницу JSP, а затем включать их на текущую страницу JSP. Поскольку более поздние проекты определенно будут представлять JS, CSS и другие файлы, если они будут написаны на каждой странице JSP, он будет очень избыточным, поэтому мы должны извлечь общий JSP, чтобы представить эти файлы и другие вещи. Мы создаем новую публичную папку в каталоге WebRoot и создаем новый Head.jspf (JSPF представляет фрагмент JSP для других страниц JSP, чтобы включить).
<%@ page language = "java" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set value = "$ {pagecontext.request.contextpath}" var = "shop"/> <$ {title. <script type = "text/javascript" src = ""> </script> <style type = "text/css"> </style> -> </span> Часть комментария в основном включает в себя JS и CSS, потому что она еще не использовалась, просто создайте структуру и удалите его при использовании. Тег <C: set> использует $ {pagecontext.request.contextPath} для замены $ {Shop} для простого написания. Таким образом, новый JSP должен включить этот Head.jspf в будущем. Давайте посмотрим на измененный index.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <cead> <%@ include = "/public/head.jsp"%> </hod> <%@ include = "/public.jsp". </body> </html> </span>
Есть ли объектно-ориентированная идея?
2. Создайте фоновую страницу на основе кадров
2.1 Обнаружение проблем
Шаблон был извлечен, и теперь мы начали создавать основу для фоновой страницы. Во -первых, мы используем Frameset для этого. Создайте новую папку, Main в каталоге Web-Inf и создайте четыре новых файла JSP в Main: aindex.jsp, top.jsp, left.jsp и right.jsp. Наш фреймсет написан в aindex.jsp. Остальные три написаны в простом предложении для тестирования. Давайте посмотрим на aindex.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <%@ inclode file = "/public. Стр.
Структура очень очевидна, страница разделена на 3 части, а страница слева и вправо. Каждый модуль содержит соответствующую страницу JSP, а затем мы пишем <a href = "/wen-inf/main/aindex.jsp"> тестирование на фоне </a> в теле index.jsp, запустите Tomcat и обнаружите, что нажатие на ссылку не может получить доступ к фону. Причина в том, что JSP в каталоге Web-Inf не может быть перенаправлен и должен быть перенаправлен с помощью сервлета или действий. Там нет никакого способа, я могу написать только новое действие прыжков.
2.2 Запись страницы
Сначала мы пишем действие, чтобы завершить перенаправление страницы. Это действие просто реализует перенаправление страницы и не обрабатывает никакой бизнес -логики.
/ ** * @description: todo (это действие используется для выполнения функций пересылки JSP и JSP в Web-Inf, и это действие не обрабатывает никакой логики) * @author eSon_15 * */ public class sendAction extendsupport {public String execute () {return "Send"; }} Мы видим, что отправка не наследует базазакцию, которую мы извлекали ранее, а просто наследуют действия. Затем мы настроим его в файле struts.xml:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <package name="shop" extends="struts-default"> <!-- Global Результат, действителен для всех действий в этом пакете-> </span> <blodal-results> <result name = "aIndex">/web-inf/main/aindex.jsp </result> </global-results> <!-Пропустить конфигурацию других действий ... </span>-> <! name = "send">/web-inf/{1}/{2} .jsp </result> </action> </package> </struts> Не забудьте настроить его в beans.xml: <bean id = "sendaction" />.
Причина, по которой в этом действии присваиваются два номера, заключается в том, чтобы облегчить доступ к Web-Inf/*/*. JSP, который требует соглашения по методу написания адреса в JSP. Давайте посмотрим на метод написания в aindex.jsp:
<span style = "font-family: microsoft yahei;"> <%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 Transitional//en file = " /public /head.jspf" %> < /head> <!-Тело кадра содержит 3+1 страницы-> <Frameset Rows = "150,*"> <кадр src = "send_main_top.action" /> <Frameset Cols = "150,*"> <crame src = "send_main_left.action" /> <110,*" </frameset> </frameset> </html> </span>
Из модифицированного aindex.jsp мы видим, что мы не имеем непосредственного доступа к JSP в соответствии с Web-Inf/ (мы также не можем получить к нему доступ). Мы прыгаем через действие, чтобы мы пишем <a href = "send_main_aindex.action"> в тело index.jsp, чтобы проверить его на фоне </a>, а затем запустить Tomcat, а затем нажимать на ссылку, чтобы добраться до дома на домашней странице.
Судя по вышеуказанному процессу использования кадров для создания бэкэнд -страниц, это довольно хлопотно. Он включен в каждую страницу, а Frameset не используется в разработке. EasyUI имеет только одну страницу, и все запросы являются запросами AJAX. Затем давайте посмотрим, как использовать EasyUI для строительства бэкэнд -страниц.
3. Создайте фоновую страницу на основе EasyUI
JQUERY EasyUI-это коллекция плагинов пользовательского интерфейса, основанной на JQUERY, и цель JQUERY Easy-помочь веб-разработчикам создать интерфейс пользовательского интерфейса, богатый функциями и красиво. Разработчикам не нужно писать сложный JavaScript, и им не нужно иметь глубокое понимание стилей CSS. Все разработчики должны знать, это некоторые простые HTML -теги.
3.1 Компоненты импорта EasyUI
Сначала мы импортируем компоненты, необходимые для EasyUI в каталоге WebRoot в проекте, и в Интернете есть загрузки. Я использую jquery-asyui-1.3.5, чтобы удалить ненужные вещи. Окончательный результат заключается в следующем:
3.2 Создание среды EasyUI
Мы открываем файл head.jspf, который мы только что извлекли, импортируем CSS и JS, который зависит от EasyUI, и вводим файл JSPF на других страницах косвенно представлять CSS и JS, что EasyUI зависит от: зависит от: зависит от: от: зависит от: от: EasyUI.
<%@ page language = "java" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set value = "$ {pagecontext.request.contextpath}" Среда easy-> <link rel = "stylesheet" href = "$ {shop} /jquery-asyui-1.3.5/themes/icon.css" type = "text/css"> </link> <link rel = "stylesship" href = "$ {shop} /jquery-1.3.5/thef. type = "text/css"> </link> <script type = "text/javascript" src = "$ {shop} /jquery-asyui-1.3.5/jquery.min.js"> </script> <script type = "text/javascript" src = "$ {shop> <script type =" } /jquery-easyui-1.3.5/jquery.easyui.min.js "> </script> <script type =" text/javascript "src =" $ {shop} /jquery-asyui-1.3.5/locale/easyui-lang-zh_cn.js "> </script> 3.3 Создайте структуру для фона
Удалите top.jsp, left.jsp и right.jsp в Web-Inf/ Main/ Directory, потому что он больше не доступен сейчас. Затем измените страницу aindex.jsp. Теперь вы можете использовать easyui, чтобы сделать это:
<%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <cead> <%@ incomee = "/public. data-options = "Регион: 'North', название: 'North Title', Split: True" style = "Высота: 100px;"> </div> <div Data-options = "Регион:" Запад ", Название:« Запад », разделение: true»> <!-Системное меню отображается здесь-> <div id = "aa"> <div Data-options = "iconcls: 'Icon-save" "icon-save" "icon-save" "icon-save" "icon-save" "div-option Style = "Overflow: Auto; Padding: 10px;"> <h3 style = "color:#0099ff;"> Аккордеон для jQuery </h3> <p> аккордеон является частью Framework для jQuery. Это позволяет вам легче определять ваш аккордеонный компонент на веб-странице. Style = "Padding: 5px; фон: #Eee;"> </div> </body> </html>
Здесь так много <Div> ссылаются на документ Easyui описание выше, и я разместил их ниже. Сначала выполните весь макет и удалите то, что нам не нужно. Нам нужны только три части: север, запад и центр:
Затем добавьте макет классификации Accoron в Div в западной части и добавьте код в head.jspf:
Таким образом, мы просто создали структуру бэкэнд -страницы, и на более позднем этапе нам просто нужно что -то заполнить. Давайте проверим его в index.jsp: <a href = "send_main_aindex.action"> непосредственно на фоновую версию EasyU
На этом этапе мы успешно создали структуру фоновой страницы с помощью EasyUI.
(Примечание: В конце концов, я предоставлю исходный код загрузку всего проекта! Приглашаем ли каждый сбор или поделиться)
Адрес загрузки исходного кода всего проекта: //www.vevb.com/article/86099.htm
Оригинальный адрес: http://blog.csdn.net/eson_15/article/details/51312490
Вышеуказанное - все содержание этой статьи. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.