电子购物商城项目总结

最新推荐文章于 2019-05-22 18:50:49 发布

qq_28587803

最新推荐文章于 2019-05-22 18:50:49 发布

阅读量3.2k

点赞数 3

分类专栏： web基础文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/qq_28587803/article/details/49233721

版权

web基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

所要实现的购物网站系统是一个功能比较完善的购物管理网站，该系统属于内容管理系统CMS（Content Management System），是一个基于各种商品的发布和管理的管理系统,它是基于B/S模式的系统，可以完成购物网站系统的大部分功能。游客进入前台首页后，可以根据商品类别选择查看相应的商品，也可以直接查看所有商品的详细信息进行选择。当游客需要进行购买操作的时候，需要进行登录操作，如果没有账户可以进行注册操作，当成功登录后可以实现购买操作、查看购物车、查看订单等操作。在前台首页的“联系我们”中有“管理登录”，可以直接进入后台管理系统，党管理员登录后可以根据自己的权限不同看到不同界面，然后实现管理员管理、订单管理、商品管理、商品类别管理、用户管理等操作。

Windows系统系所用软件：mysql数据库，myeclipse-2014，apache-tomcat-8.0.21，jdk1.8

项目流程:1.使用filter实现查看订单、用户管理、购物车、购买商品等页面必须登录后才能查看2.使用JavaScript结合正则表达式规范注册用户内容3.商品列表的分页功能4.点击商品查看的超链接通过servlet可以进入购买页面，同时将商品的id参数传递过去5.在商品购买页面显示所选择商品的详细信息6.通过servlet得到的所选商品信息以及商品数量增加一个购物车，同时将该购物车增加到购物车列表中7.购物车页面显示登录用户的购物车列表，并且可以修改购买数量和删除商品，这里修改需要使用javaScript的onclick方式提交8.下单后进入填写订单页面，提交订单后删除购物车的商品

项目难点及部分代码：

1.使用JavaScript结合正则表达式规范注册用户内容

<script>
function reset(){
	document.getElementById("userNiName").value = "";
	document.getElementById("userName").value = "";
	document.getElementById("userPwd").value = "";
	document.getElementById("confirmuserPwd").value = "";
	document.getElementById("userEmail").value = "";
	document.getElementById("userPhone").value = "";
	document.getElementById("userAge").value = "";
}
var code = "";
function iniState(){
	//默认获得输入焦点
	document.getElementById("userNiName").focus();	
	//产生验证码
	getValidateCode();
}
//生成四位随机数
function getValidateCode(){
	var vCode = "0000";
	vCode = String(Math.round(Math.random()*10000));
	while(vCode.length < 4){
		vCode = "0" + vCode;
	}
	document.getElementById("div_vcode").innerHTML = vCode;
	code = document.getElementById("div_vcode").innerHTML;
}
//显示错误提示信息div方法
function showErrorMsg(eId,msg){
	document.getElementById(eId).innerHTML = msg;
	document.getElementById(eId).style.display = "";
}
//隐藏错误提示信息div方法
function clearMsg(eId){
	document.getElementById(eId).style.display = "none";	
}


function verifyuserNiname(UNiName,eId){
	var msg = "";
	var strUserName = UNiName.trim();//去除空格
	//用户名必须为6-20位
	if(strUserName.length < 3 || strUserName.length > 20){
		msg = "用户名必须3-20位";
		showErrorMsg(eId,msg);
		return(false);	
	}else{
		clearMsg(eId);
		return (true);
		
	}
}
.......


function verifyInput(){
	//通过表单名称，得到输入表单
	/* var form = document.form; */
	//依次验证
	if(verifyuserNiname(form.userNiName.value,"init_userNiName")&&
			verifyuserName(form.userName.value,"init_userName")&&
			verifyuserPwd(form.userPwd.value,"init_userPwd")&&
			verifyconfirmuserPwd


(form.userPwd.value,form.confirmuserPwd.value,"init_confirmuserPwd")&&
			verifyuserEmail


(form.userEmail.value,"init_userEmail")&&
			verifyuserPhone


(form.userPhone.value,"init_userPhone")&&
			verifyuserAge(form.userAge.value,"init_userAge"))
	{
		alert("恭喜，注册成功");
		document.getElementById("form").submit();
		return(true);
	}else{
		alert("注册失败，请按红色提示信息修改");
		
		return(false);
		}
	}
</script>

<tr>
						<td width="80" height="40">昵称：</td>
						<td><input type="text" name="userNiName" id="userNiName"
							οnfοcus="clearMsg('init_userNiName')"
							οnblur="verifyuserNiname(form.userNiName.value,'init_userNiName')"></td>
						<td width="300" id="init_userNiName"></td>
					</tr>

2.分页功能

