SpringBoot+JPA实现校园网上购物系统

1.开发环境

eclipse/IDEA+mysql+jdk

2.所用技术

SpringBoot+JPA+mysql+jsp+js+css

3.主要功能

学生注册、登录、商品搜索、商品分类、购物车、订单

管理员:用户管理、订单管理、商品管理、商品分类管理等(源码获取方式见底部)

4.部分代码展示

首页

<%@ page language="java"  import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>校园网上购物系统</title>
<link rel="stylesheet" type="text/css" href="../statics/js/style.css" />

<style>
.main_iframe {
    Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 92%
    </style>


</head>
<body>

<div id="main_container">
  <div class="top_bar"></div>
    <div id="header">
</div>
    
   <div id="main_content"> 
            <div id="menu_tab">
            <div class="left_menu_corner"></div>
                    <ul class="menu">
                         <li><a href="/" class="nav1">首页</a></li>
                         <li class="divider"></li>
                         <li><a href="/cart/showCar" class="nav5">购物车</a></li>
                         <li class="divider"></li>
                         <c:if test="${empty username}">
                         <li><a href="/login" class="nav3">用户登录</a></li>
                         <li class="divider"></li> 
                         <li><a href="/regist" class="nav6">用户注册 </a></li>
                         <li class="divider"></li>
                         </c:if>
                         <li><a href="/admin/login" class="nav2">后台管理</a></li>
                         <li class="divider"></li>
                    </ul>

             <div class="right_menu_corner"></div>
            </div><!-- end of menu tab -->
    
    </div> 
    
    <div class="crumb_navigation">
    导航: <span class="current"><a href="/">首页</a></span>
    
    </div > <div align="right"><form name="searchform" action="/findCommodityByName" method="post">
    <input id="commodity.commodityName" name="commodityName" style="font-size: 10pt; color: rgb(85, 85, 85);" οnfοcus="if(this.value=='请输入您所要查找的商品名称'){this.value='';}" οnblur="if(this.value==''){this.value='请输入您所要查找的商品名称';}" value="请输入您所要查找的商品名称" size="25" maxlength="30" type="text" />
<input name="搜索" type="submit" value="搜索" />
    </form></div>
    <table border="0" cellpadding="0" cellspacing="0" align="center" width=100% height=400px>
    <tr>
    <td class="left_content">
    <table>
    <tr>
    <td class="title_box">商品分类</td></tr>
    <tr><td> 
    <ul class="left_menu">
   <c:forEach  items="${list}"  var="item">
            
                <li class="odd">
                    <a href="/findCommodityByClass?id=${item.id}">${item.commodityClassName}
                    </a>
                </li>
       </c:forEach>
  </ul><br/></td>
    </table>
    </td>
    
    <td class="center_content" width=100% height=400px>
    <iframe    class=main_iframe id=frmright name="frmright"   frameborder=0  scrolling=auto src="../statics/product.jsp">
     </iframe>
    </td>
    
     <td class="right_content"><table>
     <tr><td> <c:if test="${empty username}">
     <form action="/checkLogin" name="form" method="post" >
           <div class="title_box">用户登录</div>  
        <div class="border_box">
        <p>用户名:<input id="username" name="username" type="text" style="width:110px"/></p>
        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码:<input id="password" name="password" type="password"  style="width:110px"/></p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input name="提交" type="submit" value="登录" /><input name="重置" type="reset" value="重置" />
        </p>
        <p align="center">&nbsp;&nbsp;&nbsp;[<a href="/regist">新用户注册</a>] &nbsp;[<a href="/findPass" >忘记密码</a>]</p>
        
     </div>  </form> </c:if>
     <c:if test="${!empty username}">
            <div class="title_box">用户信息</div>  
        <div class="border_box">
         <br/>
        <p>欢迎登陆:${username}</p><br/>
        <p> [<a href="/findOrderByUsername?username=${username}">我的订单</a>]&nbsp;&nbsp; [<a href="/updatePass" >修改密码</a>] </p>
        <p> [<a href="/personInfo">个人信息</a>]&nbsp;&nbsp; [<a href="/loginOut"  οnclick="return confirm('确定要退出吗?')" >退出系统</a>] </p>
     </div>
        </c:if> 
      
    </td>
     </tr>
    </table></td>
    </tr>
    </table>
  
  <div class="footer" align="center"><br />&copy;&nbsp;2018&nbsp;|&nbsp;肖毅然个人版权所有             
                    <div align=center>
                        电话:86-(0)371-110&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址:湖北省黄冈 市
                    </div>
  </div>
</div>    
</body>
</html>

注册页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>校园网上购物系统</title>
<link rel="stylesheet" type="text/css" href="../statics/js/style.css" />
<style>
.main_iframe {
    Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 92%
    </style>
<script type="text/javascript" src="../statics/js/boxOver.js"></script>
<script>
function check(){

   var username=document.getElementById("username").value;
   var pass1=document.getElementById("password").value;
   var pass2=document.getElementById("repassword").value;
   var email=document.getElementById("email").val;
   var address=document.getElementById("address").value;
   var name=document.getElementById("name").value;
   var phone=document.getElementById("phone").value;
   var post=document.getElementById("post").value;
   
  if(username.length<6||username.length>15){
    //检查用户名是否在指定的范围之内
    alert("用户名长度必须在6~15位之间!");
    return false;
   }
   if(pass1.length<8||pass1.length>20){
    //检查密码是否在指定的范围之内
    alert("密码长度必须在8~20位之间!");
    return false;
   }
   if(pass1!=pass2){
    
    alert("两次密码输入不同!");
    return false;
   }
   
  if(address==null||address==''){
    alert("地址不能为空!");
    return false;
   }
  if(name==null||name==''){
    alert("名字不能为空!");
    return false;
  }
    if(phone==null||phone==''){
    alert("电话不能为空!");
    return false;
  }
  if(post==null||post==''){
    alert("邮编不能为空!");
    return false;
  }
 
  
  if(email.match(/[\w-]+@{1}[\w-]+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig)!=email.value)
   {   
    alert("电子邮箱格式不正确!");
    return false;
  }
  
}

function checkUsername(){
    // 获得文件框值:
    var username = document.getElementById("username").value;
    // 1.创建异步交互对象
    var xhr = createXmlHttp();
    // 2.设置监听
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("span1").innerHTML = xhr.responseText;
            }
        }
    }
    // 3.打开连接
    xhr.open("GET","/findByName?username="+username,true);
    // 4.发送
    xhr.send(null);
}

