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"%>
    
    
	
	

			

	  			

	    			

	      				
	        				
	      				
	    			
	    			
BookStore
					
					
					

						 	

						 	  
						 	  	
欢迎: ${user.username } 退出
						 	  
						 	  
						 	  	
						 	  
							
					
					
					

						
					
	  			
			
  	
  	

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"%>









<%  pageContext.forward("main");   %>

foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
Copyright © BookStore 版权申明归本网站所有

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"%>






  
	
	


	
	

	

		
	
	

	  

	  	

		   	

			

				
${book.name}
				
作者: ${book.author}
				
出版社: ${book.press}
				
出版时间: 
				
价格: ￥${book.price}
				
页数: ${book.page}页
			
		
		

			

			  
			  
			  

			    
			  
			  
			
			

				本书特色： ${book.feature }
			
		
		
		
	  
	
	
	
	

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" %>









	
	

		
		
我的购物车
	
	    
	    	

	    	

	    		
书名
		    	
加入时间
		    	
数量
		    	
单价
		    	
总价
		    	
订单人
		    	
操作
	    	
	    	

	    		
${cart.name}
	    		

	    		
${cart.count}
	    		
${cart.price}
	    		
${cart.count * cart.price}
	    		
${cart.orderman }
	    		

	    			 
	    		
	    	
	    	 
	    
	

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"%>








	
	
	

	     

			  

			    
			    

			      
			    
			  
			  
			  

			    
			    

			      
			    
			  
			  
			  

			    

			      登录
			      重置
			    
			  
			  

			    

			     	 还没有账户？点击注册一个吧！
			    
			  
	  	
	
	

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"%>





  
	
	



	
	

			
		

		  Java
		  Python
		  算法
		  C语言
		  JavaScript
		  Linux
		  纸书预售
		
		

			

			  

			   
			   
			  
			
		
		
		

			

			
			  

			    

			      
			      	
			      
			      

			       
 ${book.name}
			       
${book.author}
			        
			      
			  	
			  
			  
			  
			
		
		
	
	
	

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"%>








	
	

	  	 

			 

			    
			    

			      
			    
			 
			  
			 

			    
			    

			      
			    
			 
			  
			 

			    

			      确定
			      重置
			    
			 
	  	
	
	

register.css

	@charset "UTF-8";
	
	.form-group{
		width:300px;
	}
	.register{
		display:table;
		margin:auto;
	}
	
	.registerbtn{
		text-align:center;
	}