SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架

2024-09-27 20:28:17

前面两篇，我们整合了SSH并且抽取了service和action部分的接口，可以说基本开发环境已经搭建好了，这一节我们搭建一下后台的页面。我们讨论一下两种搭建方式：基于frameset和基于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" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head> 

 </head> 

 <body>
 <!-- 省略…… -->
 </c:forEach>
 </body>
</html></span>

先撇开body部分的内容不看，因为这都是之前测试用的，抽取JSP页面是指将一些共有部分抽取出来到一个新的JSP页面，然后在当前JSP页面中包含进来。因为后期项目中肯定会引入js、css等文件，如果在每个jsp页面都写的话，会很冗余，所以我们得抽取一个共有的jsp来引入这些文件以及其他东西。我们在WebRoot目录下新建一个public文件夹，在里面新建一个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>易购商城</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>
 <head>
 <%@ include file="/public/head.jspf" %>
 </head> 

 <body>
 <!-- 省略…… -->
 </body>
</html>
</span>

是不是有种面向对象的思想~

2. 基于frameset搭建后台页面
2.1 发现问题
模板抽取好了，现在我们开始搭建后台页面框架了，首先我们使用frameset来做。在WEB-INF目录下新建一个文件夹main用来保存后台的主要页面，在main中新建四个jsp文件：aindex.jsp、top.jsp、left.jsp和right.jsp。我们的frameset写在aindex.jsp中，其他三个只是简单写一句话用来测试，我们来看看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>
<!-- 框架体，里面包含了3+1个页面 -->
<frameset border="5" rows="150,*">
 <frame src="top.jsp" />
 <frameset border="5" cols="150,*">
 <frame src="left.jsp" />
 <frame src="right.jsp" />
 </frameset>
</frameset> 

</html></span>

结构很明显，将页面分为3块，上左右。每个模块包含相应的jsp页面，然后我们在index.jsp的body中写入<a href="/WEN-INF/main/aindex.jsp">测试到后台</a>，启动tomcat，发现点击链接是无法访问到后台的。原因在于WEB-INF目录下的jsp不能直接跳转，需要通过Servlet或者Action来跳转。那没办法，只能新写一个跳转的Action了。
2.2 编写页面跳转的Action
我们首先写一个Action来完成页面的跳转，该Action只是单纯的实现页面跳转，不处理任何业务逻辑。

/**
 * @Description: TODO(此Action用来完成WEB-INF中JSP与JSP请求转发功能，此Action不处理任何的逻辑)
 * @author eson_15
 *
 */
public class SendAction extends ActionSupport { 

 public String execute() {
 return "send";
 }
}

我们可以看出，SendAction没有继承我们之前抽取的BaseAction，只是单纯的继承了ActionSupport。然后我们在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"> 

 <!-- 全局result，对这个package中的所有action有效 --></span>
 <global-results>
 <result name="aindex">/WEB-INF/main/aindex.jsp</result>
 </global-results> 

 <!-- 省略其他action的配置……</span> --> 

 <!-- 用来完成系统 请求转发的action,所有的请求都交给execute-->
 <action name="send_*_*" class="sendAction">
 <result name="send">/WEB-INF/{1}/{2}.jsp</result>
 </action>
 </package> 

</struts>

别忘了在beans.xml中配置：<bean id="sendAction" class="cn.it.shop.action.SendAction" />。
这个action中之所以配两个*号是为了便于访问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">
<html>
<head>
 <%@ include file="/public/head.jspf" %>
</head>
<!-- 框架体，里面包含了3+1个页面 -->
<frameset border="5" rows="150,*">
 <frame src="send_main_top.action" />
 <frameset border="5" cols="150,*">
 <frame src="send_main_left.action" />
 <frame src="send_main_right.action" />
 </frameset>
</frameset> 

</html></span>

从修改后的aindex.jsp中可以看出，我们不直接访问WEB-INF/下的jsp（我们也访问不了），我们通过Action去跳转，这样我们在index.jsp的body中写入<a href="send_main_aindex.action">测试到后台</a>，然后启动tomcat，就可以点开链接正常访问后台主页面了。
从上面使用frameset搭建后台页面的过程来看，还是挺麻烦的，它是一个个页面包含进来的，开发中也不会用frameset，而easyUI只有一个页面，所有的请求都是AJAX请求，接下来我们看一下如何使用easyUI来搭建后台页面。

