为了正常的体验网站,请在浏览器设置里面开启Javascript功能!

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

2017-11-18 10页 doc 74KB 8阅读

用户头像

is_751406

暂无简介

举报
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架 SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架,讨论两种搭建方式:基于frameset和基于easyUI,感兴趣的小伙伴们可以参考一下 前面两篇,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面。我们讨论一下两种搭建方式:基于frameset和基于easyUI。最后我们会使用easyUI来开发。 1. 抽取公共JSP页面 我们先来看一下当前的jsp页面: ...
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架 SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架,讨论两种搭建方式:基于frameset和基于easyUI,感兴趣的小伙伴们可以参考一下 前面两篇,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面。我们讨论一下两种搭建方式:基于frameset和基于easyUI。最后我们会使用easyUI来开发。 1. 抽取公共JSP页面 我们先来看一下当前的jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri= prefix="c" %> 先撇开body部分的内容不看,因为这都是之前测试用的,抽取JSP页面是指将一些共有部分抽取出来到一个新的JSP页面,然后在当前JSP页面中包含进来。因为后期项目中肯定会引入js、css等文件,如果在每个jsp页面都写的话,会很冗余,所以我们得抽取一个共有的jsp来引入这些文件以及其他东西。我们在WebRoot目录下新建一个public文件夹,在里面新建一个head.jspf(jspf表示JSP片段,供其他JSP页面包含的)。 <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri= prefix="c" %> 易购商城 注释部分主要是包含js和css,因为目前还没用到,只是搭建一个框架,等用到了再去掉。标签将${pageContext.request.contextPath }用${shop}来代替,方便书写。这样以后新的JSP只要包含这个head.jspf即可。我们看一下修改后的index.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/public/head.jspf" %> 是不是有种面向对象的思想~ 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"%> <%@ include file="/public/head.jspf" %> 结构很明显,将页面分为3块,上左右。每个模块包含相应的jsp页面,然后我们在index.jsp的body中写入测试到后台,启动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文件中配置一下: /WEB-INF/www.visa158.com/aindex.jsp /WEB-INF/{1}/{2}.jsp 别忘了在beans.xml中配置:。 这个action中之所以配两个*号是为了便于访问WEB-INF/*/*.jsp,这需要在jsp中约定好地址的写法了。下面我们看一下aindex.jsp中的写法: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/public/head.jspf" %> 从修改后的aindex.jsp中可以看出,我们不直接访问WEB-INF/下的jsp(我们也访问不了),我们通过Action去跳转,这样我们在index.jsp的body中写入测试到后台,然后启动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-easyu i-1.3.5,去掉一些不需要的东西,最后的结果如下: 3.2 搭建EasyUI的环境 我们打开刚刚抽取出来的head.jspf文件,在这里导入EasyUI所依赖的css和js,其他页面引入该jspf 文件即可间接引入了EasyUI所依赖的css和js了: <%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri= prefix="c" %> 易购商城 3.3 搭建后台的框架 将WEB-INF/main/目录下的top.jsp、left.jsp和right.jsp都删掉,因为现在用不上了,然后修改aindex. jsp页面,现在可以使用EasyUI来做了: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/public/head.jspf" %>

Accordion for jQuery

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

content2
content3
这里的这么多
都是参照上面那个EasyUI的说明文档,我在下面贴出来。先进行整个layout布局, 去掉我们不需要的,我们只要north、west和center三部分: 再在west部分的div中加上accordon分类的布局,将代码添加到head.jspf中: 这样我们就简单搭建好了后台的页面框架了,后期只要往里面填入东西就行了。我们在index.jsp中测 试一下:直接到后台EasyUI版,这样jsp就会找我们刚刚写好 的SendAction然后跳转到EWB-INF/main/aindex.jsp,就能正确显示后台框架了,如下: 至此,我们使用EasyUI成功搭建好了后台页面的框架。
/
本文档为【SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。

历史搜索

    清空历史搜索