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>密 码:<input id="password" name="password" type="password" style="width:110px"/></p>
<p> <input name="提交" type="submit" value="登录" /><input name="重置" type="reset" value="重置" />
</p>
<p align="center"> [<a href="/regist">新用户注册</a>] [<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>] [<a href="/updatePass" >修改密码</a>] </p>
<p> [<a href="/personInfo">个人信息</a>] [<a href="/loginOut" οnclick="return confirm('确定要退出吗?')" >退出系统</a>] </p>
</div>
</c:if>
</td>
</tr>
</table></td>
</tr>
</table>
<div class="footer" align="center"><br />© 2018 | 肖毅然个人版权所有
<div align=center>
电话:86-(0)371-110 地址:湖北省黄冈 市
</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> >>用户注册</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 />© 2018 | 武汉工程大学邮电与信息学院版权所有
<div align=center>
电话:86-(0)371-63556001 地址:湖北省武汉市洪山区邮科院路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>>>用户登录</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>密 码:<input name="password" type="password" style="width:110px" /></p>
<p> <input name="提交" type="submit" value="登录" /><input name="重置" type="reset" value="重置" />
</p>
<p align="center"> [<a href="/regist">新用户注册</a>] [<a href="/findPass" >忘记密码</a>]</p>
</div> </form>
</td></tr>
</table>
<div class="footer" align="center"><br />© 2018 | 武汉工程大学邮电与信息学院版权所有
<div align=center>
电话:86-(0)371-63556001 地址:湖北省武汉市洪山区邮科院路88路
</div>
</div>
</div>
</body>
</html>
项目演示地址:
演示地址:
链接:https://pan.baidu.com/s/1DgZei20slJAUSRHgfHz7Gw
提取码:tbdz