“品优购”电商平台

实现功能模块

“品优购”电商平台的首页，将每一部分的点击事件进入的链接进行加入；注册页面register.html的input的属性中加入name属性，分别对应为

<input type="text"  name="username" placeholder="请输入你的用户名" class="input-xfat input-xlarge">
<input type="password" id="password" name="password" placeholder="设置登录密码" class="input-xfat input-xlarge" name="password">
<input type="password" name="password2" placeholder="再次确认密码" class="input-xfat input-xlarge">
<input type="text"  name="mobile" placeholder="请输入你的手机号" class="input-xfat input-xlarge" name="mobile">
<input type="submit" class="sui-btn btn-block btn-xlarge btn-danger" value="完成注册"></input>

登录页面login.html的form表单提交的时候提交的属性action，对应

<form class="sui-form" action="user?cmd=query" method="post">

同理和注册相仿，input属性的name，

<input name="username" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat">

退出的超链接

<a href="user?cmd=quit">&nbsp&nbsp退出</a>

商品详情页，在index页面在猜你喜欢的下面所展示的图片中加入超链接

<a href="item.html" class="pic"><img nsrc="img/like_02.png" alt="" /></a>

进入商品详情页面item.html的页面进行购物车的加入
进入购物车cart.jsp加入一个foreach语句，一个动态数据

<c:forEach items="${map.goods}" var="good">
						<div class="cart-list">
							<p hidden>${good.id }</p>
							<ul class="goods-list yui3-g">
								<li class="yui3-u-1-24">
									<input type="checkbox" name="" id="" value="" />
								</li>
								<li class="yui3-u-11-24">
									<div class="good-item">
										<div class="item-img"><img src="${good.image}"/></div>
										<div class="item-msg">${good.message}</div>
									</div>
								</li>
								
								<li class="yui3-u-1-8"><span class="price">${good.price}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment mins">-</a>
									<input autocomplete="off" type="text" value="${good.number}" minnum="1" class="itxt" />
									<a href="javascript:void(0)" class="increment plus">+</a>
								</li>
								<li class="yui3-u-1-8"><span class="sum">${good.sum}</span></li>
								<li class="yui3-u-1-8">
									<a href="#none">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>	
						</c:forEach>

结算页pay.jsp中对最后结算的商品进行操作

<span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥${map.sumPrice}</em>元</span>

支付成功页面paysuccess.html
支付失败页面payfail.html
UserC.java 登录注册

	private UserService userService=new UserService();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		String cmd = req.getParameter("cmd");
		if("add".equals(cmd)) {//注册
			//获取参数
			String id = req.getParameter("id");
			String username = req.getParameter("username");
			String password = req.getParameter("password");
			String mobile = req.getParameter("mobile");
			User user = new User(id, username, password, mobile);
			System.out.println(user);		
			
			//业务逻辑
			int result=userService.addUser(user);
			String data="";
			if(result>0) {//注册成功
				data="{\"result\":\"1\"}";
			}else {//注册失败
				data="{\"result\":\"0\"}";
			}
			
			//返回数据
			resp.setContentType("text/json;charset=UTF-8");
			PrintWriter out = resp.getWriter();
			out.write(data);
			out.close();
		}else if("query".equals(cmd)) {//登录
			String username = req.getParameter("username");
			String password = req.getParameter("password");
			System.out.println(username);
			System.out.println(password);
			
			User user = userService.queryUser(username, password);
			if(user!=null) {//登录成功
				req.getSession().setAttribute("user", user);
				resp.sendRedirect("index.jsp");
			}else {//登录失败
				resp.sendRedirect("login.html");
			}
		}else if("quit".equals(cmd)) {
			req.getSession().removeAttribute("user");
			resp.sendRedirect("index.jsp");
		}
	}

Cart.jsp的页面信息

<c:forEach items="${map.goods}" var="good">
						<div class="cart-list">
							<p hidden>${good.id }</p>
							<ul class="goods-list yui3-g">
								<li class="yui3-u-1-24">
									<input type="checkbox" name="" id="" 	value="" />
								</li>
								<li class="yui3-u-11-24">
									<div class="good-item">
										<div class="item-img"><img 	src="${good.image}"/></div>
										<div 	class="item-msg">${good.message}</div>
									</div>
								</li>
								
								<li class="yui3-u-1-8"><span 	class="price">${good.price}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment 										<input autocomplete="off" type="text" 	value="${good.number}" minnum="1" class="itxt" />
									<a href="javascript:void(0)" class="increment p	lus">+</a>
								</li>
								<li class="yui3-u-1-8"><span c	lass="sum">${good.sum}</span></li>
								<li class="yui3-u-1-8">
									<a href="#none">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>	
						</c:forEach>

项目整体架构


Index.jsp页面

商品详情页面

加入购物车，页面结算


代码链接点击