【《基于JSP的网上零售店的设计与实现》11000字（论文）】

图5-6顾客登录流程图图5-7管理员登录流程图5.2.2用户功能模块用户功能模块体现顾客和管理员所能操作的功能。顾客在网页上可以直接浏览商品,网上零售店的页面是按照分类来展示商品的，商品总共分为饮料类、肉制类、零食类、果蔬类和其他类，点击某个分类查看属于这个分类的商品，点击某个商品进入展示商品细节的页面，在这个页面可以查看这个商品的详细信息，比如打几折、生产日期、保质期等，在商品详情页面可以选择商品的数量添加到购物车。浏览商品不需要用户注册和登录，但是在网上下单时需要注册和登录。想要购买的商品只需添加到自己的购物车,在选择进购物车的商品如果不想购买即可退回,也可以清空自己的购物车，在购物车页面可以将购物车里的全部商品付款购买。已经登录的顾客可以进入会员中心查看自己的订单。超级管理员拥有全部的权限，相当于店长这个角色，超级管理员可以修改所有会员和员工的信息，可以更改网站页面的图片，可以查看销售的图表，可以维护顾客提交的订单，还可以维护网上零售店的商品，进行新增商品、修改商品、删除商品。配送员拥有处理订单和维护商品的权限。如果网上零售店聘请了配送员，配送员就可以点击后台登陆进入后台页面。在配送员的后台页面可以处理审核顾客提交的购物订单，之后实现配送商品。配送员也可以帮助超级管理员维护货架上的商品。财务员拥有查看图表的权限。财务员可以查询某段时间的财务销售图表，方便网上零售店的销售业务结账，了解顾客购买商品的习惯，分析顾客购买水平。帮助超级管理员进行分析销售策略和结账业务。图5-8会员功能模块图图5-9游客功能模块图图5-10管理员功能模块图图5-11配送员功能模块图图5-12财务员功能模块图5.3数据库设计数据库在该项目中的作用至关重要，这次项目采用的是MySQL数据库。数据库中的每个实体对应一张表，项目的信息存储在数据库的表中，实体之间存在着某种练习，运用E-R图描绘出这种关系。连接本地数据库jdbc.driver=com.mysql.cj.jdbc.Driverjdbc.url=jdbc:mysql://:3306/ssm_snack_shop?useSSL=false&serverTimezonejdbc.username=rootjdbc.password=0000/*是本机的地址，跟是否联网无关，ssm_snack_shop是网上零售店系统数据库的名称。数据库的登录账号是root，密码是0000*/5.3.1数据库表的设计数据库的表是用来存储实体信息的，每一个字段表示实体的属性。表5-1会员信息表序号列名数据类型长度主键是否为空备注1u_idint11102u_realnamevarchar25500真实姓名3u_usenamevarchar25500用户名4u_passwordvarchar25500密码5u_moneyvarchar25500余额6u_phonevarchar25500手机号7u_emailvarchar25500邮箱8u_sexvarchar25500性别9u_resgistDatedate00出生日期10u_adressvarchar25500地址11u_scoreint1101表5-2管理员信息表序号列名数据类型长度主键是否为空备注1ad_idint11102ad_usenamevarchar25500用户名3ad_passwordvarchar25500密码4rol_idint11外键0职能编号表5-3商品表序号列名数据类型长度主键是否为空备注1s_idint11102s_batchvarchar25500批次3s_namevarchar25500商品名4s_pricedouble00价格5s_discountvarchar25500折扣6s_pictureUrlvarchar25500图片7s_brandvarchar25500品牌8s_placevarchar25500产地9s_importedint100是否进口10s_scoreint1100积分11s_pDatedate00生产日期12s_qDatevarchar25500保质期13s_createDatedate1100上架时间14s_desedate01详情15s_typevarchar25500类型16s_numbervarchar25500数量表5-4职能表序号列名数据类型长度主键是否为空备注1role_idint11102role_namevarchar25500职位3role_infovarchar25500权限表5-5类型表序号列名数据类型长度主键是否为空备注1idint11102namevarchar5000类型名3infovarchar5000信息4timedatetime00时间表5-6订单表序号列名数据类型长度主键是否为空备注1d_idint11102o_idvarchar25500订单号3s_idint11外键0商品号4o_nint1100商品数量5o_moneydouble00商品金额表5-7订单状态表序号列名数据类型长度主键是否为空备注1idint11102o_idvarchar255外键0订单号3u_idint11外键0会员号4e_idint11外键0管理员号5timedatetime00时间6typeint1100进行状态表5-8收货表序号列名数据类型长度主键是否为空备注1r_idint11101o_idvarchar255外键0订单号2r_namevarchar25500收货人3r_phonevarchar25500收货电话4r_addressvarchar25500收货地址5.3.2实体设计会员属性：图5-13会员属性图管理员属性：图5-14管理员属性图商品属性：图5-15商品属性图5.3.3E-R图E-R图也称实体-联系图(EntityRelationshipDiagram)，提供了表示实体类型、属性和联系的方法，用来描述网上零售店的概念模型。1n1n1n11nnnn1n1n1n1n1n11nnnn1n1n图5-16系统E-R图

