CRUD（15）：查询-BootStrap搭建页面

一、引入Jquery和BootStrap

关于web路径

不以/开始的相对路径，找资源的时候，以当前资源的路径为基准，容易出问题。

以/开始的相对路径，找资源的时候，以服务器的路径为基准。

路径的写法

拿到当前项目路径，以/开始，不以/结束：

<%

    pageContext.setAttribute("APP_PATH",request.getContextPath());



%>

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

①引入Jquery:

<!-- 引入jquery -->



<script type="text/javascript"



       src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>

②引入BootStrap:

<!-- 引入Bootstrap样式 -->



<link



       href="${APP_PATH 

}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"



       rel="stylesheet">



<script src="${APP_PATH 

}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

二、搭建显示页面框架

BootStrap官方文档

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



       pageEncoding="UTF-8"%>



<!DOCTYPE html>



<html>



<head>



<meta charset="UTF-8">



<title>员工列表</title>



<!-- 拿到当前项目路径，以/开始，不以/结束 -->



<%



       pageContext.setAttribute("APP_PATH", request.getContextPath());



%>







<!-- 引入jquery -->



<script type="text/javascript"



       src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>



<!-- 引入Bootstrap样式 -->



<link



       href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"



       rel="stylesheet">



<script src="${APP_PATH 

}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>







</head>



<body>



       <!-- 搭建显示页面 -->







       <div class="container">







             <!-- 标题 -->



             <div class="row">



                    <div class="col-md-12">



                           <h1>SSM-CURD</h1>



                    </div>



             </div>







             <!-- 按钮 -->



             <div class="row">



                    <div class="col-md-4 col-md-offset-8">



                           <button class="btn btn-primary">新增</button>



                           <button class="btn btn-danger">删除</button>



                    </div>



             </div>







             <!-- 显示表格数据 -->



             <div class="row">



                    <div class="col-md-12">



                           <table class="table .table-hover">



                                 <tr>



                                        <th>#</th>



                                        <th>empName</th>



                                        <th>gender</th>



                                        <th>email</th>



                                        <th>deptName</th>



                                        <th>操作</th>



                                 </tr>







                                 <tr>



                                        <th>200102</th>



                                        <th>amel</th>



                                        <th>f</th>



                                        <th>email@qq.com</th>



                                        <th>开发部</th>



                                        <th>



                                               <button class="btn btn-info 

btn-sm">



                                                     <span class="glyphicon 

glyphicon-pencil" aria-hidden="true"></span>



                                                     编辑



                                               </button>



                                               <button class="btn btn-danger 

btn-sm">



                                                     <span class="glyphicon 

glyphicon-trash" aria-hidden="true"></span>



                                                     删除



                                               </button>



                                        </th>



                                 </tr>







                           </table>



                    </div>



             </div>







             <!-- 显示分页 -->



             <div class="row">



                    <!-- 分页文字信息 -->



                    <div class="col-md-6">当前记录数：XXX</div>



                    <!-- 分页条信息 -->



                    <div class="col-md-6">



                           <nav aria-label="Page navigation">



                                 <ul class="pagination">



                                        <li><a href="#">首页</a></li>



                                        <li><a href="#" aria-label="Previous"> 

<span



                                                     aria-hidden="true">&laquo;</span>



                                        </a></li>



                                        <li><a href="#">1</a></li>



                                        <li><a href="#">2</a></li>



                                        <li><a href="#">3</a></li>



                                        <li><a href="#">4</a></li>



                                        <li><a href="#">5</a></li>



                                        <li><a href="#" aria-label="Next"> <span



                                                     aria-hidden="true">&raquo;</span>



                                        </a></li>



                                        <li><a href="#">末页</a></li>



                                 </ul>



                           </nav>



                    </div>



             </div>



</body>



</html>