【《基于SSM框架的服装购物网站的设计与实现》11000字(论文)】_第1页
【《基于SSM框架的服装购物网站的设计与实现》11000字(论文)】_第2页
【《基于SSM框架的服装购物网站的设计与实现》11000字(论文)】_第3页
【《基于SSM框架的服装购物网站的设计与实现》11000字(论文)】_第4页
【《基于SSM框架的服装购物网站的设计与实现》11000字(论文)】_第5页
已阅读5页,还剩24页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

基于SSM框架的服装购物网站的设计与实现摘要21世纪的今天,伴随着市场以及社会环境的选择,互联网购物蓬勃发展。网络中虽然出现了很多大型的购物网站,但其无法为企业提供独特的风格需求,所以很多中小型企业对于搭建自己的购物网站的需求越来越强烈。本次的设计目的就是为了满足这些中小企业对于自己专属购物网站的需求。其主要使用的是JAVA语言进行开发,后端部分使用SSM框架作为开发框架,利用Ajax来进行前端与后端的交互,使用MYSQL作为数据库管理软件。服装购物网站中分为消费者浏览界面以及管理员管理后台界面。前端界面是包括普通用户浏览的购物界面,在用户购物界面主要包括的是:会员信息管理功能,商品信息管理功能,加入购物车功能,购物车管理功能,订单功能。管理员管理网站后台界面,主要功能分成会员管理,商品管理这两个部分。关键词:SSM框架,服装购物网站,MYSQL目录TOC\o"1-2"\h\z\u1 绪论 12 开发平台及相关技术 22.1开发软件及工具 22.2网站建设框架 23 需求分析 33.1功能概述 33.2用例图 34结构设计 54.1整体流程设计 54.2设计目标 65 数据库设计 75.1数据库逻辑设计 75.2数据库物理设计 86 详细设计与实现 106.1用户登陆功能 106.2用户注册功能 126.3商品展示分类 146.4商品加入购物车 166.5用户购物车管理 176.6管理员商品管理 206.7管理员会员管理 21结论 23参考文献 24图清单图序号图名称页码图3-1未注册用户用例图5图3-2登陆用户用例图7图3-3商城管理员用例图9图4-1服装购物网站结构图10图4-2服装购物网站流程图11图5-1用户信息结构图12图5-2商品信息结构图14图5-3购物车信息结构图16图6-1消费者登录页面效果图图6-2用户登陆流程图6-3会员注册页面效果图图6-4注册页面注册流程图图6-5商品分类效果图图6-6服装商品展示分类图图6-7用户购物车页面效果图图6-8购物车添加功能流程图图6-9用户购物车部分页面效果图图6-10用户购物车管理流程图图6-11商品管理效果图图6-12商品管理流程图图6-13会员管理页面效果图图6-14管理员会员管理流程图表清单表序号表名称页码表5-1user人员数据表16表5-2cl服装商品数据表17表5-3cart购物车数据表17绪论在2021年的今天,信息化的脚步一直跟随这我们,生活中处处伴随着互联网和电子信息的技术,可以说现在的我们失去了互联网会就感觉与这个社会所脱轨,信息之间的飞速传递可以让我们很快的了解到现在我们身处的环境中到处的变化,了解到身边以及世界各处的状况。随着这个社会情况,现在很多人已经习惯于在网络上浏览信息与娱乐。用户们花费并付出大量的时间与精力浏览者各种各样的网页,所以网络购物的出现也是市场以及社会环境的选择网络购物是一个发展前景巨大的市场,它打破了地区之间的限制,让我们可以挑选到千里之外的物品,加快了各个区域之间经济的流通,对整个社会的市场产生着巨大的影响。网络购物网站中充斥的大量的商品,其给用户提供了比线下超市更多的商品选择,用户可以在这其中挑选到自己最为心仪的产品,简单而清晰的用户界面可以让用户最快的速度找到自己想要购买的商品,而省去了在超市中苦苦寻找而挑选不到的弊端,其便捷性也极大的方便了我们的生活。现在的网络中,已经存在着大量的购物网站,很多大型的购物网站,其中非常有名的包括,淘宝,京东,当当网等网站,其具有数量庞大浏览用户每天浏览着界面,带来了非常庞大的流量,大量的用户也吸引着大量的供应商以及个人卖家入驻其中,是非常庞大的购物系统,很多人便从此挣到了自己的第一桶金。当然除了这些大型的购物网站之外,还存在着很多企业个人的专属商品售卖网站,在这些网页上企业可以根据自身的需求来对网站的整体风格已经设计的需求提出修改,便于传播自身的品牌。现在很多中小企业开始从之前的实体店开始初步向网络化转型,对于拥有专属于自身的购物网站的需求越来越大,所谓本次所设计的网站其主要设计的目的就是为了满足此种中小企业或者个体对自身购物网站的需求。设计平台及技术介绍2.1开发工具介绍 Eclipse是目前环境下非常流行的系统开发工具,作为一个开放源代码基于Java的开发平台,它具有很强大的可扩展性能,可以导入各种JDK包来辅助我们系统的开发,Eclipse其本身而言只是一组服务和一个框架,通过调用不同的工具包及工具帮助我们搭建系统工程,其最大的优点在于免费提供,十分适合初学者使用。2.2开发框架介绍 SSM框架介绍,SSM框架是Spring,SpringMVC,Mybatis的集合缩写,此框架是继SSH之后目前市面上较为流行的软件开发框架,适用于大部分的软件应用系统的开发。其主要三部分介绍如下: Spring介绍: Spring是一个轻量型的Java开发框架,其最初开发的目的是为了解决企业应用开发的复杂性而建立的,简单来说:Spring是一个控制反转以及面向切面的容器框架。 SpringMVC介绍: SpringMVC是数据SpringFramework的后续产品,它支持Spring的很多特性,使我们的开发变得非常简单规范,并且其分离了各个对象,使得它们更容易进行定制。 MyBatis介绍: MyBatis是一个基于Java的持久层框架。通过MyBatis框架可以在使用中利用简单的XML或者注解用于配置和原始映射,使用它来帮助实现对数据库的各种操作2.3数据库介绍 MySql数据库是目前环境下最为流行的数据库管理系统,其作为一个关系性的数据库的访问系统,使用的SQL语言是用于访问数据库的最常用的标准化语言。有着广泛的应用,其优势如下:源代码可移植性高,支持多种操作系统为多种编程语言提供API,提供多种数据连接途径支持多线程,充分利用CPU的资源支持大型的数据库,可处理大量的数据支持多种存储引擎需求分析在对网站设计之前,首先要明白设计的作品是为了满足用户的使用而制作的,所以要深刻了解用户需要的一些功能以及管理员所需要的功能,并将这些功能完善,并做到创新,美观。首先对于用户需要的功能有可以看到服装的样子,了解服装的价格和服装的详细数据比如尺码,款式等等,能使用户正确的注册账号,能够正常登录账号并且进行购物,能够将商品增加至购物车。对于网站的管理员设计需要做到的东西有输入准备的账号登录到设计的后台管理页面,在后台管理页面进行商品的修改,比如增加新的商品,删除旧的商品,对商品的数量和价格进行修改。3.1功能概述这次设计的电子服装购物网站分为前段和后端两个部分,前段是负责用户使用的,能够正常登录,展示各种商品,对于商品的购买,以及将商品加入购物车。后端是管理员使用的,能够让管理员对于网站的数据进行修改,方便管理员对数据的操作,具体包括:管理员的登录,对商品的增加,删除,以及对商品数据的修改。前端主要负责的是用户,方便用户使用,后端则是为了管理员的操作而创建的。3.2使用者用例图一、未注册的用户用例图通过例如图3-1所示,设计的用户如果没有注册一个账户,直接前往购物网站,网站能够正常显示各种服装的信息,但是如果没有注册账号,用户就不能购买任何商品,只有通过注册成功注册账号之后,用户才能够正常的购物。图3-1未注册用户用例图登陆用户用例图当用户成功注册账号之后用户就能够登录到网站上去了,用户可以在购物页面上自己浏览各种服装,将自己喜欢的服装添加到购物车之中,在浏览完毕之后可以前往购物车页面,修改自己的地址,然后下单,将自己想要的服装购买回家,用户的具体功能如下图的3-2所示。图3-2登陆用户用例图商城管理员用例图在整个网站中存在着一个核心用户,就是的管理员,管理员需要登录,并且对于后端的数据进行各种修改,如图3-3所示,设计的管理员可以对于用户的数据进行各种修改,也可以对商品进行各种修改。图3-3商城管理员用例图4结构设计 根据用户的主要需求,本次网上服装购物网站的主要部分分成前台显示给消费者的商品浏览界面,以及面向服装购物网站管理员的后台网站管理界面两个部分,具体设计结构如下: 消费者浏览商品页面: 一个完善的购物网站需要的不仅仅是完善的功能还需要一个让人赏心悦目的浏览界面,所以设计的购物网站界面一定要美观,色彩的搭配不能太过冲突,应尽量选择偏浅色调的颜色来设计网站,不能让用户在浏览的过程中感觉到强烈的色彩冲突,这个部分会极大的影响到用户浏览网页的时常。在美观的界面之下我们就可以把我们一些用户必需的功能嵌入到我们的网页之中,所以此次设计的消费者浏览页面又分别设计出包括:购物网站首页,消费者登入页面,消费者注册页面,商品分类界面,商品信息详细展示界面,消费者购物车界面等六个子界面。 购物网站首页:此界面是用户进入网站所看到的第一个浏览界面,用户可以在此界面看到网站中热门的服装商品以及一些新上架的服装商品展示在其中。在此页面中根据需求在其上添加了消费者登入页面按钮,消费者注册页面按钮,以及男装,女装,童装等多个不同界面的入口,用户可以点击不同的按钮进入网站的子界面,可以说这个页面是整个消费者浏览界面的核心重点所在 消费者登入页面:此界面中用户可以在页面中的输入框中输入自己的账号以及密码登入到界面之中。整个页面也是服装购物网站中不可缺少的一个部分,只有用户在登入到这个页面之后,才可以实现在网站之中的购买功能。 消费者注册页面:此页面是满足第一次浏览网页的用户在没有专属账号的情况下创建账号的界面,这个界面中用户把自己的个人账号和密码输入到页面的输入框中,点击确定完成账号注册的功能,此界面是每位用户都访问过的界面,要求美观大气,是服装购物网站的必须功能。 商品分类界面:此界面是消费者浏览的主要本次,在这个部分消费者可以快速浏览到自己像购买的服装商品,所以这个部分将根据不同的商品种类分成了多个包括:男装分类界面,女装分类界面,童装分类界面和婴儿装分类界面等界面,其每个界面中又将继续细分成多个包括上装,裤装,外套等多个分类部分,让用户可以在第一时间浏览到商品的所在。 商品详细展示页面:此界面之中存放的是商品的详细数据包括:商品图片展示,商品名称展示,商品尺码选择,商品数量选择,商品快递地址选择等等基本功能,用户可以在此对想要购买的商品进行更加深入的了解,在此界面中用户可以点击其页面上的加入购物车按钮将商品加入到自己的购物车之后完成加入购物车功能。 购物车展示页面:此页面中存放的是消费者在浏览服装购物网站中所挑选到的心仪的服装,在这个界面用户可以看到不同商品的不同信息呈现在自己的眼前,此界面中消费者可以进行商品的数量增加或者减少功能,也可以点击删除把商品移出自己的购物中,在挑选完商品后可以点击购买完成购买功能在这六个子界面中分别给用户提供不同的信息,满足了浏览网页的消费者的基本需求 后台管理员管理界面: 完善的服装购买网站是除了满足消费者购买的浏览界面之外,还需要网站的管理员来进行网站的日常维护与管理。这个界面之上网站管理员可以看到网站中所有的商品以及在网站上注册过的所有用户,在这里网站管理员可以进行对商品,人员的管理。这是整个服装购物网站不可缺少的一个,在此我们使用Lay-UI中的框架来进行后台网页的搭建,在左侧的选项卡中我们可以选择会员管理以及商品管理两个模块,点击不同的按钮将在网页的右侧显示不同的信息,具体介绍如下: 会员管理界面:在这个界面之中,网站管理员可以查看到所有的会员信息,通过点击右侧的按钮可以实现会员的删除功能, 商品管理界面:在这个界面之中,网站管理员可以查看到所有的商品信息,通过点击右侧的按钮可以实现商品的删除功能,总体结构图如图4-1所示:图4-1电子商城结构图4.1整体流程设计 本次服装购物网站流程介绍如下: 用户在进入网站是可以浏览到所有的商品,之后点击网站首页之上的用户登入功能就可以进入到登入界面,在这里我们就可以登入我们的网站,在登入网站之后根据不同的用户权限显示不同的内容,例如网站的管理员会比消费者多看到一个网站管理后台的登入入口,在普通消费者登入之后网站会自动重新跳转到服装购买的首页面。在首页消费者点击页面上方的四个服装分类进入到服装分类的界面,在服装分类界面用户就可以在此挑选自己想要的商品。用户挑选到想要的商品之后用户点击商品图片,界面会随之跳转到商品详细展示界面,在详细展示界面之中用户可以看到商品的详细内容,处于需求以及安全性的考虑,用户在未登入到网站的情况下不可以点击加入购物车功能。网页会自动跳转到服装购物网站的登入界面。在用户登入之后,用户就可以实现加入购物车的功能。点击加入购物车按钮,网页跳转到消费者专属的购物网站之中,消费者可以在购物车界面之中实现对购物车中服装商品的数量的增加和减少,也可以点击按钮直接将商品删除出购物车本电子服装商城流程设计为先让用户完成登陆功能再细分登陆会员的权限分为消费者和后台管理员,消费者选择商品加入购物车完成购物,后台管理员则对网站的会员和商品进行管理。在此页面用户可以点击图标重新返回首页继续浏览商品也可以在此页面上直接点击购买按钮完成本次的购物具体设计思路如图4-2所示。图4-2电子商城流程图数据库设计数据库中存放的是我们整个服装购物网站的所有信息,应该根据我们的需求来设计整个数据库。设计良好的数据库可以让我们在编写代码的时候逻辑更加的清晰,是我们编写代码的基础。数据库应满足规范,确保数据的完整和正确性,良好的设计可以减少数据的冗余,提高整个程序的运行效率。本次的数据库设计所使用的数据库是MYSQL数据库,MYDSQL是市面上最为主流的数据库软件,其强大的功能可以满足我们日常的需求,而且其可以向我们学生主体免费使用。此次的服装购物网站主要的数据表包括用户表,用户购物车表,商品信息表这几个数据表,通过这三个数据表可以完成对整个网站的信息存储。5.1数据库逻辑设计一、用户信息表 此表中存放的数据是在网站中注册的所有用户的信息,它包含用户的ID,用户登录账号,用户识别码,用户联系方式,用户登录密码等。其中我们通过识别码来区分用户的权限,当用户登录的时候,系统会识别所登录的人员的身份来在网页中显示不同的内容。其具体表字段如图5-1所示: 图5-1用户信息结构图二、商品信息表 商品的信息表中存放的数据是服装购物网站中所有商品的信息,其中包含的字段是:商品的ID,商品的价格,商品的名称,商品的大类比,商品的小类别,商品展示的图片等等这些数据,其中商品的大类别中存放的数据是区分男装,女装,和童装,商品的小类别中存放的是服装的类别属性:上装,外套,下装等三个部分,其具体的字段如图5-2所示图5-2商品信息结构图三、用户购物车表 用户购物车表中存放的数据是每个用户自己选择加入到购物车中的产品,其包含像商品的ID,商品的名称,商品的价格,购买商品的用户名,商品的数量,商品的尺码等等,用户的购物车中存放的具体字段如图5-3所示: 购物车实体结构主要包括购物车的一些基本信息,例如商品的ID,商品的名称,商品价格,商品展示,购买商品的用户名,商品数量,商品尺码。购物车实体结构如图5-3所示:图5-3购物车信息结构图四、服装购物网站整体E-R图 本次设计的服装购物网站的主体分成了四个对象,分别为:消费者对象,购物车对象,商品对象,管理员对象。在这个其中消费者负责的是购物车的管理以及购买商品的功能,管理员则负责实现商品管理和会员管理这两部分的功能。整体购物网站的所有对象及每个对象中所包含的字段属性如图所示:图5-4电子商城整体E-R图5.2数据库物理设计 数据库在其设计之中除了逻辑设计之外还需要我们进行数据的物理设计,这个过程是把逻辑上的字段添加到数据库之中。在添加的过程之中我们需要对数据进行更加详细的设计,对数据的类型及类型长度做细致的设定,除了对数据的属性名以及类型作细致的区分之外还需要我们对其是否为主键是否为空做更加详细的设计。在本次设计之中,我们使用到了MYSQL数据库,使用其作为数据的存储。本次设计所有数据库字段如下所示:人员数据表人员信息表中存放的数据是全部人员的信息,在其中存储这服装购物网站上所有的用户信息。用户在登录的时候所输入的数据必须与此表中的数据所对应,不然无法输入。在注册界面中所注册的信息也会被添加到此表中,作为登录的依据。其主键是userid,通过userid来分辨表中不同的数据,username以及password作为用户登录时的检测字段,用来判断用户在登录的时候所输入的账号是否存在,其密码是否正确。其中Code此字段用来判断所登录人员的身份,不同身份的人员在登录进入此网站之后所显示的内容也是不相同的,其具体字段如表5-1所示。表5-1user人员数据表列名类型主键非空说明userIdint(8)YY用户IDuserNamevarchar(10)YY用户名称passwordvarchar(10)NY用户密码Codeint(1)NY身份识别码mobileint(15)NY用户联系方式服装商品数据表服装商品信息表,此表中存储的所有信息是网站中所出售的各种商品和每种商品所包含的基本信息。此表中主键是Clid字段,此字段作为商品的唯一判断。Clname字段中存储的是商品的名称,Price字段中存储的是商品的单价,Bigtype字段以及Smalltype字段中存储的信息是商品的类别,系统通过此字段来判断商品所显示的位置,Picture字段中存放的是商品的展示图片具体字段如表5-2所示表5-2cl服装商品数据表列名类型主键非空说明ClIdint(20)YY商品编号ClNamevarchar(30)NY商品名称Priceint(20)NN单价Bigtypevarchar(20)NN商品大分类SmalltypeInt(10)NN商品小分类Picturevarchar(100)NY商品展示图片购物车数据表购物车数据表,此表中存放的所有数据是用户在网站上所挑选加入到购物车中的商品。其主键是userid字段以及clid字段,通过这两个字段来做数据的唯一判断。其中,userid字段表示此商品的挑选者是哪位用户。此外其他字段与服装商品数据表类似,具体字段如下表5-3所示表5-3cart购物车数据表列名类型主键非空说明ClIdint(8)YY商品编号ClNamevarchar(10)NY商品名称Priceint(9)NY单价Bigtypevarchar(8)NY商品大分类SmalltypeInt(8)NY商品小分类Picturevarchar(100)NY商品展示图片Useridvarchar(100)YY用户ID网页详细设计与实现此部分包含网站详细的功能,与各个模块之间的功能介绍,本次网页主要分为一下模块:前端分为用户的登录,用户的登出,整体网站的展示,商品详细展示部分,购物车页面,后台管理界面主要功能是会员管理以及商品管理6.1用户登录设计用户的登陆功能:如果用户需要使用购物车功能的话,需要注册一个账号才可以使用购物车,不然数据库内没有用户资料,不可以开始购物。因为系统的使用是需要用户登陆后才可使用,这也是为了网站及客户的安全性来考虑。登录操作需要用户在商城界面,点击右上角的登录按钮,待系统跳转到登陆界面时才可使用。用户需要输入账号及密码,并保证账号密码时正确的,就可以登陆商城。登陆页面效果图如图6-1所示图6-1消费者登录页面效果图 如用户在登录界面中输入错误的用户名或者错误的密码,此时后端部分根据查询的结果,显示查重失败。若查询到正确的账号密码就提示登录成功并直接跳转到服装购物网站的首页,具体用户注册流程图如图6-2所示:图6-2用户登陆流程用户登录部分核心代码展示:@Resource(name="UserService") privateUserServiceUserService; @RequestMapping(value="/login",method={RequestMethod.POST,RequestMethod.GET}) publicStringlogin(Useruser,HttpSessionsession){ UserExampleexample=newUserExample();List<User>users=UserService.selectByExample(example); example.createCriteria().andLoginnameEqualTo(user.getLoginname()).andPasswordEqualTo(user.getPassword()); if(users.size()>0){ session.setAttribute("u",user); return"/hhh/hao.jsp"; } else{ return"/hhh/dh-login.jsp"; } } 如果输入错误的用户ID或者用户密码则显示登陆失败,如果输入正确则提示登录成功并跳转到服装购物页面首页<selectid="selectByExample"resultMap="BaseResultMap" parameterType="cn.easybuy.bean.Example"> select <iftest="distinct"> distinct </if> <includerefid="Base_Column_List"/> fromuser <iftest="_parameter!=null"> <includerefid="Example_Where_Clause"/> </if> <iftest="orderByClause!=null"> orderby${orderByClause} </if> </select>6.2用户注册设计在服装购物网站的设计中,用户的注册功能是必不可少的。在网站的设计中,消费者必须先注册自己的账号才能登录服装购物的网站。没有注册的账号是无法将商品加入到购物车之中。其中本次设计对注册账号进行判断,如果消费者在注册页面中输入的账号已经重复了,则注册失败。在用户点击注册按钮之后,前端会将用户注册页面中表单里的所有数据传送给后端来接受。其中必须包括用户名,用户的密码,用户ID,身份识别码以及电话联系方式等信息。后端在接受到这些信息之后,调用action方法根据传送过来的用户ID字段来查询会员信息表,若查询到重复的信息则返回注册失败。若查询不到重复信息,则将这些信息插入到会员信息表中。会员注册页面效果图如图6-3所示:图6-3会员注册页面效果图 注册页面具体流程如图6-4所示:图6-4注册页面注册流程图注册部分:前端页面传送数据到后台action位置,后台接收用户注册信息。@RequestMapping(value="/register",method={RequestMethod.POST,RequestMethod.GET}) publicStringlogin1(Useruser,Modelmodel){ intusers=UserService.insert(user);把前台收到的数据进行inset操作,按照用户表格式写入到用户表<insertid="insert"parameterType="cn.easybuy.bean.User"> insertintouser(id,loginName, password,identityCode,mobile ) values(#{id,jdbcType=INTEGER},#{loginname,jdbcType=VARCHAR}, #{password,jdbcType=VARCHAR},#{identitycode,jdbcType=VARCHAR}, #{mobile,jdbcType=VARCHAR} ) </insert>6.3商品分类展示设计 在本次设计的服装购物网站中,为了方便消费者能更加快速的浏览到想要的商品,所以在网站最初的设计过程中给商品字段添加了大类别和小类别字段,通过这两个字段我们来区分商品的类别属性。网站通过这两个不同的属性将商品排列到不同的位置。 用户在挑选好自己想要的商品之后,点击图片从而成功触发detail.action,后台接收到请求之后,将此件商品的各种信息带入到商品详细展示页面。具体服装购物网站子页面效果图如图6-5所示:

图6-5商品分类效果图本次所设计的服装网站上,根据需求将商品类别分成了女装,男装,童装以及婴儿装三个大类别,在这三个大类别之下,又继续分成了三个小类别。具体商品分类结构图如下6-6所示图6-6服装商品展示分类图服装商品分类展示核心代码如下:前端传递商品大类别给后台接受,后台在接受之后通过查询的action将根据此字段查询商品数据表,并返回数据。在之后后台再根据商品的小类别字段来分别排列商品出现的位置 后台Action部分核心代码展示: publicStringwomen(HttpSessionsession){ List<Clothes>womenlist=ClothesService.findwomen(); if(womenlist.size()>0) session.setAttribute("womenlist",womenlist); return"/syh/dh-women.jsp"; }前端分类展示部分核心代码展示:<selectid="findwomen"resultType="cn.easybuy.bean.Clothes"> SELECT*FROM cl wheremaintype="women" </select><c:forEachitems="${womenlist}"var="item"> <c:iftest="${item.finetype==1}"> <li> <ahref="${pageContext.request.contextPath}/show.action?clid=${item.clid}"> <divclass="product-content"> <divclass="product-background"> <imgclass="picture-img"src="${pageContext.request.contextPath}/picture/${item.picture}"title="${item.clname}">通过layui中自带的C:ForEach方法将不同的数据显示到前端界面之上<c:forEachitems="${menlist}"var="item"> <c:iftest="${item.finetype==1}">使用layui中的C:ForEach字段可以将数据列表中的数据进行遍历搜索,在之后利用C:if来根据商品小类别进行控制显示位置。最后实现网页的分类显示页面。通过这种方式可以使得所设计的服装购物网页整体展示效果更加美观,便于浏览。可以极大的提高用户浏览的舒适程度6.4购物车添加功能 当用户在服装购物网站上挑选到了自己中意的商品之后,在服装商品的详细展示界面中点击最下方的购买按钮,通过此按钮触发addCart.action的行动,此刻后台会将消费者输入到商品详细展示界面的各种信息添加到购物车数据表中,此时若出现挑选重复商品的情况,网站会自动将购物车中商品的对应数量增加,避免显示重复的数据在购物车之中。在用户点击购物之后,网站会提示购买成功的弹窗信息。在之后页面会自动跳转至购物车页面,并且触发showCart.action行动,通过网站前端传送userid信息后端接受的方式。此方法通过userid字段查询购物车表中的所有信息,并将其显示在页面之中,完成购物车的添加功能,具体页面效果如图6-7所示 图6-7用户购物车页面效果图购物车添加功能流程图如图6-8所示:图6-8购物车添加功能流程图当用户点击添加购物车按钮的时候,后台自动把数据一起带入到了后台session中,并对数据进行处理。购物车添加功能部分核心代码展示@Resource(name="CartService") privateCartServiceCartService; @RequestMapping(value="/Mycart",method={RequestMethod.POST,RequestMethod.GET}) publicStringmycart(Cartcart,HttpSessionsession){ List<Cart>list=CartService.findid(cart.getClid()); if(list.size()>0){ CartService.update(cart.getClid()); } else{ intresult=CartService.insert(cart); } return"/syh/cartex.jsp"; }在编写action的时候我们需要先定义cart的实体类,其中cart实体类中的字段需要与购物车数据表中的字段相对应,这样便于我们数据的输入。 <insertid="insert"parameterType="cn.easybuy.bean.Cart"> insertintocart(username,clid,clname,price,picture,how,city,size,number) values(#{username,jdbcType=VARCHAR},#{clid,jdbcType=INTEGER},#{clname,jdbcType=VARCHAR},#{price,jdbcType=INTEGER},#{picture,jdbcType=VARCHAR},#{how,jdbcType=VARCHAR},#{city,jdbcType=VARCHAR},#{size,jdbcType=VARCHAR},#{number,jdbcType=INTEGER}) </insert>在加入购物车成功之后,系统会自动执行show.action的操作,将购物车数据表中此用户的所有数据全部展示在购物车界面之中,具体代码如下:<c:forEachitems="${carts}"var="item"><tr><td><divalign="center">${item.clid}</div></td><td><divalign="center"><imgsrc="picture/${item.picture}"/></div></td><td><divalign="center">${item.clname}</div></td><td><divalign="center">${item.price}</div></td><td><divalign="center">${item.size}</div></td>6.5用户购物车管理 用户挑选到合适的产品之后加入购物车,在服装购物网站中购物车页面,可以实现购物车管理功能。一个功能完善的服装购物商场中必须包含购物车的管理功能,其可以使得用户在购物车界面中对自己选择的商品自由的进行修改操作。当系统执行完Show.action行动之后,购物车数据表中的信息已经呈现在了购物车页面之中,我们可以在其中对某一条数据进行数量的增加或者减少,相应的表格中显示的小结部分将随着数量的改变而发生改变,当然我们还可以在点击右侧的删除按钮将此条数据从购物车数据表中删除购物车部分,页面展示如图6-9所示:图6-9用户购物车部分页面效果图用户购物车管理流程如图6-10所示:图6-10用户购物车管理流程图此部分用户购物车管理的基本功能是对购物车数据数量的增加,减少功能,删除功能。当用户点击增加以及减少功能的时候,系统触发addnum.action以及subnum.action两部分操作,触发时前端会将此商品的id以及用户的id一起传入到后台之中,后台根据这两个字段精确到一条记录并对其进行数据库操作,并且返回刷新show.action操作,使得页面显示正确的参数。@RequestMapping(value="/subnum",method={RequestMethod.POST,RequestMethod.GET}) publicStringsubsum(Cartclid,Modelmodel){ CartService.subnum(clid.getClid()); List<Cart>cartlist=CartService.findall(clid.getUsername()); model.addAttribute("cartlist",cartlist); return"/hhh/cart.jsp"; } @RequestMapping(value="/addnum",method={RequestMethod.POST,RequestMethod.GET}) publicStringaddsum(Cartclid,Modelmodel){ CartService.addnum(clid.getClid()); List<Cart>cartlist=CartService.findall(clid.getUsername()); model.addAttribute("cartlist",cartlist); return"/hhh/cart.jsp"; }当用户点击右侧部分的删除按钮之后,前端发送delete.action操作给后端部分,后端部分根据传递过来的用户id以及商品id判断唯一数据,将其移出购物车数据库表: @RequestMapping(value="/delete",method={RequestMethod.POST,RequestMethod.GET}) publicStringdelete(Cartclid,Modelmodel){ CartService.delete(clid.getClid()); List<Cart>cartlist=CartService.findall(clid.getUsername()); model.addAttribute("cartlist",cartlist); return"/syh/dh-cart.jsp";}6.6管理员商品管理 在本次设计的服装购物商城之中,除了正常的消费者的角色之外,还需要网站的管理人员来进行网站的管理与维护电商系统的商品管理模块作为电商管理系统最重要的功能之一,是电商的重中之重,是一切的基石。在这个模块中,用户可以实现商品的管理功能商品管理效果图展示如图6-11所示:图6-11商品管理效果图点击删除按钮可以触发delete.ation事件完成对数据库中商品的删除商品管理流程图如图6-12所示:图6-12商品管理流程图核心代码展示:前台发送商品查找请求到后台action后台接受到请求把数据返回到前台根据前台操作按钮进行商品管理。商品管理页面中,进行product.action操作请求到后端action中,在后端接收到请求后查找用户表中的所有信息,并将其放入到session中带回到会员管理表中。详细代码如下: @RequestMapping(value="/product",method={RequestMethod.POST,RequestMethod.GET}) publicStringproduct(HttpSessionsession){ List<Clothes>productlist=ClothesService.findproduct(); if(productlist.size()>0) session.setAttribute("productlist",productlist); return"/syh/ht-product.jsp"; }网页在前端通过点击进入deleteproduct.action,根据商品id把网站商品表中的对应商品信息删除进行商品下架功能: publicStringproductdelete(HttpSessionsession){ List<Clothes>productlist=ClothesService.deleteproduct(); if(productlist.size()>0) session.setAttribute("productlist",productlist); return"/syh/ht-product.jsp"; }6.7管理员会员管理 在服装购物网站的后台中,除了商品管理之外还需要对会员进行管理,其主要功能是会员的展示,会员的删除功能,当管理员点击到页面右侧的删除按钮时将会触发deleteuser.action操作,前端返回会员id提交给后端,

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论