6系统实现6.1网站首页网站的首页是一个项目系统的门面，是顾客打开网页最直观看到的界面，一个美观的实用的首页能够吸引顾客对商品的购买欲，简洁大方的首页可以使用户静下心来浏览到每一个细节。用户包括未注册用户点击网站最先进入的页面，首页默认显示的是最新添加的商品，在网站首页可以看到商品的分类。注册过的用户通过首页的登录进入登陆页面，在登录页面可以输入用户名和密码来实现登录，未注册用户可以点击注册进入注册页面成为注册用户。管理员通过点击登陆后台进入后台管理。图6-1网站首页图<divclass="span10last"><divclass="topNavclearfix"> <ul> <c:iftest="${sessionScope.frontuser==null}"> <liid="headerLogin"class="headerLogin" style="display:list-item;"><a href="${pageContext.request.contextPath}/shop/userLoginGet">登录</a>| </li> <liid="headerRegister"class="headerRegister" style="display:list-item;"><a href="${pageContext.request.contextPath}/user/userRegisterGet">注册</a>| </li> <liid="headerRegister"class="headerRegister" style="display:list-item;"><a href="${pageContext.request.contextPath}/admin/login/adminLogin" target="_blank">登录后台</a>|</li> </c:if> <c:iftest="${sessionScope.frontuser!=null}"> <liid="headerLogin"class="headerLogin" style="display:list-item;"><inputid="pd" value="${sessionScope.frontuser}"type="hidden"/><a href="javascript:void()">欢迎:${sessionScope.frontuser}</a>|</li> </c:if> <liid="headerUsername"class="headerUsername"></li> <liid="headerLogout"class="headerLogout"><a>[退出]</a>|</li> <c:iftest="${sessionScope.frontuser!=null}"> <liclass="personalInfo"><a href="${pageContext.request.contextPath}/user/userPersonalInfo">会员中心</a> |</li> </c:if> <c:iftest="${sessionScope.frontuser==null}"> <liclass="personalInfo"><a href="${pageContext.request.contextPath}/shop/userLoginGet">会员中心</a> |</li> </c:if> </ul> </div> </div>/*以上代码是主页面位于上端的一些布局及功能，包含会员的登录和注册以及会员中心，管理员的后台登陆*/<divclass="span24"> <ulclass="mainNav"> <li><ahref="${pageContext.request.contextPath}/shop/index">首页</a> |</li> <c:forEachitems="${sessionScope.sessiontypes}"var="s"> <li><a href="${pageContext.request.contextPath}/shop/puffingType?type=${s.id}">${}</a> |</li> </c:forEach> <li><ahref="${pageContext.request.contextPath}/sorder/gotocar">购物车</a> |</li> </ul> </div>/*以上代码是管控的是首页、商品分类、购物车，其中各种分类的名称取的是数据库中表的内容*/6.2登录注册页面顾客从主页点击注册，填写信息完成注册，完成注册的用户即可成为网站会员。会员享有该网站的购买权限，能够使用购物车提交订单。图6-2会员注册页面图图6-3会员登陆页面图//跳转注册 @RequestMapping("userRegisterGet") publicStringgotoRegister(){ return"user/register"; } //注册判断用户名存在 @RequestMapping("selectUserOne") @ResponseBody publicAjaxResultgetUserOne(Userinfouserinfo){ AjaxResultaj=newAjaxResult(); Userinfors=userService.selectUserOne(userinfo); aj.setTag(rs); returnaj; } //注册 @RequestMapping("addUserRegister") @ResponseBody publicAjaxResultaddUserOne(Userinfouserinfo){ AjaxResultaj=newAjaxResult(); intrs=userService.addUserOne(userinfo); aj.setTag(rs); returnaj; }管理员登录页面图6-4管理员登录图<bodyclass="login"><divclass="menu-togglersidebar-toggler"></div><divclass="content"><h3class="form-titlefont-green">用户登录</h3><formaction="${pageContext.request.contextPath}/admin/login/adminGoLogin"method="post"><divclass="form-group"><labelclass="control-labelvisible-ie8visible-ie9">用户名</label><inputclass="form-controlform-control-solidplaceholder-no-fix"type="text"autocomplete="off"placeholder="用户名"name="adUsername"id="adUsername"/></div><divclass="form-group"><labelclass="control-labelvisible-ie8visible-ie9">密 码</label><inputclass="form-controlform-control-solidplaceholder-no-fix"type="password"autocomplete="off"placeholder="密码"name="adPassword"id="adPassword"/></div> <spanstyle="margin-left:20px;">${msg}</span><divclass="form-actions"><buttontype="submit"class="btngreenuppercase"id="login">登录</button></div></form></div><divclass="copyright"></div></body>6.3会员账户中心顾客登录后点击会员中心可以查看个人信息和自己的正在进行的订单以及已经完成的订单。这里类似一个会员的个人空间，会员自己的信息会在这里显示。<tablecellSpacing=0cellPadding=0width=150border=0><trheight=22><tdstyle="PaDDING-LEFT:30px"><aclass="menuParent"onclick='expand(1)'href="javascript:void(0);"style="font-size:20px">账户中心</a></td></tr></table><tableid=child1style="DISPLaY:block;"cellSpacing=0cellPadding=0width=150border=0><trheight=20><td><astyle="cursor:pointer;font-size:15px;color:blue;margin-left:35px;"href="${pageContext.request.contextPath}/user/userInfo"target="right">个人中心</a></td></tr><trheight=20><td><astyle="cursor:pointer;font-size:15px;color:blue;margin-left:35px"class="menuChild"href="${pageContext.request.contextPath}/user/userGoOrder"target="right">我的订单</a></td></tr><trheight=20><td><astyle="cursor:pointer;font-size:15px;color:blue;margin-left:35px"class="menuChild"href="${pageContext.request.contextPath}/user/userGoSuccessOrder"target="right">历史订单</a></td></tr></table>图6-5会员个人中心图<table> <tr> <td>用户名:</td> <td><inputtype="text"id="uid"name="uid"value="${sessionScope.frontuserId}"style="display:none;"> <inputtype="text"id="uUsername"name="uUsername"class="text"maxlength="20"value="${userOne.uUsername}"> <spanstyle="color:red"id="msg"></span></td> </tr> <tr> <td>密  码:</td> <td><inputtype="text"id="uPassword"name="uPassword"class="text"maxlength="20"autocomplete="off"><spanstyle="color:red"id="passmsg"></span></td> </tr> <tr> <td>E-mail:</td> <td><inputtype="text"id="uEmail"name="uEmail"class="text"maxlength="200"> <spanstyle="color:red"id="emailmsg"></span></td> </tr> <tr> <td>姓名:</td> <td><inputtype="text"id="uRealname"name="uRealname"class="text"maxlength="200"> <spanstyle="color:red"id="uRealnamemsg"></span></td> </tr> <tr> <td>性别:</td> <td><inputtype="radio"id="man"name="sex"value="男"><labelfor="man">男</label> <inputtype="radio"id="woman"name="sex"value="女"><labelfor="woman">女</label> <spanstyle="color:red"id="sexmsg"></span></td> </tr> <tr> <td>联系方式:</td> <td><inputtype="text"id="uPhone"name="uPhone"class="text"maxlength="200"> <spanstyle="color:red"id="uPhonemsg"></span></td> </tr> <tr> <td>地址:</td> <td><inputtype="text"id="uAddress"name="uAddress"class="text"maxlength="200"value="${userOne.uAddress}"></td> </tr> <tr> <tdcolspan="2"align="center"><buttonstyle="margin-top:10px"id="editbtn">确认修改</button></td> </tr> </table>图6-6会员未完成订单图图6-7会员历史订单图<tableid="table_id_example"class="display"> <thead> <tr> <thclass="text-center">订单号</th> <thclass="text-center">收货人</th> <thclass="text-center">联系方式</th> <thclass="text-center">地址</th> <thclass="text-center">下单日期</th> <thclass="text-center">状态</th> <thclass="text-center">操作</th> </tr> </thead> <tbody> </tbody> </table>6.4管理员后台登陆管理员登录后台页面图6-8超级管理员后台菜单图配送员登录后台图6-9配送员后台菜单图财务员登录后台图6-10财务员后台菜单图6.4.1个人信息图6-11后台个人中心图<tableclass="tabletable-striped"> <tr> <td>用户名:</td> <td><inputid="adId"type="hidden"><inputid="adUsername"type="text"class="form-control"></td> </tr> <tr> <td>密码:</td> <td><inputid="adPassword"type="text"class="form-control"></td> </tr> <tr> <td>角色:</td> <td><inputid="roleIdT"type="hidden"> <inputid="roleId"type="text"disabled="disabled"class="form-control"></td> </tr> <tr><tdcolspan="2"><buttonid="changeAdminUser"class="btnbtn-primary">修改</button></td></tr> </table>6.4.2人员管理图6-12后台人员管理图6.4.3订单管理图6-13后台订单管理图6.4.4图表管理图6-14后台图表管理图6.4.5商品管理图6-15后台商品管理图6.5购物车图6-16购物车图<divclass="containercar"> <divclass="span24"> <divng-controller="carCtrl"> <table> <tbody> <tr> <th>图片</th> <th>商品</th> <th>价格</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> <c:forEachitems="${receiptinfo.orderdetailSet}"var="orderdetail"> <tr> <tdwidth="60"> <inputtype="hidden"name="id"value="${orderdetail.snackinfo.sId}"> <imgsrc="${pageContext.request.contextPath}/image/${orderdetail.snackinfo.sPictureurl}"> </td> <td> <atarget="_blank">${orderdetail.snackinfo.sName}</a> </td> <td> ￥${orderdetail.oMoney} </td> <tdclass="quantity"width="60"> ${orderdetail.oNum} </td> <tdwidth="140"> <spanclass="subtotal">￥${orderdetail.oMoney*orderdetail.oNum}</span> </td> <td> <ahref="${pageContext.request.contextPath}/sorder/delete?sId=${orderdetail.snackinfo.sId}"class="delete">删除</a> </td> </tr> </c:forEach> </tbody> </table> <dlid="giftItems"class="hidden"style="display:none;"> </dl> <c:iftest="${sessionScope.receiptinfo==null}"> <h1style="margin:50px300px;">还没有添加商品！</h1> </c:if> <c:iftest="${sessionScope.receiptinfo!=null}"> <divclass="total"> <emid="promotion"></em> 商品金额:<strongid="effectivePrice">￥${receiptinfo.oPhone}元</strong> </div> <divid="subBottom"class="bottom"> <ahref="${pageContext.request.contextPath}/sorder/clear"id="clear"class="clear">清空购物车</a> <spanid="submit"class="submit">提交订单</span> </div> </c:if> <divid="carinfo"style="display:none"> <formid="orderForm"action="${pageContext.request.contextPath}/forder/order"method="post"> <inputtype="hidden"name="uid"value="${sessionScope.frontuserId}"/> <inputtype="hidden"name="total"value=" ${forder.total}"/> <divclass="span24"> <p> 收货人   ：<inputid="oName"name="oName"type="text"value=""style="width:150px"/> <spanstyle="color:red"id="namemsg"></span> <br/> 联系方式：<inputid="oPhone"name="oPhone"type="text"value=""style="width:150px"/> <spanstyle="color:red"id="phonemsg"></span> <br/> 收货地址：<inputid="oAddress"name="oAddress"type="text"value=""style="width:150px"/> <spanstyle="color:red"id="addressmsg"></span> <br/> </p> <hr/> <pstyle="text-align:right"> <aid="subCarButton"> <imgsrc="${pageContext.request.contextPath}/image/finalbutton.gif"width="204"height="51"border="0"/> </a> </p> </div> </form> </div> <tableid="tablePayExample"style="width:100%;display:none;"> <tr> <td>支付金额:<inputtype="hidden"id="payoId"></td> <td><inputtype="text"disabled="disabled"id="payNumber"></td> </tr> <tr> <td>您的钱包:</td> <td><inputtype="text"disabled="disabled"id="uMoney"></td> </tr> <tr> <td>输入密码:</td> <td><inputtype="password"id="uPasword"></td> </tr> <trstyle="text-align:center;"><tdcolspan="2"><inputtype="button"id="comfirPay"value="付款"></td></tr> </table> </div> </div> </div>

6.6系统扩展分析网上零售店系统整体上能够完成基本的买卖功能，整个流程符合业务逻辑，整体操作简单方便顾客理解。但是毕竟系统处于设计阶段，有些问题需要投入使用才能发现。我认为系统还需要完善的地方有：明确商品的供应链，借鉴药品的GSP管理，将商品供应环节透明化，通过二维码等方式检查商品每一环节的信息，在疫情敏感时期怎强商品安全性。完善物流配送功能，疫情期间人们包括快递员配送员出门不便，联合社区卫生所、村委管理员，联合实际形式聘请医疗卫生院员、村支干部当作配送人员，服务群众，这一点需要相关政策支持。增加物流地图功能，管理员审核订单后，配送人员进行配送，买家可以实时查看地图，配送员和商品具有实时定位，配送进度买家一目了然。

7测试操作系统：W