3. 基于EasyUI搭建后台页面
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
3.1 导入EasyUI相关组件
我们先在工程中的WebRoot目录下导入EasyUI所需要的组件，网上都有下载，我用的是jquery-easyui-1.3.5，去掉一些不需要的东西，最后的结果如下：

3.2 搭建EasyUI的环境
我们打开刚刚抽取出来的head.jspf文件，在这里导入EasyUI所依赖的css和js，其他页面引入该jspf文件即可间接引入了EasyUI所依赖的css和js了：

<%@ 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>易购商城</title> 

<!-- 下面是easyui的环境 -->
<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 搭建后台的框架
将WEB-INF/main/目录下的top.jsp、left.jsp和right.jsp都删掉，因为现在用不上了，然后修改aindex.jsp页面，现在可以使用EasyUI来做了：

<%@ 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 class="easyui-layout">
 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
 <div data-options="region:'west',title:'West',split:true" style="width:200px;">
 <!-- 此处显示的是系统菜单 -->
 <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
 <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
 <h3 style="color:#0099FF;">Accordion for jQuery</h3>
 <p>Accordion is a part of easyui framework for jQuery.
 It lets you define your accordion component on web page more easily.</p>
 </div>
 <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">content2</div>
 <div title="Title3">content3</div>
 </div>
 </div>
 <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
 </body> 

</html>

这里的这么多<div>都是参照上面那个EasyUI的说明文档，我在下面贴出来。先进行整个layout布局，去掉我们不需要的，我们只要north、west和center三部分：

再在west部分的div中加上accordon分类的布局，将代码添加到head.jspf中：

这样我们就简单搭建好了后台的页面框架了，后期只要往里面填入东西就行了。我们在index.jsp中测试一下：<a href="send_main_aindex.action">直接到后台EasyUI版</a>，这样jsp就会找我们刚刚写好的SendAction然后跳转到EWB-INF/main/aindex.jsp，就能正确显示后台框架了，如下：

至此，我们使用EasyUI成功搭建好了后台页面的框架。

（注：到最后我会提供整个项目的源码下载！欢迎大家收藏或分享）

整个项目的源码下载地址：http://www.jb51.net/article/86099.htm

原文地址：http://blog.csdn.net/eson_15/article/details/51312490

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持我们。

SSH框架网上商城项目第10战之搭建商品类基本模块

