【《基于SSM的社区零售系统设计与实现》15000字】

目录[13]。3.3.1前台用例分析前台用例图如图3-3表示:图3-3用户用例图3.3.2后台用例分析后台用例图如图3-4表示:图3-4后台用例图4系统的实现和设计4.1SSM框架整合我们整合SSM框架的思路应该是先完成spring的配置搭建，再利用已搭建完成的spring框架去整合SpringMVC和Mybatis。Spring整合SpringMVC的目的是可以在Controller中可以成功调用Service中的方法。4.1.1Spring框架配置Application.xml是spring的核心配置文件。我们将数据源，sqlSessionFactory交给SpringIOC容器进行管理，并且开启注解式事务管理。开启注解扫描，对Service和Dao层进行处理，controller交给springMVC去处理，不需要Spring进行处理。<context:component-scanbase-package="com.yao"><context:exclude-filtertype="annotation"expression="org.springframework.stereotype.Controller"/></context:component-scan>将数据源交给spring进行管理<beanid="dataSource"class="com.mchange.v2.c3p0.ComboPooledDataSource"><propertyname="driverClass"value="${jdbc.driver}"></property><propertyname="jdbcUrl"value="${jdbc.url}"></property><propertyname="user"value="${jdbc.username}"></property><propertyname="password"value="${jdbc.password}"></property></bean>sqlSessionFactory交给spring进行管理<beanid="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryBean"><propertyname="dataSource"ref="dataSource"></property><!--加载mybatis的核心文件--><propertyname="configLocation"value="classpath:SqlMapConfig-spring.xml"></property></bean><!--扫描mapper所在的包为mapper创建实现类--><beanclass="org.mybatis.spring.mapper.MapperScannerConfigurer"><propertyname="basePackage"value="com.yao.dao"></property></bean><!--声明式事务控制--><!--平台事务管理器--><beanid="transactionManager"class="org.springframework.jdbc.datasource.DataSourceTransactionManager"><propertyname="dataSource"ref="dataSource"></property></bean><!--配置事务增强--><tx:adviceid="txAdvice"><tx:attributes><tx:methodname="*"/></tx:attributes></tx:advice><!--事务的aop织入--><aop:config><aop:advisoradvice-ref="txAdvice"pointcut="execution(*com.yao.service.impl.*.*(..))"></aop:advisor></aop:config>4.1.2Spring整合SpringMVC为了方便项目的开发，一般的web项目都会用到web.xml来初始化配置信息，比如Filter,Listener,welcome界面等。可以设置UTF-8filter来解决中文乱码的问题。如果以后在别的项目中也需要配置到web.xml的话，可以直接复制使用，十分方便。Web.xml内容如下<web-app><display-name>ArchetypeCreatedWebApplication</display-name><!--全局的初始化参数--><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><!--spring的监听器，在项目启动的时候，就去加载applicationContext.xml的配置文件--><listener><!--加载配置文件，创建spring容器--><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><filter><!--解决中文乱码--><filter-name>characterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param></filter><filter-mapping><filter-name>characterEncodingFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping><!--servlet这个类是在第一次发请求时创建servlet是前端控制器--><!--DispatcherServlet会把静态的资源文件拦截到--><servlet><servlet-name>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><!--让servlet加载spring配置文件--><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc.xml</param-value><!--是指给DispatcherServlet这个类的contextConfigLocation这个属性传一个值--></init-param><load-on-startup>1</load-on-startup><!--load-on是只要是启动服务器就创建DispatcherServlet这个对象--></servlet><!--servlet-mapping被请求到--><servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>/</url-pattern><!--url-pattern/是你发任何请求都会经过Servlet拦截所有请求--></servlet-mapping></web-app>4.1.3Spring整合Mybatis我们在web项目中编写SqlMapConfig.xml文件<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-////DTDConfig3.0//EN""/dtd/mybatis-3-config.dtd"><!--mybatis的主配置文件--><!--mybatis核心文件--><configuration><!--定义别名--><typeAliases><!--<typeAliastype="com.yao.domain.User"alias="user"></typeAlias>--><!--扫描包，别名是实体名称或者实体名称首字母小写比如说User,或者user--><packagename="com.yao.domain"/></typeAliases></configuration>4.2系统主要模块设计4.2.1登录功能的实现用户点击登录按钮后，首先会通过ajax进行输入是否为空的验证，这样做的好处是将信息传入后台，前端将信息进行一次初步的筛选，减轻了服务器和数据库的压力，同时也可以更快速的响应用户的请求。如不为空则将信息提交到Controller，根据姓名查找用户信息，获得密码，在Controller中进行比对。相同就进行页面跳转，不同则重新输入。登陆时序图如图4-1所示。图4-1登陆时序图4.2.2注册功能的实现 注册页面也是会检测是否为空，信息输入都不为空的情况下会先进行用户名的查找，看该用户名是否已被占用。占用则提醒，否则将其插入数据库，跳转到登陆界面。注册时序图如图4-2所示。图4-2注册时序图4.2.3购物车功能设计购物车是用户保存已经有想买意愿的商品，进入购物车需要用户先进行登录。当用户选则中意的商品并确定数量后，点击加入购物车即可将商品放入购物车。放入购物车的过程是将商品的pid等信息传入controller，查找商品信息，比对库存是否充足。不充足则返回相应信息，通过ajax提醒用户库存不足。通过当前用户id查找该用户的购物车信息，将查找到的购物车信息与传入的pid进行对比，查看购物车中是否已经含有此商品。如若已经含有此商品，则调用changeNum函数对商品的数量进行更改。如果没有该商品，则调用insert方法将商品插入到购物车表中。加入购物车时序图如图4-3所示。图4-3加入购物车时序图显示商品则需要通过session中的uid在数据库中查找此人的购物车，存入list中，再遍历list中的pid，根据pid查找到商品的详情，在Controller中返回ModelAndView，在cart.jsp显示已挑选商品。 加入购物车时，得到商品的id，商品数量以及存在session中的用户id，插入到数据库。 在删除购物车内商品时，会弹出请问您确定要删除吗，点击确定才会继续执行删除操作。获得选中的商品id，获取用户id，在数据库中进行删除，删除完成后重定向到显示购物车的函数，进行数据的重新查找。更改购物车里商品的数量时，会首先通过javascript检查商品详细信息中的库存是否足够，如果足够就计算总价并再页面进行显示新的数据。并且将商品id数量传入Controller，对商品表进行商品数量的更改。购物车时序图如图4-4所示。图4-4购物车时序图4.2.4订单模块设计订单流程是整个项目中最关键的一个部分。订单流程顺利与否完成决定了商品能否成功卖出。在购物车勾选想要购买的商品，即可进行购买。就会通过ajax将所选的商品id以及数量传送到后台。调用getOrderNo()生成订单编号，订单编号是根据当前时间以及是本分钟第几张订单生成的。之后根据订单号码以及用户id插入订单，在OrderDao.xml中的insert标签中加上useGeneratedKeys="true"keyProperty="id"，就可以得到刚插入的订单号。之后根据订单号码和商品信息，可以将订单详细插入。之后减少商品表中的库存。最后删掉购物车内选中商品的信息。通过ModelAndView到订单详细页面，在该页面进行地址的选择，点击确定后把地址号传入后台，更改订单中的地址。跳转到购买成功页面。购买时序图如图4-5所示。图4-5购买时序图4.2.5搜索模块设计用户在商城进行商品浏览时，可以对商品进行搜索以及选择对应分类进行商品查看。其本质都是对商品进行搜索的过程。搜索商品是对商品进行模糊搜索。而点击分类进行搜索则是搜索商品属性中的分类。搜索时序图如图4-6所示。图4-6搜索时序图4.3数据库设计4.3.1数据库E-R图本系统中大量商品，用户，订单等重要数据都保存在数据库中，几乎系统中所有的功能都要通过数据库，或是查询，或是保存。数据库在系统中有举足轻重的地位。数据库中主要的是用户表，订单表，订单详细表，购物车表，商品表，一、二级分类表。商城E-R图如图4-7所示。图4-7数据库E-R图4.3.2数据库表设计表4-1用户信息表序号字段属性中文名称数据类型长度约束1Id序号Int11主键，自动编号2Username用户名Varcher50NotNull3Password密码Varcher50NotNull4Telephone电话号码Varcher505Email邮箱Varchar50表4-2商品信息表序号字段属性中文名称数据类型长度约束1Id序号Int11主键，自动编号2Name商品名称Varchar255NOTNULL3Subtitle小标题Varchar2554Price价格FloatNOTNULL5Sale销量Int116Stock库存Int117Cid一级分类idInt11外键8Secid二级分类idInt11外键表4-3购物车信息表序号字段属性中文名称数据类型长度约束1Id序号Int11主键，自增长2Uid用户idInt20外键3Pid商品idInt11外键4Number商品数量Int115Sum总价格Float表4-4订单信息表序号字段属性中文名称数据类型长度约束1Id序号Int11主键，自增长2Order_code订单编号Int11NOTNULL3User_message备注信息Varchar2554Create_date订单创建日期DateNOTNULL5Pay_date订单支付日期Date6Delivery_date订单发货日期Date7Confirm_date订单完成日期Date8Status订单状态Varchar255表4-5订单详情表序号字段属性中文名称数据类型长度约束1Id序号Int11主键，自增长2Pid商品idInt11外键3Oid订单idInt11外键4Uid用户idInt20外键5Number商品数量Int11表4-6地址信息表序号字段属性中文名称数据类型长度约束1Id序号Int11主键自增长2Uid用户idInt20外键3Name收件人姓名Varchar2554Telephone收件人电话Varchar2555Addr收件人地址Varcher2556Moren是否默认Int115系统详细实现与结果5.1首页首页是用户最先看到的界面，首页如图5-1所示。首页实现了轮播图用于更好的展示商品。轮播图实现的大体思想是四张图片摆成一行，在第四张图片的后面要加上和第一张图片相同的图片。过一定的时间就让它们自动移动一张图片的间距。当移动到最后一张图片时，偏移量变为0，就又回到第一张图片。再次重新开始移动。由于最后一张图片与第一张图片相同，更改变量又是瞬间发生的事情，就像是一直循环播放几张图片。但是里面还包括很多细节，就像是加上按钮可以控制图片的翻页，按动下面的小圆圈可以实现图片跳转等。Focus是我们要进行轮播的图片，为提升用户的使用感受，当鼠标停在图片上时，显示图片上向左向右的两个按钮，同时停止图片的滚动。focus.addEventListener('mouseenter',function(){arrow_l.style.display='block';arrow_r.style.display='block';//鼠标经过focus就停止定时器clearInterval(timer);timer=null;})当鼠标离开图片区域时，图片再次滚动，向左向右两个按钮隐藏。focus.addEventListener('mouseleave',function(){arrow_l.style.display='none';arrow_r.style.display='none';timer=setInterval(function(){arrow_r.click();},2000);})为每个小圆圈增加一个索引属性，可以更加方便的得到是点击的第几个圆圈。点击小圆圈时，不仅要跳到对应的图片，还要把当前圆圈变为白色。varul=focus.querySelector('ul');varol=focus.querySelector('.circle');for(vari=0;i<ul.children.length;i++){//创建一个livarli=document.createElement('li');//生成一个自定义的属性,记录当前的索引号li.setAttribute('index',i);//把li插入到ol里面ol.appendChild(li);//可以在生成小圆圈的同时,把每个li直接绑定点击事件,点到的加上current类li.addEventListener('click',function(){//把所有li清除current类名for(vari=0;i<ol.children.length;i++){ol.children[i].className='';//当前的li设置current类名this.className='current';//点击圆圈进行移动图片//移动的距离是索引号乘宽度(负的)//点击了某个li,就拿到当前li的索引号varindex=this.getAttribute('index');//点击了某个li,就拿到当前li的索引号,,并把索引号给num,circlenum=index;circle=index；animate(ul,-index*focusWidth);}})}点击右侧按钮，判断是否是第四张，如果是的话就要把偏移量变为0，重新开始播放。移动到下一张图片，并且改变圆圈的颜色。左侧按钮的实现同理。arrow_r.addEventListener('click',function(){//走到了最后一张复制的图片,ul要快速复原left值改为0if(num==ul.children.length-1){ul.style.left=0;num=0;}num++;animate(ul,-num*focusWidth);//点击右侧按钮,同时控制下部圆圈一起变化circle++;//图片多一张,等于四时让圆圈0变白;if(circle==ol.children.length){circle=0;}circleChange();});//自动播放vartimer=setInterval(function(){arrow_r.click();},2000);})图5-1首页5.2登录登录界面是供用户进行登录的界面，输入用户名和密码之后即可进行登录。只有登陆过的用户才能进行商品购买等操作。登录界面如图5-2所示。图5-2登录界面点击登录之后执行checkLogin()函数，获取输入的用户名框和密码框里的内容，并且判断是否为空，如果为空，则弹出相应信息。如果不为空，继续执行。登录提示如图5-3所示。图5-3登录提示验证为空的代码如下:functioncheckLogin(){varusername=$("#username").val();varpassword=$("#password").val();if(username==""||password==""){alert("用户名或密码不能为空");returnfalse;}Post是通过post的方式请求，url是请求的地址，data是要传到后台的数据，success是执行成功之后的回调函数。我们把用户名框和密码框的内容传到后台，按照用户名到数据库中查找相应的密码并将其返回到Controller与前台传入的密码进行比对。如果用户名和密码匹配成功，则把名为"user"用户信息加入到session中，返回’ok’字符。错误提示如图5-4所示。图5-4登录提示验证登录信息的ajax如下:$.post({url:"${pageContext.request.contextPath}/user/login",data:{'uname':username,'pwd':password},success:function(data){if(data.toString()=='ok'){alert("登陆成功")returntrue;}else{alert("用户名或密码错误")returnfalse;}}});}登陆完成后，用户状态的保存也是至关重要的一步，后续的购物车模块，订单模块的使用都需要用户的信息查询数据库。我们可以通过Session或者Cookie来实现保存用户的登录信息。Cookie在本地浏览器储存，而session存储在服务器中。Web开发中，服务器可以把用户浏览器创建一个会话对象(Session对象),所以在需要保存用户数据的时候，服务器程序可以将用户的数据写到session中。Session对象由服务器创建，我们可以用request对象中的getSession方法得到session。由于session一定时间内保存在服务器上，一旦访问变多，则会占用服务器的性能。判断登陆信息正确之后，把user对象加入到session中。在判断用户是否登录时则采用Useruser=(User)session.getAttribute(“user”);得到之前存入的user对象。用户退出登录时通过执行session.removeAttribute("user");实现推出登录操作。登录的用户和没有进行登陆的用户的权限是不相同的，没有登陆的用户只能进行商品的浏览，登陆的用户还可以进行购物车的查看与商品购买。实现这一功能用到的是springMVC的拦截器。SpringMVC的拦截器Interceptor与Servlet中的过滤器Filter类似。一个过滤器只能在容器初始化时调用一次，拦截器可以被多次调用，但是拦截器只能对controller请求进行拦截。拦截器主要用在拦截用户请求做相应处理，通常应用在权限验证，记录请求信息的日志，判断用户是否登录等功能上。如果有多个拦截器，则会把拦截器按照一定顺序连接成一条链，在执行时，会按照定义好的顺序被调用。拦截器在实现上是基于Java的反射机制，同时也是AOP思想的具体实现。实现代码:publicclassPrivilegeInterceptorimplementsHandlerInterceptor{@OverridePublicbooleanpreHandle(HttpServletRequestrequest,HttpServletResponseresponse,Objecthandler)throwsException{HttpSessionsession=request.getSession();Useruser=(User)session.getAttribute("user");if(user==null){response.sendRedirect(request.getContextPath()+"/login.jsp");returnfalse;}returntrue;}}HandlerInterceptor中有三个方法可以去进行重写，分别是preHandle,postHandle和afterCompletion。其中preHandle是在目标方法执行之前执行的，postHandle是在目标方法执行之后，视图对象返回之前执行的，afterCompletion是在所有流程都执行完毕才执行。我们在实际中用到最多的就是preHandle。Return是决定了请求是否放行。Returntrue是用户已登录，对要执行的操作进行放行。Session中无user，则不放行，跳转到login界面让用户进行登录操作，returnfalse。同时，还要再SpringMVC的配置文件中加入<mvc:interceptors><mvc:interceptor><mvc:mappingpath="/**"/><mvc:exclude-mappingpath="/user/login"/><beanclass="erceptor.PrivilegeInterceptor"/></mvc:interceptor></mvc:interceptors>其中，<mvc:mappingpath="/**"/>是设置对哪些页面进行拦截操作，<mvc:exclude-mappingpath="/user/login"/>是设置哪些资源排除拦截操作。可以根据需要自行更改。5.3注册页面用户需输入相应信息，才能进行注册，注册的姓名应为单一的，两次密码的输入应是相同的，若不符合要求，会有相应的提示。注册页面如图5-5所示。图5-5注册界面Username使用的是onblur事件，即当用户离开输入框时执行代码。当输入完成，点击当前输入框之外的地方就会进行是否为空的判断。如果不为空，就将数据传入后台，进行用户名是否已经被用过的判断。如果用户名未被使用过，显示绿色的用户名可使用，可以继续进行注册。Password使用的也是onblur事件，离开输入框时，会将前后两次的输入进行比对。若两次密码不同，则给出相应的提示。点击注册按钮则把用户填写的数据提交给后台，将信息封装到user类通过userService调用service层，再通过userDao调用dao层中的函数，再在UserDao.xml中写上sql插入语句完成用户的注册。用户名是否可用如图5-6，5-7所示。密码是否正确如图5-8，5-9所示。图5-6用户名可用图5-7用户名重复图5-8密码校验一致图5-9密码校验不一致姓名的ajax验证如下:functioncheckName(){varusername=$("#username").val();if(username==""){$("#userInfo").css("color","red");$("#userInfo").html("用户名不能为空");}else{$.post({url:"${pageContext.request.contextPath}/user/cname",data:{'uname':username},success:function(data){if(data.toString()=='ok'){$("#userInfo").css("color","green");$("#userInfo").html("用户名可用");//$("#userInfo").css("color","green");}else{$("#userInfo").css("color","red");$("#userInfo").html("用户名重复");}}});}}functioncheckPwd(){varpwd=$("#pwd").val();varpwd1=$("#pwd1").val();if(pwd!=pwd1){$("#pwdInfo").css("color","red");$("#pwdInfo").html("两次密码不一致");}else{$("#pwdInfo").css("color","green");$("#pwdInfo").html("两次密码一致");}}5.4购物车购物车界面是用于展示用户有购买意向的商品界面，在购物车界面实现了全选框，以及可以对商品的数量进行更改，也可以删除不想要的商品。购物车界面如图5-10所示。图5-10购物车界面全选框的实现:在商品详细信息前有方便用户的选择框，要保证商品前所有子框全选的时候，上面的全选框也要变为选中状态，当全选状态时，取消一个，全选框要变为取消状态。点击全选，或者是全不选，就会对所有的子框进行循环，将全选框是否选中的值赋值给子框，即可保证全选框和子框状态相同，即可完成全选，全不选操作。核心代码如下:functionckeckedAllBox(){varcheckAllBox=document.getElementById('checkAllBox');varboxs=document.getElementsByName("boxs");for(vari=0;i<boxs.length;i++){varpar=boxs[i].parentNode.parentNode;boxs[i].checked=checkAllBox.checked;if(checkAllBox.checked){par.style.backgroundColor='pink';}else{par.style.backgroundColor='#fff';}}}首先要把全选框变为选中状态，对所有子框进行遍历。如果子框有一个是未被选中状态，就把全选框的状态变为取消。functioncheckBox(){varcheckAllBox=document.getElementById('checkAllBox');varboxs=document.getElementsByName("boxs");checkAllBox.checked=true;for(vari=0;i<boxs.length;i++){//判断四个多选框是否全选varpar=boxs[i].parentNode.parentNode;par.style.backgroundColor='pink';if(!boxs[i].checked){//一旦进入判断，就代表不都是全选，把checkAllBox直接设置成falsecheckAllBox.checked=false;par.style.backgroundColor='#fff';}}点击去结算按钮，按钮设置onclick事件，点击后执行ifJs，得到购物车中的商品id和数量。如果没有选中商品就点击去接结算，就会提醒用户请至少选择一样商品。存入list中，传到后台计算总价，生成订单，插入订单详细内容，更改统计表，删除购物车里的内容。functionifJs(){/*存放已选择的商品*/vararr=newArray();/*看是否被选中*/varboxs=document.getElementsByName("boxs");alert("得到选中框");for(vari=0;i<boxs.length;i++){if(boxs[i].checked){//得到商品id和商品数量varid=boxs[i].nextElementSibling.value;varnum=boxs[i].parentNode.parentNode.children[3].children[0].children[1].value;varobj=newObject();obj.id=id;obj.num=num;arr.push(obj);}}if(arr.length==0){alert("请至少选择一个商品");returnfalse;}/***@paramresult.RES{String}*/$.ajax({type:"POST",url:"${pageContext.request.contextPath}/order/addOrder",data:JSON.stringify(arr),contentType:"application/json",success:function(result){alert("ajax执行了");if(result.RES){}else{alert("购买成功");}}});}5.5商品详情页面商品展示界面可以帮助用户进一步的了解商品的详细信息，有助于商品的购买。商品详情展示一般都有类似于放大镜的功能。商品展示页面如图5-11所示。放大图部分如图5-12所示。图5-11商品详情界面图5-12放大图实现放大镜这个功能，我们主要把这个功能分成三个元素，一个是正常展示图片的盒子，一个是上图中黄色区域，用于显示当前鼠标位置和图片显示范围。还有一个是用于展示放大图的容器，大图平时是隐藏起来的，只有将鼠标移动到正常的图片上时才会显示。显示时要加上z-index=999，使放大图在最上层。z-index的数值越大的就显示的越靠上层。这一步使用到的事件有mouseover和mouseout。是在鼠标移入或移出时触发的事件。preview_img.addEventListener('mouseover',function(){mask.style.display='block';big.style.display='block';})preview_img.addEventListener('mouseout',function(){mask.style.display='none';big.style.display='none';})e.pageX-this.offsetLeft这句话的意思是用鼠标在页面中的距离减去图片左侧的边距，得到的就是鼠标的水平偏移量。竖直偏移量的求法同水平偏移量。设置黄色区域跟随鼠标移动，并限制其移动的范围，只能在图片的内部进行移动。核心代码如下:preview_img.addEventListener('mousemove',function(e){//1.计算出鼠标在盒子内的坐标varx=e.pageX-this.offsetLeft;vary=e.pageY-this.offsetTop;//2.黄色的盒子跟鼠标移动//3.求出mask移动的距离varmaskX=x-mask.offsetWidth/2;varmaskY=y-mask.offsetHeight/2;//x<0;就让他等于0，停在0的位置 //限制黄色区域移动的范围if(maskX<=0){maskX=0;}elseif(maskX>=preview_img.offsetWidth-mask.offsetWidth){maskX=preview_img.offsetWidth-mask.offsetWidth;}if(maskY<=0){maskY=0;}elseif(maskY>=preview_img.offsetHeight-mask.offsetHeight){maskY=preview_img.offsetHeight-mask.offsetHeight;}mask.style.left=maskX+'px';mask.style.top=maskY+'px';//mask的最大移动距离varmaskMax=preview_img.offsetWidth-mask.offsetWidth;//大图varbigImg=document.querySelector('.bigImg');//大图片的最大移动距离=大图片的宽度-框的大小varbigMax=bigImg.offsetWidth-big.offsetWidth;//大图片的移动距离varbigX=maskX*bigMax/maskMax;varbigY=maskY*bigMax/maskMax;bigImg.style.left=-bigX+'px';bigImg.style.top=-bigY+'px';})})5.5后台界面从这里开始，挑选的是后台主要几个模块进行简要说明。后台采用的是响应式布局，就是同一个界面在不同的大小下显示不同的样式。采用响应式布局可以很好的适应本系统后续的维护与在移动端拓展。主要是@mediascreenand(max-width:768px)在这里设置最大宽度为768px的页面样式。正常大小样式如图5-13所示。图5-13后台界面缩小状态下点击右上角，选项即可显示。缩小后台界面如图5-14所示。图5-14后台界面5.6商品管理商品管理页面是管理员对商品进行增删改查的界面，方便管理，页面简洁美观，易于操作。商品管理界面如图5-15所示。图5-15商品管理界面5.7订单管理分为两个部分显示，上半部分显示支付时间和删除按钮，下半部分则显示购买商品的详细信息。对于已支付的订单，管理员也可以更改其状态。方便对订单进行管理。订单管理界面如图5-16所示。图5-16订单管理界面5.8图表展示使用了echarts作为展示图表的工具，如图所示，图中展现了每个类销售额的占比，更有益于管理员进行数据的统计，可根据类别的销售额对商品结构做出进一步管理。@RequestMapping是用来对地址进行映射的注解，@RespomseBody通常是在返回Json数据时使用的注解。注解的使用可以极大限度简化了配置文件，方便我们进行开发。通过statisticsService.findAll()查找到每个类别的cid以及每个类别的金额，存入stat中，遍历stat，再通过cid查找到每个类别的名称，并通过set方法将其设置到dto中，返回json形式的数据。前端直接对传的json数据进行接收并显示即可。图表展示界面如图5-17所示。@RequestMapping("/findAll")@ResponseBodypublicList<StatDto>findAll(){/*对应的类别姓名与钱数*/List<Statistics>stat=statisticsService.findAll();List<StatDto>dto=newArrayList<>();for(Statisticss:stat){StatDtod=newStatDto();d.setValue(s.getAmount());d.setName(categoryService.findById(s.getCid()));dto.add(d);}returndto;}图5-17图表展示

6测试 测试是我们在开发过程中不可省略，是验证系统是否健壮，能否按照设想的方式进行工作，系统是否完整的关键一步。不但可以暴露从未注意到的业务逻辑上的漏洞和错误，还可以使我们寻找错误原因，通过改正错误，增加自身经验，完善系统，使系统更加安全可靠。成功的测试就是发现了还没发现的错误。 测试方法基本上分为两种，一种是不考虑内部结构和处理过程，只对相应功能进行测试的黑盒测试，另一种是测试内部工作构成的白盒测试，有又称结构测试。表6-1注册测试测试内容期望结果实际结果状态注册时输入重复用户名输入框后显示用户名已被使用，请更换用户名输入框后显示用户名已被使用，请更换用户名通过输入信息不全，点击注册按钮弹出输入信息不全弹出输入信息不全通过两次密码输入不相同在密码框后显示两次密码不一样在密码框后显示两次密码不一样通过输入正确信息并点击注册注册成功，跳转到登陆页面注册成功，跳转到登陆页面通过表6-2登录测试测试内容期望结果实际结果状态不输入用户名并点击登录弹出用户名为空弹框弹出用户名为空