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

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 % !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= 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，发现点击链接是无法访问到后台的。原因