西蒙购物网前端显示效果

一、准备图片资源

图片素材下载链接：https://pan.baidu.com/s/1XH4Z7iQ01uZCS1LEmADZAw
提取码：v7rx

二、前端样式 css

/* 样式 */
body {
    margin: 0px;
    text-align: center;
    background: url("../images/frontBack.jpg") no-repeat;
    background-size: 100%
}

table {
    margin: 0 auto;
    font-size: 14px;
    color: #333333;
    border-width: 1px;
    border-color: khaki;
    border-collapse: collapse;
}

table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: gainsboro;
    background-color: honeydew;
}

table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: gainsboro;
    background-color: #ffffff;
}

/*登录页面样式*/
.login {
    width: 400px;
    height: 340px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -170px 0 0 -200px;
}

.login .websiteTitle, .title {
    border: solid 1px floralwhite;
}

/*注册页面样式*/
.register {
    width: 400px;
    height: 350px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -175px 0 0 -200px;
}

/*显示类别页面样式*/
.showCategory {
    width: 400px;
    height: 350px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -150px 0 0 -200px;
}

/*生成订单页面样式*/
.makeOrder {
    width: 400px;
    height: 400px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -200px 0 0 -200px;
}

/*显示订单页面样式*/
.showOrder {
    width: 400px;
    height: 400px;
    background-color: honeydew;
    border: solid 2px darkgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    margin: -200px 0 0 -200px;
}

三、添加JSTL的jar包

在WEB-INF\lib目录里添加支持jstl的jar包：
jar包下载地址：http://tomcat.apache.org/taglibs/standard/

准备工作完成后，开始编写前端

1、登录页面login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    
    
    




    

        
西蒙购物网
    
    

        
用户登录
    
    

        

            

                

                    
账号
                    

                
                

                    
密码
                    

                
                

                    

                        
                        
                    
                
            
        
    
    

        
如果你不是本站用户，单击此处注册。
    



    
    



    
    

测试结果

2、注册页面register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    
    
    




    

        
西蒙购物网
    
    

        
用户注册
    
    

        

            

                

                    
账号
                    

                
                

                    
密码
                    

                
                

                    
电话
                    

                
                

                    

                        
                        
                
            
        
    
    

        
切换到登录页面
    



    
    

3、显示商品类别页面showCategory.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    
    




    

        
西蒙购物网
    
    

        登录用户：${username}
                     
        
        注销
    
    

        
商品类别
    
    

        
                

            

                
类别编号
                
商品类别
            
            

                    
${category.id}
                    

                        ${category.name}
                    
                
            
        
    

4、显示购物车页面showCart.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>






    
    


${username}的购物车

        
            
                
                

    

        
商品编号
        
商品名称
        
销售价格
        
购买数量
        
合计金额
        
用户操作
    
    

            
${shoppingItem.id}
            
${shoppingItem.name}
            
￥${shoppingItem.price}
            
${shoppingItem.amount}
            
￥${shoppingItem.sum}
            
删除
        
    
    

        
总金额
        

        

        

        
￥0.00
            
            
￥${totalPrice}
            
        
        

    



    
        生成订单
    
    
        生成订单
    


    
    

5、显示商品页面showProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>






    
    
    


西蒙购物网

登录用户：${username}
     

注销

欢迎选购【${categoryName}】类商品


        
            
            

    

        
        

            

                

                

                    
商品编号：
                    
${product.id}
                
                

                    
商品名称：
                    
${product.name}
                
                

                    
销售价格：
                    
${product.price}
                
                

                    
上架时间：
                    

                
                

                    
用户操作：
                    
加入购物车
                
            
        
        
        
    


返回商品类别页面

6、生成订单页面makeOrder.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    
    



    

        
西蒙购物网
    
    

        登录用户：${username}
        
             
        
        注销
    
    

        
生成订单
    
    

        

            

                

                    
用户名
                    

                
                

                    
联系电话
                    

                
                

                    
总金额
                    

                
                

                    
送货地址
                    

                
                

                    
 
                
            
        
    
    

        
返回商品类别页面
    

7、显示订单页面showOrder.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    
    



    

        
西蒙购物网
    
    

        登录用户：${username}
                     
        
        注销
    
    

        
生成订单
    
    

        

            

                
订单编号
                
${lastOrder.id}
            
            

                
用户名
                
${lastOrder.username}
            
            

                
联系电话
                
${lastOrder.telephone}
            
            

                
总金额
                
${lastOrder.totalPrice}
            
            

                
送货地址
                
${lastOrder.deliveryAddress}
            
        
    
    

        
支付
    

8、后台管理主页面management.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    


    
    
        
        
    

9、后台管理主页面左面板页面left.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>






    
    
    
    




    

    

        
 用户管理
        
    
    

    

        
   查看用户
    
    

        
   添加用户
        
    
    

        
   更新用户
        
    
    

        
   删除用户
        
    
    

    

    

        
 
            类别管理
    
    

    

        
   查看类别
        
    
    

        
   添加类别
        
    
    

        
   更新类别
        
    
    

        
   删除类别
        
    
    

    

    

        
 
            商品管理
    
    

    

        
   查看商品
        
    
    

        
   添加商品
        
    
    

        
   更新商品
        
    
    

        
   删除商品
        
    
    

    

    

        
 
            订单管理
    
    

    

        
   查看订单
        
    
    

        
   删除订单
        
    
    

10、后台管理主页面顶面板页面top.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    

11、后台管理主页面主面板页面main.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






    
    

12、查看用户页面showUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>






    
    
    




    

        
登录用户：${username}
        
注销
    


用户列表


        

    

        
编号
        
用户名
        
密码
        
电话
        
注册时间
        
权限
    
    

            
${user.id}
            
${user.username}
            
${user.password}
            
${user.telephone}
            

            

                
                    
                        管理员
                    
                    
                        普通用户
                    
                
            
        
    

13、待做页面todo.jsp

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


    


抱歉，此页面正在建设中……

最终效果：