商城购物系统【用户登录注册，购物页面，购物车页面，订单页面】
商城购物系统
文章目录
- 商城购物系统
- 前言
- 一、使用Mysql数据库建立需要用的商品表，用户表
- 二、利用html+cs+js对前台进行设计
-
- 效果如下
- 2.对商品页与购物车页进行设计
- 总结
前言
这学期学习java web,再加上暑假自学的一些前端以及布局，完成了这个购物商城的设计，在这也非常感谢老师这一学期的指导。另声明本课设所以图片资源皆来自互联网，如有侵权，请联系本人删除。
提示：以下是本篇文章正文内容，下面案例可供参考
一、使用Mysql数据库建立需要用的商品表，用户表
二、利用html+cs+js对前台进行设计
lojin.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>login</title>
<style>
body {
background:url("image/backg.jpg");
}
</style>
</head>
<body onload="refreshCode() ;">
<!-- <p1>test!</p1> -->
<br>
<br>
<br>
<div class="loginpage">
<br> <br> <br>
<!--h2 align="center"><font size="5" color="red">欢迎登录</font></h2-->
<marquee scrollamount=2 width=350 height=75 scrolldely="10" align="center">
<b><font style="font-weight: normal; font-size: 60pt; line-height: normal;
font-style: normal; font-variant: normal" face=华文彩云 color=#66ff00><b>欢迎登陆</b></font></b></marquee>
<!--do_login.jsp -->
<form name="loginForm" action="dologin" method="post">
<table align="center">
<tr>
<td>用户名：</td>
<td><div class="ui input focus">
<input type="text" placeholder="" name="username">
</div></td>
</tr>
<tr>
<td>密码：</td>
<td><div class="ui input focus">
<input type="password" placeholder="" name="pwd">
</div></td>
<tr />
<tr>
<td>验证码：</td>
<td>
<input type="text" placeholder="" name="text1"/>
</td>
<td>
<!--div id="code_box">Af3D</div-->
<input type="text" id="code_box" name="trueCode" />
<!--input type="text" name="trueCode" style="display:none;"/-->
</td>
<tr />
<br>
</table>
<input type="submit" value="login" class="button" />
<input type="reset" value="reset" class="button1" />
</form>
<div>
<a href="rigest.jsp" class="btn" role="button" style="text-decoration: none;">立即注册</a>
</div>
</div>
<script>
function refreshCode() {
//62个字符 随机选择4位
var code_box = document.getElementById("code_box");
//var tyanzheng = document.getElementsByName("trueCode");
var code = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
var char1 = '';
var result = '';
for (var i = 0; i < 4; i++) {
var code_index = Math.round(Math.random()*61);
var char1 = code[code_index];
if (result.toUpperCase().indexOf(char1.toUpperCase()) > -1)
{
i --;
continue;
}
result += char1;
}
//code_box.innerHTML = result;
code_box.value = result;
// tyanzheng.value= result;
// console.log(tyanzheng.value);
}
//点击事件
code_box.onclick = refreshCode;
</script>
<style>
.loginpage {
height: 400px;
border: 1px solid #d7d7d7;
box-shadow: 0 0 20px #d7d7d7;
background-color: #fff;
position: absolute;
width: 382px;
color: #818181;
margin: 80px auto;
position: absolute;
left: 0;
right: 0;
background: rgba(216,216,216,0.5); /*设置form表单透明度*/
}
.button{
display: inline-block;
margin:20 0 0 120;
font-size: 15px;
background-color: white;
color: black;
border: 4px solid #4CAF50;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
.button1 {
display: inline-block;
margin:20 120 0 0;
font-size: 15px;
background-color: white;
color: black;
border: 4px solid #008CBA;
}
.button1:hover {
background-color: #008CBA;
color: white;
}
.submit-p {
margin-left: 120px;
margin-top:20px;
}
.btn{
position: absolute;
right: 10px;
bottom:10px;
color: white;
border: 2px solid yellow;
}
#code_box {
width: 47px;
height: 27px;
background-color: #f40;
line-height: 25px;
color: #fff;
font-size: 16px;
cursor: pointer;
-webkit-user-select: none; /*禁止用户选中文字*/
}
</style>
</body>
</html>
效果如下
2.对商品页与购物车页进行设计
<%@ page language="java" contentType="text/html; charset=utf-8"
import="dao.ItemsDAO,entity.Items" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品详情</title>
<style type="text/css">
table{
width=750px;
height=600px;
background: white;
}
button {
width: 100px;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size:125%
}
body {
background:url("image/x.jpg");
}
</style>
</head>
<body>
<h1>商品详情</h1>
<hr>
<center>
<table width="750" height="600" style="border: 2px solid #20B2AA" cellpadding="40px" align="center">
<tr >
<%
ItemsDAO itemDao = new ItemsDAO();
Items item = itemDao.getItemsById(Integer.parseInt(request.getParameter("id")));
if(item!=null)
{
%>
<td ><img src="image/<%=item.getPicture()%>" width="180" height="160"/></td>
<td><B><%=item.getName() %></B></td>
<td>产地：<%=item.getCity()%></td>
<td>价格：<%=item.getPrice() %>￥</td>
<td>购买数量:<br><span id="sub" onclick="sub();"style="display:inline-block;font-weight:bold;">-</span>
<input type="text" id="number"value="1"size="2">
<span id="add" onclick="add();" style="display:inline-block;font-weight:bold;">+</span>
</td>
</tr>
<tr>
<td> <a href="" ><img src="image/buy_now.png" /></a></td>
<td><a href="" id='a2' target="_blank"><img src="image/in_cart.png" onclick="oclick()"/></a></td>
<td><a href="CartServlet?action=show"><img src="image/view_cart.jpg"></a></td>
</tr>
<tr>
<%
}
%>
<td colspan="4">
<br><br>
<hr style="height:3px;border:none;border-top:3px double red;" />
<font color='#FC5656' size='5px'>已购记录</font>
</td>
<td colspan="1">
<button onclick="window.location='index.jsp'">
继续选购
</button>
</td>
</tr>
<%
String list ="";
//从客户端获得Cookies集合
Cookie[] cookies = request.getCookies();
//遍历这个Cookies集合"ListViewCookie"
if(cookies!=null&&cookies.length>0)
{
for(Cookie c:cookies)
{
if(c.getName().equals("ListViewCookie"))
{
list = c.getValue();
}
}
}
//加上刚刚浏览的这个商品的id
list+=request.getParameter("id")+"-";
//如果浏览记录超过100条，清零.
String[] arr = list.split("-");
if(arr!=null&&arr.length>0)
{
if(arr.length>=100)
{
list="";
}
}
//写回到cookie中
Cookie cookie = new Cookie("ListViewCookie",list);
//response.setHeader("Set-Cookie", String.valueOf(cookie));
response.addCookie(cookie);
%>
<!-- 循环开始 -->
<%
ArrayList<Items> itemlist = itemDao.getViewList(list);
if(itemlist!=null&&itemlist.size()>0 )
{
System.out.println("itemlist.size="+itemlist.size());
for(Items i:itemlist)
{
%>
<tr>
<td ><a href="goodDetail.jsp?id=<%=i.getId()%>"><img src="image/<%=i.getPicture() %>" width="120" height="90" border="1"/></a></td>
<td><B><%=item.getName() %></B></td>
<td>产地：<%=item.getCity()%></td>
<td>价格：<%=item.getPrice() %>￥</td>
</tr>
<%
}
}
%>
<!-- 循环结束 -->
</table>
</center>
<script type="text/javascript">
function oclick(){
var num = parseInt(document.getElementById("number").value);
var a1 = document.getElementById("a2");
a1.href="CartServlet?action=add&id=<%=item.getId()%>&number="+num;
}
function add()
{
var num = parseInt(document.getElementById("number").value);
if(num<100)
{
document.getElementById("number").value=++num;
}
}
function sub()
{
var num = parseInt(document.getElementById("number").value);
if(num>1)
{
document.getElementById("number").value=--num;
}
}
</script>
</body>
</html>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%@ page import="entity.Cart" %>
<%@ page import="entity.Items" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Cart</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script language="javascript">
function delcfm() {
if (!confirm("确认要删除？")) {
window.event.returnValue = false;
}
}
</script>
<style type="text/css">
.total{
position:absolute;
left:67%;
}
#total{
color:blue;
font-weight:bold;
}
#shopping{
background:url("image/backg1.jpg");
}
table{
background: white;
}
</style>
</head>
<body>
<h1>我的购物车</h1>
<a href="index.jsp">首页</a> >> <a href="index.jsp">商品列表</a>
<hr>
<div id="shopping">
<table style="border: 3px solid #20B2AA" cellpadding="30px" align="center">
<tr>
<th>商品名称</th>
<th>商品单价</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<%
//判断session中是否存在
if(request.getSession().getAttribute("cart")!=null)
{
%>
<%
Cart cart = (Cart)request.getSession().getAttribute("cart");
HashMap<Items,Integer> goods = cart.getGoods();
Set<Items> items = goods.keySet();
Iterator<Items> it = items.iterator();
while(it.hasNext())
{
Items i = it.next();
%>
<tr name="products" id="product_id_1">
<td class="thumb"><img src="image/<%=i.getPicture() %>"width="100" height="100"/>
<a href=""><%=i.getName() %></a></td>
<td class="number"><%=i.getPrice() %></td>
<td class="price" id="price_id_1">
<span><%=i.getPrice()*goods.get(i) %></span>
<input type="hidden" value="" />
</td>
<td class="number">
<%=goods.get(i)%>
</td>
<td class="delete">
<a href="CartServlet?action=delete&id=<%=i.getId()%>" onclick="delcfm();">删除</a>
</td>
</tr>
<%
}
%>
</table>
<div class="total"><span id="total">总计：<%=cart.getTotalPrice()%>￥</span></div>
<%
}
%>
</div>
</body>
</html>
总结
总体来说本人这门课学的还算不错，并且此商城购物系统逻辑不算复杂，功能也很好实现。麻雀虽小，五脏俱全，一个小课设包含了HTML+css页面设计前端页面，jsp语法，使用request与response对象实现后台与前端的交互，使用session对象存储购物车，使用cookie对象存储访问记录以及jstl标签等等，差不多一个学期学的都用上了。但由于对css不太熟练，本想将页面进一步美化，发现是真难，我当时商品主页的页面设计就花费了半天，使用的盒模型，自己一块块的填充着实有些繁琐。而购物主页则使用表格布局，发现自己布局虽然麻烦点，但往往效果会好很多。