027 SSM综合练习03--数据后台管理系统--product-list.jsp和main.jsp页面制作

1.product-list.jsp页面制作

(1)创建一个product-list1.jsp文件，清空，只保留

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

(2)找到从https://github.com/itheima2017/adminlte2-itheima已经下载好的开源的AdminLTE2-IT黑马-定制版

解压后，根据此路径找到all-admin-datalist.html文件。

E:学习资料javaEE黑马10-企业权限管理系统1-SVN&AdminLTE&项目简介luckyplj8-adminlte2-itheima-masteradminlte2-itheima
eleasedistpages

(3)选中该文件，右键用Edit-Plus打开此html文件。复制全部内容到product-list1.jsp中

(4)修改product-list1.jsp文件中的js、css文件的路径(批量修改，ctrl+R快捷键)

将../换成${pageContext.request.contextPath}/

${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的

(5)抽取头部为header.jsp，导航侧栏为aside.jsp,修改product-list1.jsp的代码

<!-- 页面头部,已经抽取为header.jsp -->
    <jsp:include page="header.jsp"/>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <jsp:include page="aside.jsp"/>
    <!-- 导航侧栏 /-->

(6)修改jsp页面中的表

<1>修改表头为以下内容：

　　　　　　　　　　　　　　　　 <thead>
                            <tr>
                                <th class="" style="padding-right:0px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                </th>
                                <th class="sorting_asc">ID</th>
                                <th class="sorting_desc">编号</th>
                                <th class="sorting_asc sorting_asc_disabled">产品名称</th>
                                <th class="sorting_desc sorting_desc_disabled">出发</th>
                                <th class="sorting">出发时间</th>
                                <th class="sorting">产品价格</th>
                                <th class="sorting">产品描述</th>
                                <th class="text-center sorting">状态</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>

<2>使用jstl,需要在该jsp文件的顶部，添加jstl文件的依赖

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<3>修改tbody

　　　　　　　　　　　　　　　　　<tbody>
                            <c:forEach items="${productList}" var="product">
                            <tr>
                                <td><input name="ids" type="checkbox"></td>
                                <td>${product.id}</td>
                                <td>${product.productNum}</td>
                                <td>${product.productName}</td>
                                <td>${product.cityName}</td>
                                <td>${product.departureTimeStr}</td>
                                <td>${product.productPrice}</td>
                                <td>${product.productDesc}</td>
                                <td class="text-center">${product.productStatusStr}</td>
                                <td class="text-center">
                                    <button type="button" class="btn bg-olive btn-xs">订单</button>
                                    <button type="button" class="btn bg-olive btn-xs">详情</button>
                                    <button type="button" class="btn bg-olive btn-xs">编辑</button>
                                </td>
                            </tr>
                            </c:forEach>
                            </tbody>