- 项目展示层架构,URL和项目发布目录的对应关系
-
展示层:商家管理页面(sellerManage.html)第一版
-
引入 bootstrap,将下载的bootstrap目录copy到webroot下
-
页面代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>商家管理</title>
<linkrel="stylesheet"href="../../bootstrap/css/bootstrap.min.css">
</head>
<body>
<tableclass="table table-hover">
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
-
-
项目发布,运行,Web访问
页面效果
-
展示层:商家管理页面(sellerManage.jsp)第二版
-
在sellerManage.html的页面代码前加上如下代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- 重构sellerManage.html为sellerManage.jsp
重新访问的效果图,注意要更改访问文件的后缀了
-
-
展示层:商家管理页面(sellerManage.jsp)第三版
修改表格结构,使其类似我们要展示的商家数据表格
效果:
-
访问方式的改进
这种硬访问方式是相当危险的,访问者可直接窥探项目的架构
-
Servlet知识
-
商家Servlet类创建
-
商家Servlet访问方式的web.xml配置
Web.xml中的代码:
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="3.0"xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
<!--商家管理 -->
<servlet>
<servlet-name>sellerManageServlet</servlet-name>
<servlet-class>gccshop.servlet.SellerManageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>sellerManageServlet</servlet-name>
<!--请求方式 http://localhost:8080/gccshop/seller-->
<url-pattern>/seller</url-pattern>
</servlet-mapping>
</web-app>
-
重新启动服务器(服务器调试运行方式可不用),让其重新编译加载这些变更。
这个效果不是太理想,我们需要更改css的引用
更改为:
新效果:
-
下一步可在Servlet中包装数据,将其输出到显示层的相关页面
-
调用服务层的实现
-
改写doPost(…)方法,接收页面传来的请求参数
-
数据包装成json对象,请求响应携数据跳转到目标页面
代码:
//将数据整合成json格式,传递给展示层sellerManage.jsp
publicvoid doShow(HttpServletRequest request,
HttpServletResponse response, ArrayList<Seller> list)
throws ServletException, IOException {
//用json数据在页面间传递数据
JSONObject data =new JSONObject();
//计算出分页,并生成页面序号列表
ArrayList<Integer> rowsList =new ArrayList<Integer>();
for (int i = 1; i <= ssi.findAll().size() /rowsPerPage + 1; i++) {
rowsList.add(i);
}
if (list !=null) {
data.put("rows", rowsList);//分页列表,用于页导航
data.put("sellers", list);//数据列表,用表格显示数据
}else {//如果没有数据,也要构成json数据
data.put("rows", 0);
data.put("sellers",null);
}
request.setAttribute("data", data);// request范围
request.getRequestDispatcher("manage/seller/sellerManage.jsp").forward(
request, response);
}
-
-
展示层:商家管理页面(sellerManage.jsp)第四版
-
将相应jar包copy进lib,代码中引入c标签库。JSP 标准标签库(JSTL)http://www.runoob.com/jsp/jsp-jstl.html
-
引入其它标签,展示数据
c:foreach标签http://www.runoob.com/jsp/jstl-core-foreach-tag.html
c:if标签http://www.runoob.com/jsp/jstl-core-if-tag.html
-
页面效果
-