11.基于小米商城为本进行的一个延申。
登录界面
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项目了。
下面我会分享一些源码，供大家参考。
登录页面的源码
<%@ 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>
想要完整的项目，或者更多的源码，请私信我，或者评价，谢谢！