function createXmlHttp(){
       var xmlHttp;
       try{ // Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();
        }
        catch (e){
           try{// Internet Explorer
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
              }
            catch (e){
              try{
                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
              catch (e){}
              }
        }

        return xmlHttp;
     }
</script>


 <script>
  function fun(t)
  {
    t.style.display='';
  }
  function show(t)
  {
    t.style.display='none';
    }
 </script>

 </head>
<body>

<div id="main_container">
  <div class="top_bar"></div>
    <div id="header">
    </div>
    
   <div id="main_content"> 
            <div id="menu_tab">
            <div class="left_menu_corner"></div>
                    <ul class="menu">
                         <li><a href="/" class="nav1">首页</a></li>
                         <li class="divider"></li>
                         <li><a href="showCar.jsp" class="nav5">购物车</a></li>
                         <li class="divider"></li>
                         <c:if test="${empty username}">
                         <li><a href="/login" class="nav3">用户登录</a></li>
                         <li class="divider"></li> 
                         <li><a href="/regist" class="nav6">用户注册 </a></li>
                         <li class="divider"></li>
                         </c:if>
                         <li><a href="/admin/login" class="nav2">后台管理</a></li>
                         <li class="divider"></li>
                    </ul>

             <div class="right_menu_corner"></div>
            </div><!-- end of menu tab -->
    
    </div> 
    
    <div class="crumb_navigation">
    导航:  <span class="current"><a href="/">首页</a> &gt;&gt;用户注册</span>
    
    </div>
    <div align="right"><form name="searchform" action="CommodityAction!findCommodityByName.action" method="post">
    <input id="commodity.commodityName" name="commodity.commodityName" style="font-size: 10pt; color: rgb(85, 85, 85);" οnfοcus="if(this.value=='请输入您所要查找的商品名称'){this.value='';}" οnblur="if(this.value==''){this.value='请输入您所要查找的商品名称';}" value="请输入您所要查找的商品名称" size="25" maxlength="30" type="text" />
<input name="搜索" type="submit" value="搜索" />
    </form></div>
    
    <table border="0" cellpadding="0" cellspacing="0" align="center" width=100% height="400px" bgcolor="#e9e7e7">
    <tr>
    <td width=20%>
      </td>
    
    <td class="center_content" width=100% height=500px align="center" >
    <form name="myform" method="post" action="/saveRegist" id="myform" οnsubmit="return check();">
   
  <table width=500 border="0" align="center" bgcolor="#e9e7e7">
  <tr ><td  colspan=3  bgcolor="#c0c0c0" align="center" ><h3>用户注册</h3></td> 
     
    </tr>
    <tr > 
      <td width=60 height=30>用户名:</td>
      <td width=100> 
        <input id="username" type="text" name="username" size="20" οnclick="fun(msg)"  οnblur="checkUsername()"/>
        <span id="span1"></span>
      </td>
      <td width=220> 
        <div  id=msg style="color:#ff0000;display:none;">用户名长度为8至15位</div>
      </td>
    </tr>
    <tr> 
      <td height=30>密码:</td>
      <td width=100> 
        <input id="password" type="password" name="password" size="20" οnclick="fun(msg1)"  οnblur="show(msg1)"/>
      </td>
       <td width=180> 
        <div  id=msg1 style="color:#ff0000;display:none;">密码长度为8至15位</div>
      </td>
    </tr>
    <tr> 
      <td height=30 >确认密码:</td>
      <td width=100> 
        <input id="repassword" type="password" name="pwd2" size="20" οnclick="fun(msg2)"  οnblur="show(msg2)"/>
      </td>
       <td width=180> 
        <div  id=msg2 style="color:#ff0000;display:none;">两次输入的密码必须相同</div>
      </td>
    </tr>
  
    <tr> 
      <td height=30>用户姓名:</td>
      <td width=100> 
        <input id="name" type="text" name="name" size="20" οnclick="fun(msg3)"  οnblur="show(msg3)"/>
      </td>
       <td width=180> 
        <div  id=msg3 style="color:#ff0000;display:none;">输入您的姓名</div>
      </td>
    </tr>
    <tr> 
      <td height=30>性别:</td>
      <td width=100> 
        <input  type="radio" name="sex" value="0" checked="checked"/>男
        <input  type="radio" name="sex" value="1"/>女</td>
        <td > 
       
      </td>
    </tr>
    <tr>
    <td height=30>用户电话:</td>
      <td width=100> 
        <input id="phone" type="text" name="phone" size="20" οnclick="fun(msg4)"  οnblur="show(msg4)"/>
      </td>
       <td width=180> 
        <div  id=msg4 style="color:#ff0000;display:none;">输入您联系电话</div>
      </td>
    </tr>
    <tr>
    <td height=30>邮编:</td>
      <td width=100> 
        <input id="post" type="text" name="mailingAddress" size="20" οnclick="fun(msg7)"  οnblur="show(msg7)"/>
      </td>
       <td width=180> 
        <div  id=msg7 style="color:#ff0000;display:none;">输入您的准确邮编</div>
      </td>
    </tr>
    <tr>
    <td height=30>收货地址:</td>
      <td width=100> 
        <input id="address" type="text" name="address" size="20" οnclick="fun(msg5)"  οnblur="show(msg5)"/>
      </td>
       <td width=180> 
        <div  id=msg5 style="color:#ff0000;display:none;">输入您的准确收货地址</div>
      </td>
    </tr>
    <tr> 
      <td height=30>电子邮件:</td>
      <td width=100> 
        <input id="email" type="text" name="email" size="20" οnclick="fun(msg6)"  οnblur="show(msg6)"/>
      </td>
      <td width=180> 
        <div  id=msg6 style="color:#ff0000;display:none;">填写如111111@zzuli.com的地址</div>
      </td>
    </tr>
  <tr><td><input type="hidden" name="accountAmount" value="1000"/>
  </td><td> <input type="submit" name="submit1" value="提交" />
    <input type="reset" name="Submit2" value="重置" /></td>
  </tr>
  </table>
</form>
      
    </td>
    </tr>
    </table>
  
   <div class="footer" align="center"><br />&copy;&nbsp;2018&nbsp;|&nbsp;武汉工程大学邮电与信息学院版权所有             
                    <div align=center>
                        电话:86-(0)371-63556001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址:湖北省武汉市洪山区邮科院路88路

                    </div>
   </div>
</div>
</body>
</html>

登录页面

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>校园网上购物系统</title>
<link rel="stylesheet" type="text/css" href="../statics/js/style.css" />
<style>
.main_iframe {
    Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 92%
    </style>
<script type="text/javascript" src="../statics/js/boxOver.js"></script>

 </head>
 
<body>

<div id="main_container">
  <div class="top_bar"></div>
    <div id="header">
</div>
    
   <div id="main_content"> 
            <div id="menu_tab">
            <div class="left_menu_corner"></div>
                    <ul class="menu">
                         <li><a href="/" class="nav1">首页</a></li>
                         <li class="divider"></li>
                         <li><a href="showCar.jsp" class="nav5">购物车</a></li>
                         <li class="divider"></li>
                         <c:if test="${empty username}">
                         <li><a href="/login" class="nav3">用户登录</a></li>
                         <li class="divider"></li> 
                         <li><a href="/regist" class="nav6">用户注册 </a></li>
                         <li class="divider"></li>
                         </c:if>
                         <li><a href="/admin/login" class="nav2">后台管理</a></li>
                         <li class="divider"></li>
                    </ul>

             <div class="right_menu_corner"></div>
            </div><!-- end of menu tab -->
    
    </div> 
    
    <div class="crumb_navigation">
    导航:  <span class="current"><a href="/">首页</a>&gt;&gt;用户登录</span>
    
    </div>
  <div align="right"><form name="searchform" action="CommodityAction!findCommodityByName.action" method="post">
    <input id="commodity.commodityName" name="commodity.commodityName" style="font-size: 10pt; color: rgb(85, 85, 85);" οnfοcus="if(this.value=='请输入您所要查找的商品名称'){this.value='';}" οnblur="if(this.value==''){this.value='请输入您所要查找的商品名称';}" value="请输入您所要查找的商品名称" size="25" maxlength="30" type="text" />
<input name="搜索" type="submit" value="搜索" />
    </form></div>
    
    <div></div>
    <table width=100% bgcolor="#e9e7e7"><tr><td width=20%></td>
    <td class="center_content" width=100% height=400px align=center >
    
    <form action="/checkLogin" name="form" method="post" >
           <div class="title_box">用户登录</div>  
        <div class="border_box">
        <p>用户名:<input  name="username" type="text" style="width:110px" /></p>
        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码:<input name="password" type="password" style="width:110px" /></p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input name="提交" type="submit" value="登录" /><input name="重置" type="reset" value="重置" />
        </p>
        <p align="center">&nbsp;&nbsp;&nbsp;[<a href="/regist">新用户注册</a>] &nbsp;[<a href="/findPass" >忘记密码</a>]</p>
        
     </div>  </form>
       
    </td></tr>
    </table>
    
   <div class="footer" align="center"><br />&copy;&nbsp;2018&nbsp;|&nbsp;武汉工程大学邮电与信息学院版权所有         
                    <div align=center>
                        电话:86-(0)371-63556001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址:湖北省武汉市洪山区邮科院路88路
                    </div>
   </div>
</div>   

</body>
</html>

 

项目演示地址:

个人网站:http://xiaocaoshare.com/

演示地址:

链接:https://pan.baidu.com/s/1DgZei20slJAUSRHgfHz7Gw 
提取码:tbdz

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值