1.把bootstrap的css、fonts文件夾copy到WebContent中，把jsp文件夾拖出來，相應的springmvc-config.xml的
2.寫前臺頁面user.jsp（運行時要刪掉第六行的註釋）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--引入jstl自定義的c標籤 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--自定義標籤的一個用法，設置一個變量 格式<c:set /> <c:if /> <c:forEach /> -->
<c:set var="ctx" value="${pageContext.request.contextPath}" /> <!--下面可以用ctx代替 pageContext.request.contextPath -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶列表</title>
<link href="${ctx }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${ctx }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<%--<link href="${pageContext.request.contextPath }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
用ctx 替換${}內的內容 --%>
<script src="${ctx }/js/jquery.min.js" type="text/javascript"></script>
<script src="${ctx }/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="banner"><!--最上面的圖片部分 -->
<div class="title">
歡迎，<span id="user">zq</span><a href="#">退出</a>
</div>
</div>
<div id="main">
<div id="left">
<ul>
<li>
<img class="icon1" src="${ctx }/img/icon01.png "/>
<a href="">用戶管理</a>
</li>
<li>
<img class="icon1" src="${ctx }/img/icon09.png "/>
<a href="">修改密碼</a>
</li>
</ul>
</div>
<div id="right">
<button type="button" class="btn btn-primary" onClick="showAddDiv()">新增</button>
<table class="table table-bordered table-striped">
<thead>
<tr><th>id</th><th>用戶名</th><th>真實姓名</th><th>刪除</th><th>編輯</th></tr>
</thead>
<tbody>
<!--EL表達式 翻課本-->
<!--List<User> row.id 這個id就是後臺傳來的User裏面的屬性名 -->
<c:forEach items="${users}" var="row">
<tr>
<td>${row.id}</td>
<td>${row.username}</td>
<td>${row.realname}</td>
<td><a href="#" class="btn btn-primary" onclick="deleteUser(${row.id})">刪除</a></td>
<td><a href="#" class="btn btn-primary" onclick="edit(${row.id})">編輯</a></td>
<td></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
</html>
css文件夾中寫樣式文件
@charset "utf-8";
/* CSS Document */
/* 基礎選擇器：id選擇器# class選擇器。 標籤選擇器* */
/* *通配符選擇器，就是應用在html所有標籤，所有空白都清空 */
*{
padding:0px;
margin:0px;
}
.banner{
width:100%;
height:100px;
background-image:url(../img/bgTitle.png);
/*background-color:#FF6633;*/
}
.title{
position: absolute;/*絕對位置 ，針對父標籤的；fixed是相對瀏覽器的 */
top: 60px;
right: 30px;/*設置絕對位置，上邊top */
color:#FFFFFF;
font-weight:bolder;
font-size:16px;
}
#main{
background-color:#EFEFEF;
}
#left{
width:12%;
height:900px;
background-color:#F2F2F2;
float:left;
border-right: 1px solid #dedede;
padding-bottom:100px;
}
#left ul{
list-style:none;/*去掉默認的小黑點 */
width:100%;
}
#left ul li{
height:70px;
line-height:70px;/*設置垂直居中 */
background-color:#F9F9F9;
border-bottom: 1px solid #dedede;/*設置下邊 */
text-align:center;
position:relative;/*相對位置，爲了裏面小圖標的位置固定 */
}
#left ul li:hover{
background-color:#FFFFFF;/*去下劃線 */
}
.icon1{
position: absolute;
left: 30px;
top:25px;
display:block;/*改成盒子模型，使left,top,...管用 */
}
#left ul li a{
text-decoration:none;
color:#666666;
}
#left ul li a:hover{
color:#FF6633;
}
#right{
float:left;
width:86%;
/*height:1300px;*/
background-color:#fff;
padding:10px;
}
#loginDiv{
height:540px;
width:300px;
background-color:#FFFFFF;
padding:30px;
position:fixed;
left: 40%;
top: 25%;
border: 1px solid #CCC;
}
.box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}
.logTitle{
height:40px;
border-bottom:#ffb447 solid 1px;
font-size:28px;
margin-bottom:40px;
}
.formInput{
margin-bottom:20px;
height:40px;
width:100%;
}
.formInput img{
position: absolute;
padding-top: 12px;
padding-left: 8px;
}
.formInput input,select{
font-size:16px;
width:100%;
text-indent:5em;
height:40px;
}
.formInput span{
color:#999999;
position: absolute;
padding-top: 12px;
padding-left: 8px;
}
.formButton {
margin-top: 20px;
border: 0px;
font-size: 18px;
width: 100%;
height: 40px;
background-color:#ffb447;
color:#FFFFFF;
}
改UserController中的方法
運行時無查詢結果，原因
當時註釋行的代碼未註釋，有查詢條件