前面我们完成了与商品类别相关的业务逻辑,接下来我们开始做具体商品部分. 1. 数据库建表并映射Model 首先我们在数据库中新建一张表,然后使用逆向工程将表映射成Model类,表如下: /*=============================*/ /* Table: 商品表结构 */ /*=============================*/ create table product ( /* 商品编号,自动增长 */ id int primary key not null aut
Java实现SSH模式加密

Java实现SSH模式加密的实现原理思路分享给大家. 一.SSH加密原理 SSH是先通过非对称加密告诉服务端一个对称加密口令,然后进行验证用户名和密码的时候,使用双方已经知道的加密口令进行加密和解密,见下图: 解释:SSH中为什么要使用非对称加密,又使用对称加密,到底有什么用处?到底安全不安全?既然后来又使用了对称加密,开始的时候为什么还要用非对称加密?反过来,既然用非对称加密,为什么又要使用对称加密呢? 非对称加密,是为了将客户端产生的256位随机的口令传递到服务端,那么在传递的过程中,使用公
搭建SSH时的思考和遇到的几个问题的解决方法

SSH流行很久了,一直看到官方文档和网上都在讲如何整合SSH,讨论各种整合的优缺点.今天我比较闲,也用我的一些想法来试着整合这三个最流行的框架. 本次所用版本为:Struts 1.3.9 Spring 2.5 Hiberante 3.2 开发工具和环境为:Eclipse 3.3+MyEclipse 6.0+JBoss 4.2+Tomcat 用SSH时,我们的架构自然就会分成三层,即表现层,逻辑层和持久层,按照Martin Flower的指导思想,耦合越少越好,下层为上层提供服务,这也是R
Java的web开发中SSH框架的协作处理应用笔记

相信SSH没人不知道了吧,struts2+spring+hibernate,企业开发的"基础"架构,为什么基础标上引号,因为这个基础只是很多人自以为的而已,最基础的是servlet,很多培训机构很多基础都不教,直接上来就三大框架了,SSH不然就SSI,搞得很多人以为JAVAWEB开发就一定要框架,没框架就跟没了手一个样.三大框架没有什么坏处,实用,很多公司都在用,直接上手开发.但毕业以为真的好久没用三大框架了,spring倒是有用,特别是springMVC,感觉用起来比struts2爽
java-SSH2实现数据库和界面的分页

分页应该是在我们开发web应用时经常要做的工作,能够比较简洁的实现数据库和视图层的分页十分重要. 在数据库层利用hibernate进行数据库的分页,将从数据库中查询出的数据封装为javabean:在视图层就可以方便的实现分页. 创建PageBean package com.fishing.common.bean; import java.util.List; @SuppressWarnings("unchecked") public class PageBean { private L
MyEclipse整合ssh三大框架环境搭载用户注册源码下载

前言 SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层(实体层). Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持.Spring一方面作为一个轻量级的IoC容器,负责查找.定位.创建和管理对象及
ssh项目环境搭建步骤(web项目)

一.创建Web项目二.加入Struts2支持(Struts-2.3.1.2版本)1. 拷贝相关jar包到lib目录下(1) struts2-core-2.3.1.2.jar(2) xwork-core-2.3.1.2.jar(3) ognl-3.0.4.jar(4) freemarker-2.3.18.jar(5) commons-logging-1.1.1.jar(6) commons-io-2.0.1.jar(7)
SSH框架网上商城项目第25战之使用java email给用户发送邮件

当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息,邮箱地址是从用户的基本信息中获取,好了,首先我们来看一下java中发送邮件的方法. 1. java中发送email的方法在完善这个项目之前,先来回顾一下java中是如何发送邮件的,首先肯定需要发送邮件的jar包:mail.jar,导入到lib目录下,好了,下面我们先写一个普通的java程序来回顾一下java email的知识点: public class SendEmailDemo { public static vo
Java框架SSH结合Easyui控件实现省市县三级联动示例解析

Easyui调用数据库实现省市县区三级联动的效果如果下 1.首先要设计数据库,如图所示.一个有4个字段code,note,pycode.code:行政区划代码,note:中文注释,pycode:拼音缩写. 其中code是由6个字段组成.如果是省级最后4位是0000,如果是地级市最后2位是00,其他是县区. 我已经把相关数据库代码上传到我的csdn资源中,需要的同学自行下载. 2.我用的是java.SSH框架结合Easyui控件 3.html代码如下 <tr> <td class=&quo
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架

前面两篇,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面.我们讨论一下两种搭建方式:基于frameset和基于easyUI.最后我们会使用easyUI来开发. 1. 抽取公共JSP页面我们先来看一下当前的jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
SSH框架网上商城项目第22战之银行图标以及支付页面显示

从上一节的小demo中我们搞清楚了如何跟易宝对接以及易宝的支付流程.这一节我们来做一下支付页面以及在页面中导入银行图标. 1. 存储银行图标银行图标一般不会总是去加载,因为这些东西是死的,没必要每次进入支付页面就去加载银行图标,这样性能会受到一定的影响.这让我们联想到了之前的加载首页数据了,其实跟那个道理是一样的,我们可以在项目启动的时候就将银行图标资源加载到application中,后面用到了就直接在application域中取就行了.所以跟原来一样,我们在监听器中加载银行图标. 银行图标易
SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取

上一节<SSH框架网上商城项目第1战之整合Struts2.Hibernate4.3和Spring4.2>我们搭建好了Struts2.Hibernate和Spring的开发环境,并成功将它们整合在一起.这节主要完成一些基本的增删改查以及Service.Dao和Action的抽取. 1. Service层的抽取上一节中,我们在service层简单写了save和update方法,这里我们开始完善该部分的代码,然后对service层的代码进行抽取. 1.1 完善CategorySer
SSH框架网上商城项目第30战之项目总结（附源码下载地址）

0. 写在前面友情提示:下载地址在下面哦. 项目基本完成了,加上这个总结,与这个项目相关的博客也写了30篇了,积少成多,写博客的过程是固化思路的一个过程,对自己很有用,同时也能帮助别人.顺便说个题外话,在学习的过程中肯定会遇到很多异常出现,我们要做的首先是定位这个异常,一般异常的后面都会跟一个或多个Caused by:xxx,这些都是引起异常的原因,一般我们找最下面的一个Caused by,那里往往才是问题的根源.如果自己解决不了,可以去谷歌.百度搜索(搜索的时候别一大堆异常往上一贴,注意搜关
SSH框架网上商城项目第27战之申请域名空间和项目部署及发布

前面陆陆续续的完成了网上商城的一些基本功能,虽然还有很多地方有待完善,但是不影响项目的部署和发布,我们可以先来玩一把,这一节主要介绍下域名空间的申请以及项目的部署和发布流程. 1. 域名空间的申请作为一个伟大的屌丝,肯定没钱买域名空间,很自然的想到去申请个免费的,现在免费的域名空间也很多,我在福佳jsp技术网上申请了一个试用期是15天的,大家也可以去申请个玩玩,反正作为学习,这已经足够了,当然,如果要长期的肯定要付费的.注册过程我截几个图,如下: 然后下一步,最后开通如下: 建议把上面这些信息
SSH框架网上商城项目第16战之Hibernate二级缓存处理首页热门显示

网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要进入商品的详细信息页面,就像淘宝里面那样.那么每次点击都要去后台查询一下该商品的详细信息,就会发送相应的sql语句,每次刷新一下详细页面也会发sql语句,这样的话,性能肯定会受到很大的影响.那么使用Hibernate的二级缓存就可以解决这个问题. 有些人可能会想,我们可以使用重定向,这样的话,在用户第一次访问的时候把信息查出来放到session中,以后每次用户刷新就可以去session中拿了,这样就不用去数据库中
SSH框架网上商城项目第21战之详解易宝支付的流程

这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后,再做实际的开发,因为是一个Demo,所以我没有考虑一些设计模式的东西,就是直接实现支付功能.实现支付功能需要易宝给我们提供的API.那么问题来了,使用第三方支付平台最主要的一件事就是获取该平台的API,我们首先得获取他们的API以及开发文档,然后才可以做进一步的开发. 1. 获取易宝的API 获取API的第一步,要在易宝上注册一个账号,这个账号是商家的账号,后面买家付款后,会将钱款存入该账号中,然后商家自己提取到银行卡,易宝
SSH框架网上商城项目第1战之整合Struts2、Hibernate4.3和Spring4.2

本文开始做一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总结一下如何整合Struts2.Hibernate4.3和Spring4.2. 整合三大框架得先从搭建各部分环境开始,也就是说首先得把Spring,Hibernate和Struts2的环境搭建好,确保它们没有问题了,再做整合.这篇博文遵从的顺序是:先搭建Spring环境-->然后搭建Hibernate环境--> 整合Spring和Hibernate --> 搭建Struts2环境 --> 整合Spri
SSH框架网上商城项目第14战之商城首页UI的设计

前面我们利用EasyUI和SSH搭建好了后台的基本框架,做好了后台的基本功能,包括对商品类别的管理和商品的管理等,这一节我们开始搭建前台页面. 做首页的思路:假设现在商品的业务逻辑都有了,首先我们需要创建一个监听器,在项目启动时将首页的数据查询出来放到application里,即在监听器里调用后台商品业务逻辑的方法. 1. 首页商品显示逻辑在首页,我们只显示商品热点类别中的前几个商品,比如热点类别有儿童休闲类,女性休闲类,男性休闲类,那我们会有三个板块来显示不同的商品类,每个类别里再显示几个
SSH框架网上商城项目第15战之线程、定时器同步首页数据

上一节我们做完了首页UI界面,但是有个问题:如果我在后台添加了一个商品,那么我必须重启一下服务器才能重新同步后台数据,然后刷新首页才能同步数据.这明显不是我们想要的效果,一般这种网上商城首页肯定不是人为手动同步数据的,那么如何解决呢?我们需要用到线程和定时器来定时自动同步首页数据. 1. Timer和TimerTask 我们需要用到Timer和TimerTask两个类.先来介绍下这两个类. Timer是一种工具类,在java.util包中,线程用其安排以后在后台线程中执行的任务.可安排任务执行一

SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架

相关推荐

随机推荐