java_web_电商项目
- 1.登录界面
- 2.注册界面
- 3. 主界面
- 4.分页界面
- 5.商品详情界面
- 6. 购物车界面
- 7.确认订单界面
- 8.个人中心界面
- 9.收货地址界面
- 10.用户信息界面
- 11.用户余额充值界面
- 12.后台首页
- 13.后台商品增加
- 14.后台用户增加
- 15.用户管理
- 16.源码分享
- 1.登录页面的源码
- 2.我们的主界面
1.基于小米商城为本进行的一个延申，简介。
.我们所写的web_项目所用的是Oracle数据库 ，jdk是1.8， tomcat-9.0服务器。
2.项目多数是使用Ajax实现，有较少页面会出现空白。
3.我们的原型本来是基于小米项目，有些不伦不类，但是还是写出来了。
4.所有功能都实现了，包括购物车，等等，算是比较完美，基本上没有什么bug。需要·源码·请私信我。
1.登录界面
2.注册界面
3. 主界面
4.分页界面
5.商品详情界面
6. 购物车界面
7.确认订单界面
8.个人中心界面
9.收货地址界面
10.用户信息界面
11.用户余额充值界面
12.后台首页
13.后台商品增加
14.后台用户增加
15.用户管理
1.我们所写的web_项目所用的是Oracle数据库 ，jdk是1.8， tomcat-9.0服务器。
2.项目多数是使用Ajax实现，有较少页面会出现空白。3.我们的原型本来是基于小米项目，有些不伦不类，但是还是写出来了。4.所有功能都实现了，包括购物车，等等，算是比较完美，基本上没有什么bug。
是比较好的web项目了。
下面我会分享一些源码，供大家参考。
16.源码分享
1.登录页面的源码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="static/common/images/dr.png"><title>User login</title><link rel="stylesheet" href="${pageContext.servletContext.contextPath }/static/common/css/bootstrap.min.css"><script src="${pageContext.servletContext.contextPath }/static/common/js/jquery-3.6.0.js" type="text/javascript"charset="utf-8"></script><style>*{margin: 0;padding: 0;}body{background-image: url("static/common/images/drbj.png");background-size: cover;background-size: 100%;}.content{margin-top:200px;background-size: cover;margin-left:300px;display: flex;height:450px;width:1000px;justify-content: center;box-shadow: 0 0 70px aliceblue;border-radius: 30px;align-items: center;}.login-content{position: relative;width: 800px;height: 360px;/* background-image: url("static/common/images/drbj.png"); */border-radius: 30px;padding: 30px; }.banner-box{display: inline-block;width: 500px;height: 100%;/* background: url(images/01.jpg) no-repeat; *//* cover 铺满 图片铺满盒子*/background-size: cover;border-radius: 20px 0 0 20px;}.login-box{width: 330px;height: 100%;position: absolute;top: 0;right: 0;border-radius: 0 30px 30px 0;display: flex;flex-direction: column;align-items: center;}.login-box>h1{font-size: 36px;margin:30px 0px 40px 0px;color: #fff;}.login-box>input{width: 200px;height: 36px;padding: 0 20px;border-radius: 36px;/* 解决点击响应 */border: none;outline: none;font-size: 18px;}.login-btn{width: 200px;height: 36px;background-color: rgb(122, 4, 168);border: none;border-radius: 36px;color: #fff;font-size: 18px;margin-bottom: 20px;}/* 平板适配 */@media screen and (max-width: 900px){.login-content {margin: 0 30px;}.banner-box {border-radius: 20px;}.login-box {background-color: rgba(74, 20, 118, 0.5);}}/* 手机适配 */@media screen and (max-width: 600px) {.content {}.login-content {background-color: transparent;}.banner-box {display: none;}.login-box {position: initial;margin: -40px auto;background-color: transparent;}}</style></head>
<body>
<script>
$(function(){$("#denglu").click(function(){var username = $("#username").val();var password = $("#password").val();if(!username){$("#utx").html("账号或密码不能为空");return;}else{$("#utx").html("");}if(!password){$("#ptx").html("账号或密码不能为空");return;}else{$("#ptx").html("");}$.post("login.do",{"username":username,"password":password},function(data){if(data==="登录成功"){location.href="index.do";}else{$("#ptx").html("账号或密码错误请重新输入");$("#password").val("");}});})})</script><div class="content"><div class="login-content"><a href="" class="banner-box"></a><div class="login-box"><h1>账号登录</h1> <input type="text" id = "username" style="width: 200px" placeholder="账号"><div style="height: 30px"><span id="utx"></span></div><input type="password" id = "password" placeholder="密码"><div style="height: 30px"><span id="ptx"></span></div><button id="denglu" class="login-btn" >登录</button><div style="margin-left: 150px;margin-top: 50px"><span>暂无账号?</span><a href="Registered.jsp">立即注册</a></div></div></div></div></body>
</html>
2.我们的主界面
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Product homepage</title><link rel="shortcut icon" href="static/common/images/shouye.png" /><link rel="stylesheet" href="static/common/css/style.css"><link rel="stylesheet" href="static/common/css/common.css"><script type="text/javascript" src = "static/common/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getGoods(gid) {location.href="getGoods.do?gid="+gid;
}function tuichu() {location.href="login.jsp";
}function getTid(tid) {localStorage.setItem("tid",tid);location.href="Classify.jsp?tid="+tid;
}
</script><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><div class="nav"><div class=" w"><div class="nav_l"><ul><li><a href="index.do">商城首页</a><span>|</span></li><li><a href="Classify.jsp">商品分类</a><span>|</span></li><li><a href="javascript:;">下载app</a><span>|</span><div class="download"><img src="static/common/images/erweima.png" alt=""><p>晨曦商城APP</p></div></li></ul></div><c:if test="${empty queryportion1 }"><jsp:forward page="index.do"></jsp:forward></c:if><div class="nav_r"><ul><c:if test="${empty user }"><li><a href="login.jsp" >登录</a><span>|</span></li><li><a href="Registered.jsp">注册</a><span>|</span></li><li><a href="#">消息通知</a></li><li class="cart"><a href="shopping.jsp">购物车(0)</a></c:if><c:if test="${not empty user }"><li><span style="font-size: 14px; color: darkgray;">欢迎来到晨曦商城 您好:</span><a href="用户中心.jsp" style="font-size: 15px;margin-left: 10px">${user.uname }</a></li><li class="cart"><a href="shopping.jsp">购物车(0)</a></li><li><a href="#">我的订单</a></li><li><a href="javascript:tuichu()">退出商城</a></li></c:if></ul></div></div></div><!-- 导航栏 e --><!-- 第一个大box s --><div class="box" style="height: 400px"><div class="w"><div class="banner_box" style="height: 400px"><div class="box_slide" style="height: 400px"><c:forEach items="${typelist }" var = "type"><ul><li><a href="javascript:getTid('${type.tid }')">${type.tname }</a></li></ul></c:forEach></div></div></div></div><!-- 第一个大box e --><!-- 第二个box s --><div class="ad" style="height: 220px"><div class="w" style="height: 220px"><div class="ad_left" style="height: 220px"><ul style="margin-top: 20px"><li class="row"><a href="#" class="col"><p>保障服务</p></a></li><li class="row"><a href="#" class="col"><p>企业团购</p></a></li><li class="row"><a href="#"><p>F码通道</p></a></li></ul><ul><li ><a href="#" class="col"><p>米粉卡</p></a></li><li ><a href="#" class="col"><p>以旧换新</p></a></li><li><a href="#"><p>话费充值</p></a></li></ul></div><div class="ad_right" style="height: 220px"><c:forEach items="${queryzhubao }" var="c"><a href="javascript:getGoods('${c.gid }')"><img src="${c.gphoto }" height="200px" width="316px" alt=""></a></c:forEach></div></div></div><!-- 第二个box e --><!-- --><!-- main s --><div class="main"><div class="w"><!-- 小米闪购 s --><div class="flash"><div class="flash_hd"><h4>小米闪购</h4></div><div class="flash_bd"><div class="f_one items"><p>14:00 场</p><img src="static/common/images/flash.png" alt="" ><h4>距离结束还有</h4></div><c:forEach items="${queryportion1 }" var = "goods"><div class="items"><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" class="watch"><p class="name" >${goods.gname }</p><p class="c" >${goods.ginfo }</p><p class="price">${goods.gprice }元<del>229元</del></p></a></div></c:forEach></div></div><!-- 小米闪购 e --><!-- 大广告1 --><div class="bd_box"><a href="#"><img src="static/common/images/bd-box.webp" alt=""></a></div><!-- 手机模块 s --><div class="miphone"><div class="miphone_hd"><h4>数码手机</h4><a href="#" class="more">查看全部</a></div><div class="miphone_bd"><div class="miphone_bd_l"><a href="javascript:getGoods('47')"><img src="static/common/images/mi1.webp" alt=""></a></div><div class="miphone_bd_r"><c:forEach items="${queryportion2 }" var = "goods"><div><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" style="width:180px;heigth:220px"><p class="name">${goods.gname }</p><p class="c">${goods.ginfo }</p><p class="price">${goods.gprice }元起</p></a></div></c:forEach></div></div></div><!-- 手机模块 e --><!-- 大广告2 --><div class="bd_box"><a href="#"><img src="static/common/images/bd-box2.webp" alt=""></a></div><!-- 家电 s --><div class="elec"><div class="elec_hd"><h4>居家用品</h4></div><div class="elec_bd"><div class="goods1 items"><a href="javascript:getGoods('8')"><img src="static/common/imgs1/10044.jpg" height="300px" width="234" alt=""></a></div><c:forEach items="${queryportion3 }" var = "goods"><div class="items"><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" class="goods2"><p class="name">${goods.gname }</p><p class="c">${goods.ginfo }</p><p class="price">${goods.gprice }元起</p></a></div></c:forEach><div class="goods1 items"><a href="javascript:getGoods('152')"><img src="static/common/imgs5/10030.jpg" height="300px" width="234" alt=""></a></div><c:forEach items="${queryportion3_2 }" var = "goods"><div class="items"><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" class="goods2"><p class="name">${goods.gname }</p><p class="c">${goods.ginfo }</p><p class="price">${goods.gprice }元起</p></a></div></c:forEach></div></div><!-- 家电 e --><!-- 大广告3 --><div class="bd_box"><a href="#"><img src="static/common/images/bd-box3.webp" alt=""></a></div><!-- 周边 s 布局差不多--><div class="elec"><div class="elec_hd"><h4>周边</h4></div><div class="elec_bd"><div class="goods1 items"><a href="javascript:getGoods('202')"><img src="static/common/imgs7/10026.png" width="234px" height="300px" alt=""></a></div><c:forEach items="${queryportion4 }" var = "goods"><div class="items"><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" class="goods2"><p class="name">${goods.gname }</p><p class="c">${goods.ginfo }</p><p class="price">${goods.gprice }元起</p></a></div></c:forEach><div class="goods1 items"><a href="javascript:getGoods('228')"><img src="static/common/imgs8/10022.jpg" width="234px" height="300px" alt=""></a></div><c:forEach items="${queryportion4_2 }" var = "goods"><div class="items"><a href="javascript:getGoods('${goods.gid }')"><img src="${goods.gphoto }" alt="" class="goods2"><p class="name">${goods.gname }</p><p class="c">${goods.ginfo }</p><p class="price">${goods.gprice }元起</p></a></div></c:forEach></div></div><!-- 周边 e --><!-- 视频模块 s --><div class="vedio"><div class="vedio_hd"><h4>视频</h4></div><div class="vedio_bd"><ul><li><img src="static/common/images/vedio.webp" alt=""><div class="btn"><div class="btn1"></div></div><p class="name">小米10 8K手机拍大片</p></li><li><img src="static/common/images/vedio.webp" alt=""><div class="btn"><div class="btn1"></div></div><p class="name">小米10 8K手机拍大片</p></li><li><img src="static/common/images/vedio.webp" alt=""><div class="btn"><div class="btn1"></div></div><p class="name">小米10 8K手机拍大片</p></li><li><img src="static/common/images/vedio.webp" alt=""><div class="btn"><div class="btn1"></div></div><p class="name">小米10 8K手机拍大片</p></li></ul></div></div><!-- 视频模块 e --></div></div><!-- main e --><!-- footer模块 s --><div class="footer"><div class="w clearfix"><div class="footer_hd"><ul><li><a href="#"><span>预约维修服务</span> </a></li><li><a href="#"><span>七天无理由退货</span> </a></li><li><a href="#"><span>15天免费换货</span> </a></li><li><a href="#"><span>满69元包邮</span> </a></li><li><a href="#"><span>1100余家售后网点</span> </a></li></ul></div><div class="footer_center "><ul><li>选购指南</li><li><a href="#">手机</a></li><li><a href="#">电视</a></li><li><a href="#">笔记本</a></li><li><a href="#">平板</a></li><li><a h ref="#">穿戴</a></li><li><a href="#">耳机</a></li><li><a href="#">家电</a></li><li><a href="#">路由器</a></li><li><a href="#">音箱</a></li><li><a href="#">配件</a></li></ul><ul><li>服务中心</li><li><a href="#">申请售后</a></li><li><a href="#">售后政策</a></li><li><a href="#">订单查询</a></li><li><a href="#">以旧换新</a></li><li><a href="#">保障服务</a></li><li><a href="#">防伪查询</a></li><li><a href="#">F码通道</a></li></ul><ul><li>线下门店</li><li><a href="#">小米之家</a></li><li><a href="#">服务网点</a></li><li><a href="#">授权体验网点/专区</a></li></ul><ul><li>关于小米</li><li><a href="#">了解小米</a></li><li><a href="#">加入小米</a></li><li><a href="#">投资者关系</a></li><li><a href="#">可持续发展</a></li><li><a href="#">廉洁举报</a></li></ul><ul><li>关注我们</li><li><a href="#">新浪微博</a></li><li><a href="#">官方微信</a></li><li><a href="#">联系我们</a></li><li><a href="#">公益基金会</a></li></ul><ul><li>帮助中心</li><li><a href="#">账号管理</a></li><li><a href="#">账号管理</a></li><li><a href="#">账号管理</a></li></ul><div class="contact"><p class="tel">400-100-5678</p><p class="week">周一至周日 8:00-18:00<br>（仅收市话费）</p><a href="#" class="kefu">人工客服</a></div></div></div><div class="footer_bd"><div class="w"><div class="footer_bd_l"><img src="static/common/images/Logo.png" width="100px" alt="" class="bd_logo"><div class="info"><p class="p1"> 小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location</p><p> © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 <br>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 <br>增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证 <br>违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p><p class="p3"><img src="static/common/images/truste.png" alt=""><img src="static/common/images/truste.png" alt=""><img src="static/common/images/truste.png" alt=""><img src="static/common/images/truste.png" alt=""></p></div></div></div></div>
</div> <!-- footer模块 e --></body>
</html>
想要完整的项目，或者更多的源码，请私信我，或者评价，谢谢！