<div class="goods_show_body_top">
					<table>
					<tr>
						<td>商品编号</td>
						<td>商品类型编号</td>
						<td>商品名称</td>
						<td>商品价格</td>
						<td>供应商</td>
					</tr>
						<%
							Connection con = JDBCUtil.getConnection();
							String sql = "select * from goods";
					 		PreparedStatement ps = con.prepareStatement(sql);
							ResultSet rs = ps.executeQuery();
							rs.last();
							int size = rs.getRow();
							int pageCount = (size % 5 == 0 ? (size / 5) : (size / 5 + 1));
							String tmp = request.getParameter("curPage");
							if (tmp == null) {
								tmp = "1";
							}
							int curPage = Integer.parseInt(tmp);
							if (curPage >= pageCount)
								curPage = pageCount;
							if(curPage <= 0)
								curPage = 1;
							boolean flag = rs.absolute((curPage - 1) * 5 + 1);
							out.println(curPage);
							int count = 0;
							do {
								if (count >= 5)
									break;
								int goodsId = rs.getInt(1);
								int goodsTypeId = rs.getInt(2);
								String goodsName = rs.getString(3);
								double goodsPrice = rs.getDouble(4);
								String goodsPicture = rs.getString(5);
								String goodsSupplier = rs.getString(6);
								count++;
						%>
						<tr>
							<td><%=goodsId%></td>
							<td><%=goodsTypeId%></td>
							<td><%=goodsName%></td>
							<td><%=goodsPrice%></td>
							<td><%=goodsSupplier%></td>
							<td>
								<div class="aa">
									<a href="ShowGoodsServlet?id=<%=goodsId%>">查看</a><br />
									<div class="bb">
										<img src="/shopping/Images/<%=goodsPicture%>">
									</div>
							</td>
						</tr>
						<%
							} while (rs.next());
							con.close();
						%>
					</table>
				</div>


				<div class="goods_show_body_pages">
					<a href="user/goodsShow.jsp?curPage=1">首页</a> 
					<a href="user/goodsShow.jsp?curPage=<%=curPage - 1%>">上一页</a> <a
						href="user/goodsShow.jsp?curPage=<%=curPage + 1%>">下一页</a> <a
						href="user/goodsShow.jsp?curPage=<%=pageCount%>">尾页</a> 第<%=curPage%>页/共<%=pageCount%>页
				</div>
			</div>

3.购物车页面显示登录用户的购物车列表，并且可以修改购买数量和删除商品，这里修改需要使用javaScript的onclick方式提交

<script>
function redirectUrl(action,id){
		var number = document.getElementById("cartNumber"+id).value;
		if(action=='DeleteCartServlet'){
			window.location.href=action+"?cartsListId="+id;
		}else{
			window.location.href=action+"?cartsListId="+id


+"&number="+number;
		}
	}
</script>

<c:forEach items="${cartsList }" var="carts">
						<tr>
							<td>${carts.cartsListId}</td>
							<td>${carts.cartsId}</td>
							<td>${carts.goodsId}</td>
							<td>${carts.goodsPrice}</td>
							<td><input type="text" name="number" id="cartNumber${carts.cartsListId}"
								value="${carts.goodsAmount }" size="3"></td>
							<td><a href="javascript:void(0);" οnclick="redirectUrl('UpdateCartServlet',${carts.cartsListId})"><input type="button" value="确定"></a>
								<a href="javascript:void(0);" οnclick="redirectUrl('DeleteCartServlet',${carts.cartsListId})"><input
									type="button" value="删除"></a></td>
									
						</tr>
						
</c:forEach>

4.图片存储到数据库和查看图片

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		String pic = "";
		int goodsTypeId = 0;
		String goodsName="";
		double price = 0;
		String gys = "";
		//硬盘文件工厂类
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//servlet文件上传类
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			//获取到发送过来的请求的项目
			List items = upload.parseRequest(request);
			Iterator itr = items.iterator();
			//迭代发送过来的内容项目
			while (itr.hasNext()) {
				FileItem item = (FileItem) itr.next();
				//判断是否是普通的表单，来源于form的enctype属性
				if (!item.isFormField()) {
					//如果当前内容不为空
					if (item.getName() != null && !item.getName().equals("")) {
						//生成file文件
						File tempFile = new File(item.getName());
						//获取项目相关文件夹路径并加上图片名称进行上传存储
						System.out.println(sc.getRealPath("/"));
						File file = new File(sc.getRealPath("/")+"Images/",
								tempFile.getName());
						//写入项目目录
						item.write(file);
						//返回图片名称可作为保存使用
						pic = tempFile.getName();
						request.setAttribute("pic", pic);
						System.out.println(pic);
						// System.out.println(item.getContentType());
					}
				} else {
					//普通表单下如果有其他内容，这个位置就可以把其他内容获取一下并且转一下格式
					
					if (item.getFieldName().equals("pic")) {
						pic = item.getString("UTF-8");
					} 
					if(item.getFieldName().equals("goodsType")){
						String  StrgoodsTypeId = item.getString();
						goodsTypeId = Integer.parseInt(StrgoodsTypeId);
					}
					if(item.getFieldName().equals("goodsName")){
						goodsName = item.getString("UTF-8");
					}
					if(item.getFieldName().equals("price")){
						price = Double.parseDouble(item.getString());
					}
					if(item.getFieldName().equals("gys")){
						gys = item.getString("UTF-8");
					}
					
				}
			}
		} catch (Exception e) {
			request.setAttribute("errmsg",
					"<script>alert('fileUpload error')</script>");
		}
		PrintWriter out = response.getWriter();
		GoodsImpl goodsDao = new GoodsImpl();
		Goods goods = new Goods(goodsTypeId,goodsName
				,price,pic,gys);
		System.out.println(goods);
		int row = goodsDao.addGoods(goods);
		if(row>0){
			out.write("<script> alert('添加成功！');window.location.href='News/addGoods.jsp'; </script>");
		}else{
			out.write("<script> alert('添加失败！');window.location.href='News/addGoods.jsp'; </script>");
		}
	
	}

上传图片的部分代码

<tr>
						<td valign="middle" align="center" height="35px">图片：</td>
						<td valign="middle" align="center"><input type="file"
							name="pic" />
							<div align="left"></div></td>
					</tr>

查看图片部分代码

<div class="aa">
					查看图片
					<div class="bb">
						<img src="/ShoppingManager/Images/<%=goodsPicture%>">
					</div>

qq_28587803

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录