ssm框架下的网上书城项目的开发--前端篇

前端这部分写的比较简略,如果有错误或者遗漏还请见谅。

 

上面是前端架构,需要注意的有:第一点,引入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>欢迎:&nbsp;<strong>${user.username }</strong>&emsp;<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&nbsp;©&nbsp;BookStore&emsp;版权申明归本网站所有</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">作者:&emsp;${book.author}</label></div>
				<div><label class="info">出版社:&emsp;${book.press}</label></div>
				<div><label class="info">出版时间:&emsp;<fmt:formatDate value="${book.pubdate}" pattern="yyyy-MM-dd"/></label></div>
				<div><label class="info">价格:&emsp;¥${book.price}</label></div>
				<div><label class="info">页数:&emsp;${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">本书特色:&emsp;${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">&nbsp;还没有账户?<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;
	}
	

 

 

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值