JavaWeb项目：java+servlet 网上商城
此项目为本人的Java大作业。
前台代码；代码已经上传到github上 下载地址 Github
一、项目概况
1.1设计内容
主要是实现网上购物，包括前后台，后台包括：分类管理，用户管理，商品管理，订单管理等；前台包括：分类管理的展示，注册，登录，商品列表页的显示，浏览记录，购物车，订单，商品详情，易宝支付等。
后台的分类管理、用户管理，商品管理主要是增删改查，订单管理，主要是前台用户提交的，我们管理员只能查看订单详情，不能修改和删除。利用ajax实现查看订单的订单项。
前台的分类展示，利用的是redis非关系型数据库实现的。
注册功能：采用的是邮箱验证，注册成功后，必须经过邮箱**，才能进行登录。
登录功能：采用session中保存用户名和密码，实现自动登录，。
商品列表页的显示：主要是根据分类管理的id查询对应的商品。
浏览记录：主要采用的是将浏览过的商品暂时保存到cookie中，然后判断，本次浏览的商品是否浏览过，如果浏览过，直接将本商品的位置放到第一位，否则，直接将商品放到第一位。
购物车：此功能不涉及表，主要是将购物车的内容保存到session中，提交购物车，购物车直接清空。
订单：主要是将购物车的所有东西，转换成订单，然后填上收货人，地址，联系方式，提交订单。
此系统开发期间我们小组不定时地进行用户使用反馈信息收集，根据收集数据不断对系统进行优化、完善。目的是希望从使用者的角度查找系统的缺陷之处，继而使得整个系统的运行、结构更加清晰化、条理化、自动化。
1.2开发工具
Eclipse或者Myeclipse，Java，MySQL，Redis，Html，CSS，JS。
二、详细设计
2.1网站结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易买网 - 登录</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="scripts/myfunction.js"></script>
<style>
.code {
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
</style>
</head>
<body οnlοad="createCode()">
<div id="header" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="help">
</div>
<div class="navbar">
<ul class="clearfix">
<li class="current">
<a href="index.html">首页</a>
</li>
<li class="nav_1">
<a href="javascript:void(0);" id="1" οnclick="bignav(this.id)">图书</a>
</li>
<!-- <li class="nav_2">
<a href="javascript:void(0);" id="2" οnclick="bignav(this.id)">百货</a>
</li>
<li class="nav_3">
<a href="javascript:void(0);" id="3" οnclick="bignav(this.id)">家居</a>
</li>
<li class="nav_4">
<a href="javascript:void(0);" id="4" οnclick="bignav(this.id)">食物</a>
</li> -->
</ul>
</div>
</div>
<div id="childNav">
<div class="wrap">
<ul class="clearfix" id="nav">
</ul>
</div>
</div>
<div id="register" class="wrap">
<div class="shadow">
<em class="corner lb"></em>
<em class="corner rt"></em>
<div class="box">
<h1>欢迎回到易买网</h1>
<table>
<tr>
<td class="field">用户名：</td>
<td><input class="text" type="text" id="userName" name="userName" οnfοcus="FocusItem(this)" οnblur="CheckItem(this);" /><span></span></td>
</tr>
<tr>
<td class="field">登录密码：</td>
<td><input class="text" type="password" id="passWord" name="passWord" οnfοcus="FocusItem(this)" οnblur="CheckItem(this);" /><span></span></td>
</tr>
<tr>
<td class="field">验证码：</td>
<!--
<td><input class="text verycode" type="text" name="veryCode" οnfοcus="FocusItem(this)" οnblur="CheckItem(this);" /><img id="veryCode" src="" /><span></span></td>
-->
<td>
<input type="text" id="validCode" class="text verycode">
<input type="text" onClick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px;cursor:pointer" />
</td>
</tr>
<tr>
<td></td>
<td><label class="ui-green"><input type="submit" name="submit" value="立即登录" οnclick="validate()"/></label></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
Copyright © All Rights Reserved. 1000001号
</div>
</body>
<script>
//加载
$(function() {
getnav(); //获取栏目
})
//登陆信息
var user = sessionStorage.getItem("User");
if(user == null) {
var target = $('.help');
var str = '<a href="shopping.html" class="shopping">购物车</a>' +
'<a href="login.html">登录</a>' +
'<a href="register.html">注册</a>' +
'<a href="guestbook.html">留言</a>';
target.append(str);
} else {
var name = JSON.parse(user).userName;
var target = $('.help');
var str = '<lable>' +
name + '</lable><button οnclick="out()">登出</button>';
target.append(str);
alert("请不要重复登陆！！");
setTimeout(function() { //一秒后跳转
location.href = "index.html";
}, 1000);
}
var code;
//验证码生成和刷新
function createCode() {
code = "";
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
for(var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];
}
if(checkCode) {
checkCode.className = "code";
checkCode.value = code;
checkCode.blur();
}
}
function validate() {
var inputName = $('#userName').val().trim();
var inputPassword = $('#passWord').val().trim();
var inputcode = $('#validCode').val().trim();
if(inputName == 0) {
alert("请输入用户名！");
} else if(inputPassword == 0) {
alert("请输入密码！");
} else if(inputcode.length <= 0) {
alert("请输入验证码！");
} else if(inputcode.toUpperCase() != code) {
alert("验证码输入错误！");
createCode(); //刷新验证码
} else {
submit();
}
}
function submit() {
var req = {};
req.userName = $('#userName').val().trim();
req.passWord = $('#passWord').val().trim();
$.ajax({
type: "post",
url: "Login",
data: req,
dataType: 'json',
success: function(resp) {
//var a = JSON.get("result")
if(resp.hasOwnProperty("result")) {
alert("登录失败！请检查账号是否正确");
window.location.reload();
} else {
sessionStorage.setItem("User", JSON.stringify(resp));
location.href = "index.html";
}
}
});
}
//一级标题查找二级标签 一级标签：图书/百货/家居/食物
function bignav(id) {
var target = $("#nav");
//清空二级标签
target.html("");
$(".current").removeClass('current');
var nav_big = '.nav_' + id;
$(nav_big).addClass('current');
var req = {};
req.id = id;
$.ajax({
type: "get",
url: "navFind",
data: req,
dataType: 'json',
success: function(resp) {
for(var row of resp) {
//上侧
var str = '<li><a href="goods-list?name=' +
row.navName + '">' +
row.navName + '</a></li>';
target.append(str);
}
}
});
}
</script>
</html>