前端这部分写的比较简略,如果有错误或者遗漏还请见谅。
上面是前端架构,需要注意的有:第一点,引入bootstrap;第二点,引入 jstl包。
top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/top.css">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main">
<img src="images/icon_log.png" alt="Brand" class="img-rounded">
</a>
</div>
<h4>BookStore</h4>
<!--登录者操作 -->
<div class="btn-group logininfo">
<div class="btn-group" role="group" style="margin-top:8px;">
<c:if test="${user != null }">
<h5>欢迎: <strong>${user.username }</strong> <a href="cancel">退出</a></h5>
</c:if>
<c:if test="${user == null }">
<img title="用户登录" alt="登录" src="images/icon_login.png" onclick="location.href='tologin'">
</c:if>
</div>
</div>
<div class="btn-group cart">
<img title="购物车" alt="购物车" src="images/icon_cart.png" onclick="location.href='tocart'">
</div>
</div>
</nav>
</div>
top.css
@charset "UTF-8";
*{
padding: 0px;
margin: 0px;
}
body{
padding:0px 20px;
}
.header{
margin-top: 20px;
}
.header h4{
margin-top: 20px;
float: left;
}
.container-fluid{
background-color: #fff;
}
.logininfo{
margin-top:8px;
float: right;
}
.cart{
float: right;
margin-top:15px;
margin-right:20px;
}
.footer{
text-align: center;
margin-top: 20px;
}
.btn-group h5{
position:relative;
top:-5px;
}
.btn-group a{
text-decoration:none;
}
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title>登录</title>
</head>
<body>
<% pageContext.forward("main"); %>
</body>
</html>
foot.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="well well-sm footer">Copyright © BookStore 版权申明归本网站所有</div>
book.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!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">
<link rel="stylesheet" type="text/css" href="css/book.css">
<title>详情</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="common/top.jsp"/>
<div>
<div>
<span><img title="返回" alt="返回" src="images/icon_back.png" onclick="location.href='main'"></span>
</div>
<div class="panel panel-default container">
<div class="panel-body">
<div class="books">
<div class="bookphoto"><img alt="书图" src="images/book/${book. img}" id="book"></div>
<div class="bookinfos">
<h3>${book.name}</h3>
<div><label class="info">作者: ${book.author}</label></div>
<div><label class="info">出版社: ${book.press}</label></div>
<div><label class="info">出版时间: <fmt:formatDate value="${book.pubdate}" pattern="yyyy-MM-dd"/></label></div>
<div><label class="info">价格: ¥${book.price}</label></div>
<div><label class="info">页数: ${book.page}页</label></div>
</div>
</div>
<div>
<form class="navbar-form navbar-left" action="incart" method="post">
<input type="hidden" name="name" value="${book.name}">
<input type="hidden" name="price" value="${book.price}">
<div class="form-group">
<input type="text" class="form-control" name="count" placeholder="输入数量">
</div>
<button type="submit" class="btn btn-default"><img alt="购物车" src="images/icon_addcart.png"></button>
</form>
<div>
<textarea class="form-control" rows="3">本书特色: ${book.feature }</textarea>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
book.css
@charset "UTF-8";
.books{
overflow:hidden;
}
.bookphoto{
float:left;
}
.bookinfos{
float:left;
margin-left:10px;
}
.bookinfos h3{
color:#ff3333;
}
.info{
margin-top:20px;
}
#cartinput{
width: 50px;
}
.book{
width:230px;
height: 290px;
}
.form-group{
margin-left:-15px;
}
cart.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!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">
<link rel="stylesheet" type="text/css" href="css/cart.css">
<title>购物车</title>
<style type="text/css">
</style>
</head>
<body>
<jsp:include page="common/top.jsp"/>
<div>
<span><img title="主页" alt="主页" src="images/icon_home.png" onclick="location.href='main'"></span>
<h4 class="setcarttitle"><strong>我的购物车</strong></h4>
</div>
<table class="table">
<tr>
<th>书名</th>
<th>加入时间</th>
<th>数量</th>
<th>单价</th>
<th>总价</th>
<th>订单人</th>
<th>操作</th>
</tr>
<c:forEach items="${cartList}" var="cart">
<tr>
<td>${cart.name}</td>
<td><fmt:formatDate value="${cart.date}" pattern="yyyy-MM-dd"/></td>
<td>${cart.count}</td>
<td>${cart.price}</td>
<td>${cart.count * cart.price}</td>
<td>${cart.orderman }</td>
<td>
<img alt="取消" src="images/icon_delete.png" onclick="location.href='cancelcart?id=${cart.id}'">
</td>
</tr>
</c:forEach>
</table>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
cart.css
@charset "UTF-8";
.table th,td{
margin-top:20px;
text-align:center;
}
.setcarttitle{
text-align:center;
}
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>登录</title>
</head>
<body>
<jsp:include page="common/top.jsp"/>
<form class="form-horizontal" action="login" method="post">
<div class="login">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><img alt="用户" src="images/icon_user.png"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><img alt="密码" src="images/icon_password.png"></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 loginbtn">
<button type="submit" class="btn btn-default btn-sm">登录</button>
<button type="reset" class="btn btn-default btn-sm">重置</button>
</div>
</div>
<div class="form-group setregister">
<div class="col-sm-offset-2 col-sm-10 loginbtn">
<img alt="尴尬" src="images/icon_gangaface.png"> 还没有账户?<a href="toregister">点击注册一个吧!</a>
</div>
</div>
</div>
</form>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
login.css
@charset "UTF-8";
.form-group{
width:300px;
}
.login{
display:table;
margin:auto;
}
.loginbtn{
text-align:center;
}
.setregister a{
text-decoration:none;
}
main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>首页</title>
</head>
<body>
<jsp:include page="common/top.jsp"/>
<div class="hotbook">
<div class="menu">
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=1'"><img alt="点" src="images/icon_point.png">Java</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=2'"><img alt="点" src="images/icon_point.png">Python</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=3'"><img alt="点" src="images/icon_point.png">算法</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=4'"><img alt="点" src="images/icon_point.png">C语言</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=5'"><img alt="点" src="images/icon_point.png">JavaScript</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=6'"><img alt="点" src="images/icon_point.png">Linux</button>
<button type="button" class="btn btn-default" onclick="location.href='typebook?type=7'"><img alt="点" src="images/icon_point.png">纸书预售</button>
</div>
<div class="hotbook_title">
<div class="panel panel-default">
<div class="panel-body">
<img alt="热门图书" src="images/icon_newbook.png">
<img title="所有图书" src="images/icon_allbook.png" class="allbook" onclick="location.href='allbook'">
</div>
</div>
</div>
<div class="hotbook_body">
<div class="row">
<c:forEach items="${ bookList}" var="book">
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="tobook?id=${book.id}">
<img src="images/book/${book.img}" alt="书图" id="book">
</a>
<div class="caption" >
<div> <label>${book.name}</label></div>
<div>${book.author}</div>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
main.css
@charset "UTF-8";
.hotbook_title{
margin-top:20px;
}
.hotbook_body{
margin-top:20px;
}
.allbook{
float:right;
}
#book{
width:230px;
height:290px;
}
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="css/register.css">
<title>注册</title>
</head>
<body>
<jsp:include page="common/top.jsp"/>
<form class="form-horizontal" action="register" method="post">
<div class="register">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><img alt="用户" src="images/icon_user.png"></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><img alt="密码" src="images/icon_password.png"></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 registerbtn">
<button type="submit" class="btn btn-default btn-sm">确定</button>
<button type="reset" class="btn btn-default btn-sm">重置</button>
</div>
</div>
</div>
</form>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
register.css
@charset "UTF-8";
.form-group{
width:300px;
}
.register{
display:table;
margin:auto;
}
.registerbtn{
text-align:center;
}