AdminLTE简介与基本实用

一、简介
AdminLTE是一个框架，可以提供很多可重用的前端组件。
结构如下：

二、具体使用
下载定制版的汉化的AdminLTE
链接：https://pan.baidu.com/s/1UuewMrGBKpOD1ynw30IN6w
提取码：krls
下载后解压缩，只需要关注release目录下的内容即可

使用步骤：
在pages中找到自己想要的页面后进行修改
新建一个web项目，将上面dist下面的css、img和plugins目录及目录下的内容复制到该web项目中，并再创建一个demo.html文件

在pages目录下找到all-admin-datalist.html这个页面（其中有两种文件,一种是以all开头的html页面，一种不是。例如admin-404.html与all-admin-404.html页面，这两个文件的区别在于all开头的文件可以直接运行显示页面全部信息，而未以all开头的文件它是需要与其它文件进行组合而展示 页面全部信息。），然后右键使用notepad++打开后复制整个代码到demo.html中，修改路径../为./（原来的路径与现在的路径不同）后运行。

三、首页
在内容区域删除原有内容，然后加上图片

运行效果如下：

小图标使用参考ui界面元素

四、产品
从all-admin-index.html页面中找到想要的页面，然后对应复制修改(选择带all的)

五、集成到项目中：
将../换成${pageContext.request.contextPath}/

将头部和侧边栏的内容抽取出来改为引入

引入标签书写jstl

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

取数据：

<c:forEach items="${productList}" var="product">
                            <tr>
                                <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 class="text-center">${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>