In the first two articles, we integrated SSH and extracted the interfaces of the service and action parts. It can be said that the basic development environment has been built. In this section, we will build the backend page. Let's discuss two ways of building: frameset-based and easyUI-based. Finally, we will use easyUI to develop.
1. Extract public JSP pages
Let's first look at the current jsp page:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <!-- Omit... --> </c:forEach> </body> </html></span>
Let’s not read the content of the body part first, because these are all used for previous tests. Extracting the JSP page means extracting some common parts into a new JSP page and then including them in the current JSP page. Because later projects will definitely introduce js, css and other files, if written on each jsp page, it will be very redundant, so we have to extract a common jsp to introduce these files and other things. We create a new public folder in the WebRoot directory and create a new head.jspf (jspf represents a JSP fragment for other JSP pages to include).
<%@ 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>Easy Shopping Mall</title> <!-- <script type="text/javascript" src=""></script> <style type="text/css"></style> --></span> The comment part mainly includes js and css, because it has not been used yet, just build a framework and remove it when it is used. The <c:set> tag uses ${pageContext.request.contextPath} to replace ${shop} for easy writing. In this way, the new JSP only needs to include this head.jspf in the future. Let's take a look at the modified index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <body> <!-- Omit... --> </body> </html> </span>
Is there an object-oriented idea?
2. Build a background page based on frameset
2.1 Discovering problems
The template has been extracted, and now we have started to build the background page framework. First, we use frameset to do it. Create a new folder, main in the WEB-INF directory, and create four new jsp files in main: aindex.jsp, top.jsp, left.jsp and right.jsp. Our frameset is written in aindex.jsp. The other three are just written in a simple sentence for testing. Let's take a look at aindex.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <!-- The frame body contains 3+1 pages--> <frameset rows="150,*"> <frame src="top.jsp" /> <frameset cols="150,*"> <frame src="left.jsp" /> <frame src="right.jsp" /> </frameset> </frameset> </html></span>
The structure is very obvious, the page is divided into 3 pieces, and the page is on the left and right. Each module contains the corresponding jsp page, and then we write <a href="/WEN-INF/main/aindex.jsp">test to the background</a> in the body of index.jsp, start tomcat, and find that clicking on the link cannot access the background. The reason is that jsp in the WEB-INF directory cannot be directly redirected, and needs to be redirected through Servlet or Action. There is no way, I can only write a new jump Action.
2.2 Write page jump action
We first write an Action to complete the page redirection. This Action simply implements page redirection and does not handle any business logic.
/** * @Description: TODO (This Action is used to complete the JSP and JSP request forwarding functions in WEB-INF, and this Action does not handle any logic) * @author eson_15 * */ public class SendAction extends ActionSupport { public String execute() { return "send"; } } We can see that SendAction does not inherit the BaseAction we extracted before, but simply inherits the ActionSupport. Then we configure it in the struts.xml file:
<?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 result, valid for all actions in this package--></span> <global-results> <result name="aindex">/WEB-INF/main/aindex.jsp</result> </global-results> <!-- Omit the configuration of other actions...</span> --> <!-- Used to complete the action forwarding of system requests, all requests are handed over to execute--> <action name="send_*_*"> <result name="send">/WEB-INF/{1}/{2}.jsp</result> </action> </package> </struts> Don't forget to configure it in beans.xml: <bean id="sendAction" />.
The reason why two * numbers are assigned in this action is to facilitate access to WEB-INF/*/*.jsp, which requires the agreement on the writing method of the address in jsp. Let's take a look at the writing method in 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"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <!-- The frame body contains 3+1 pages--> <frameset rows="150,*"> <frame src="send_main_top.action" /> <frameset cols="150,*"> <frame src="send_main_left.action" /> <frame src="send_main_right.action" /> </frameset> </frameset> </html></span>
From the modified aindex.jsp, we can see that we do not directly access the jsp under WEB-INF/ (we cannot access it either). We jump through Action, so that we write <a href="send_main_aindex.action">to the body of index.jsp to test it to the background</a>, and then start tomcat, and then click on the link to access the backend home page normally.
Judging from the above process of using frameset to build backend pages, it is quite troublesome. It is included in each page, and frameset is not used in development. EasyUI has only one page, and all requests are AJAX requests. Next, let’s take a look at how to use easyUI to build backend pages.
3. Build a background page based on EasyUI
jQuery EasyUI is a collection of UI plug-ins based on jQuery, and the goal of jQuery EasyUI is to help web developers create a UI interface that is rich in features and beautifully. Developers do not need to write complex JavaScript, nor do they need to have an in-depth understanding of CSS styles. All developers need to know is some simple HTML tags.
3.1 Import EasyUI related components
We first import the components required for EasyUI in the WebRoot directory in the project, and there are downloads on the Internet. I use jquery-easyui-1.3.5 to remove some unnecessary things. The final result is as follows:
3.2 Building an EasyUI environment
We open the head.jspf file we just extracted, import the css and js that EasyUI depends on here, and introduce the jspf file on other pages indirectly introduce the css and js that EasyUI depends on:
<%@ 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>Easy Shopping Mall</title> <!-- Here is the easyi environment--> <link rel="stylesheet" href="${shop }/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link> <link rel="stylesheet" href="${shop }/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link> <script type="text/javascript" src="${shop }/jquery-easyui-1.3.5/jquery.min.js"></script> <script type="text/javascript" src="${shop }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script> <script type="text/javascript" src="${shop }/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script> 3.3 Build a framework for the background
Delete the top.jsp, left.jsp and right.jsp in the WEB-INF/main/ directory because it is no longer available now. Then modify the aindex.jsp page. You can now use EasyUI to do it:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> </head> <body> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'West',split:true"> <!-- The system menu is displayed here --> <div id="aa"> <div data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyi framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">content2</div> <div>content3</div> </div> </div> </div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body> </html>
So many <div>s here are all referenced to the EasyUI description document above, and I posted them below. First carry out the entire layout layout and remove what we don’t need. We only need three parts: north, west and center:
Then add the layout of the accordon classification in the div in the west part and add the code to the head.jspf:
In this way, we have simply built the backend page framework, and in the later stage, we just need to fill in something. Let's test it in index.jsp: <a href="send_main_aindex.action">directly to the background EasyUI version</a>, so that jsp will find the SendAction we just wrote and then jump to EWB-INF/main/aindex.jsp, and the background framework can be displayed correctly, as follows:
At this point, we have successfully built the framework of the background page using EasyUI.
(Note: In the end, I will provide the source code download of the entire project! Everyone is welcome to collect or share)
The source code download address of the entire project: //www.VeVB.COM/article/86099.htm
Original address: http://blog.csdn.net/eson_15/article/details/51312490
The above is the entire content of this article. I hope you can give you a reference and I hope you can support Wulin.com more.