计算机毕业设计 jsp校园OTO超市系统ssm 毕设

1.演示视频：

https://www.bilibili.com/video/BV1ou4y1K7US/

第4章总体设计

总体设计是对系统进行的一个总体而又完善的设计结构，为系统确定整体的框架，进一步对系统各阶段的总体概貌。

3.1系统设计目标

作为一个完整的校园O2O超市系统，主要分为买家部分和卖家部分。买家部分需要让用户浏览商品，对自己喜欢的商品可以查看详细信息，从而根据自己的选择加入购物车，并生成订单；卖家部分则是需要发布商品信息，对商品信息进行及时更新、更新订单信息状态，本系统的主要目的是方便高校学生选购商品。从实际出发，买家部分主要包括用户注册登录、首页浏览、商品分类浏览、商品详情、加入购物车、购物车列表、订单生成、我的订单和订单详情；卖家包括管理员登录、商品管理、订单管理。

1)用户注册登录：为了提高系统的安全性，登录后才能进行购买。未登录的用户只能浏览商品，用户注册时需填写手机号、密码、确认密码，注册完成之后可登录；登录时需填手机号、密码。

2)网站首页：网站首页是用户进入系统后第一个看见的页面，所以页面的整体结构非常重要，首先页面所要呈现的信息量要大，范围要广，让用户一目了然自己所要的商品该怎么操作。其次，首页更重要的是页面的整体要美观、简捷大方，用户体验提高了，这样网站才能吸引更多用户，从而体现了系统的价值。

3)商品展示：首页中第一个模块所展示的是商品的分类，商品可以分为方便零食、奶蛋制品、饮料酒水、生活用品、咖啡冲饮、日用百货、新鲜水果等分类，用户可以根据自己所要商品点击商品分类即可迅速找到自己所要的商品；第二个模块展示的是新品上架的商品，可以让用户了解最近商家展示的新品；第三个模块展示的热销商品，用户一目了然的知道正在热销的商品。

4)购物车：若选择自己较多所要购买的商品时，可先将该商品放入购物车中，在购物车中可展示商品名称、商品数量、商品单价、商品小计及计算出所有商品总价。购物车中用户可以进行自由更改商品数量及删除某一商品等。

5)订单生成：若对自己所要的商品完成后进行下单，确认信息后可提交订单，主要是对用户的收货地址和商品信息进行确认，收货地址可以添加、删除和在现有的选择操作，最终生成订单。这样可以方便卖家对订单的处理，从而能够准确配送。

6)我的订单：用户下完订单可以实时了解订单的情况和本次购买商品的详细信息。用户可以根据交易状态实时追踪订单情况，当用户下单后的首次状态是待发货；当卖家点击发货按钮，表示商品已经发货，此时的状态就会变成待收货，操作按钮也将出现为确认收货；当用户拿到商品时点击确认收货，此时的状态就会变成已完成。表示此次订单结束。

7)订单详情：用户可以对自己所购买的商品的订单进行查看订单详细信息，了解自己购买的商品情况，可以查看每次购买商品订单的收货地址，商品名称，商品单价、数量、小计和总价。

8)前台商品管理：卖家可以对前台展示的商品进行管理，可添加商品操作，也可删除商品操作，卖家每添加一个商品，前台页面中将对应的展示该商品；同时，卖家每删除一个商品，前台页面展示中对应的该商品也将删除。

9)后台订单管理：后台的订单是由前台买家订单提交生成而来的，对订单的状态及时进行实时更新，比如，点击发货，买家那边的订单就可以看见已发货，表示商品已经发货，买家可以及时看见自己所买商品的状态。但是后台不可以对已经生成的订单中的商品进行更改或添加。

3.2 数据库设计

3.2.1 数据库概念结构的设计

设计数据库的基本步骤包括：1、需求分析阶段；2、概念结构设计阶段，关键阶段，建立独立于具体DBMS的概念模型，如E-R方法；3、逻辑结构设计阶段，转成DBMS数据模型；4、数据库物理设计阶段；5、数据库实施阶段；6、数据库运行和维护阶段。

数据库设计是数据库的核心和基础，可以根据用户需求设计数据库。设计数据库时一般采用语言化描述，采用E-R模型图作为描述工具。

1)用户信息实体属性图，主要有用户ID字段、用户名字段，手机号码字段和密码字段，用户信息的实体属性图如下图3-1所示。

图3-1 用户信息实体属性图

2)商品信息实体属性图，主要有商品ID字段、商品名称字段、商品类别字段、商品价格字段、商品库存字段、销量字段、添加时间字段和商品图片字段，商品信息属性图如下图3-2所示。

图3-2 商品信息实体属性图

3)购物车信息实体属性图，主要有商品ID字段，用户ID字段，购物车ID字段和库存字段。购物车信息实体属性图如图3-3所示。

图3-3 购物车信息实体属性图

4)订单信息实体属性图，主要有价格字段、订单添加时间字段、订单ID字段和用户ID字段，订单信息实体属性图如图3-4所示。

图3-4 订单信息实体的属性图

5)地址信息实体属性图，主要有订单ID字段，用户ID字段，用户姓名字段，用户手机号码字段，联系地址字段，地址信息实体属性图如图3-5所示。

图3-5 地址信息实体属性图

6)系统的用户总体E-R图，确定每个实体之间的联系，如图3-6所示。

图3-6 系统用户的总体E-R图3.3 系统页面设计

本系统页面结合多用户正常审美观点，对系统页面进行了整体的设计。考虑到页面布局、页面色彩、页面优化等因素。首先进行了UI设计logo和页面，拥有了本网站独特的logo，然后再用webstrom进行了网页制作。根据页面分为前台页面设计和后台页面设计，具体介绍如下。

3.3.1前台页面设计

前台页面设计主要从注册，登录，首页，商品详情，商品分类，我的购物车，订单生成，我的订单，订单详情这几个方面去设计页面。

1）注册登录页面，注册页面主要有手机号、密码、确认密码；登录页面主要有手机号和密码；这两个页面的背景图片是一样的，方便用户认知。

2）首页，首页是一个系统的门面，所以对它的是设计要更加丰富，首页的内容上方分为两个部分，左边部分是商品的分类，商品分类主要有方便零食、奶蛋制品、饮料酒水、生活用品、咖啡冲饮、日用百货、新鲜水果和其他，右边是系统设计的banner图，分别放了3张banner图，每2000毫秒轮播一次，这体现系统的特色，首页的下方部分主要展示的是新品上架和热销商品，让用户可以清楚知道商家店铺的各种情况，新品上架与热销商品在首页只能展示8个，若想看更多分别点击对应右上方的更多就跳转到商品分类的全部页。在展示商品时商品名称超过了指定的宽度则超过的部分将成为省略号，若要看商品详细名称请进入商品详情页。

3）商品详情页面，商品详情页主要是对商品的详细描述，可以看到本商品的大图，可以知道商品的详细名称、商品的价格、此商品的对应总销量。下面加入购物车按钮，在加入购物车按钮上方有个数量的变更，点击减号商品数量减，点击加号商品数量增加，也可直接输入表单数字，但是不能超过库存。

4）商品分类页面，左边选择商品的各种分类，右边展示分类对应的商品；

5）我的购物车页面，主要是对自己加入购物车的商品进行展示，在此页面中主要是展示商品名称，单价，数量和小计。后边跟着删除按钮可以删除此商品。下方是总价与结算。

6）订单生成页面，主要是展示用户的地址信息和购买商品信息。地址信息主要展示详细地址、收货人姓名、手机号码，右上角还有个新增地址可以添加新地址。下面是付款方式，主要是有货到付款、支付宝和微信支付，最后所购买商品的展示。确认完成之后下面有个提交订单按钮。

7）我的订单页面，展示已经下单的商品的情况。主要有商品名称、单价、数量、小计、交易状态和操作。

8）订单详情页面，展示订单里面商品的情况。主要有商品名称，单价，数量，小计和总价。

3.3.2 后台页面设计

后台页面设计主要从登录，发布商品，商品管理，订单管理这几个方面去设计页面，具体设计如下：

1）登录页，与用户的登录页一致

2）发布商品页，这部分是通过表单展示，主要包括是商品类别选择，商品名称，商品库存，商品价格和商品图片。

3）商品管理页，主要是对发布的商品进行展示，每条商品最后有一个删除，表示本条商品可以删除。

4）订单管理页，展示前台用户已经下的订单。主要有商品名称、单价、数量、小计、交易状态和操作。

3.4 系统功能设计

系统的功能设计包括前台实现和后台实现，这两种模块的实现功能包括：

1)前台（买家）实现的功能包括：

用户注册登录模块，按商品分类、新品上架和热销商品浏览商品模块，商品详情模块，我的购物车模块，订单生成模块，我的订单模块，订单详情模块。

2)后台（卖家）实现的功能包括：

管理员登录模块，发布商品模块，商品管理模块，订单管理模块。

3.3.1 系统总体图

在校园O2O超市系统中，不同用户进入系统的角色不同，操作不同，流程也不同。根据上面的需求分析和可行性分析，校园O2O超市系统主要可分成前台（买家）模块和后台（卖家）模块，前台买家模块主要包括用户注册登录模块、按商品分类、新品上架和热销商品浏览商品模块、商品详情模块、我的购物车模块、我的订单模块、提交订单生成模块和提交订单模块；后台卖家模块包括发布商品模块、商品管理模块、订单管理模块，系统总体模块如图3-7所示。

图3-7 系统总体模块图

3.3.2 前台模块

前台模块图主要是展示用户操作和用户浏览商品两个部分。用户进入校园O2O超市系统后可以浏览商品，但如果想要购买商品，则必须要登录，如果没有登录过本系统需先注册，必须注册为本系统用户后才可登录购买商品。如果没有登录浏览商品的用户称之为游客，无购买权限。用户在此网站可以按商品的分类、新品上架、热销商品等浏览。

图3-8 前台模块图

3.3.3 用户注册和登录流程

用户登录和注册是每个系统不可缺少的。用户一旦注册之后，才可以成为本系统的用户，即可登录到系统进行相关的购买流程操作，如果没有注册，只可以浏览商品无购买商品权限，所以只有注册成为本系统中的用户才有购买权限，其流程图如图3-9、图3-10所示。

图3-9 注册流程图

图3-10 登录流程图

3.3.4 购物流程

用户可将自己所需的商品添加到我的购物车中，并且可以对自己已经加入购物车中的商品进行数量的变更，也可进行某个商品的删除。每个购物网站中购物车至关重要且不可缺少的。如果用户没有登录到本系统，则无法将商品加入到购物车中，只有是本系统中的用户才可添加。用户将商品进入到购物车后，可以进行继续选购，也可进行选择结算生成订单，流程图如图3-11所示。

图3-11 购物车流程图

3.3.5 订单流程

用户对加入购物车的商品结算操作后，需填写订单信息、确认订单后，才能生成订单。确认订单页面包括：收货地址、收货人、手机号、购买商品的商品名称、单价、单个商品的数量、小计和总价。可以看到自己所购买商品的商品信息。收货地址可以添加和删除。收货地址主要包括收货人姓名，收货人详细地址，收货人手机号码，如图3-12所示。

图3-12 订单流程图

3.3.6 后台模块

后台可通过管理员账号登录系统即可，可以对前台商品管理、用户购买商品生成的订单管理、商品发布等操作，管理顾名就是对各模块的数据进行添加、修改和删除。仅有订单管理，是由前台用户购买商品提交订单后生成到后台的，所以只能对订单管理进行修改和删除操作，如图3-13 所示。

图3-13 后台模块图

3.5 本章小结

本章首先描述了系统的设计目标，并对此进行了详细的介绍。通过实体属性图面描述了各功能模块，有通过系统的总E-R图，描述了实体之间的联系，通过数据表以及每张表中的字段和字段类型描述了数据库逻辑结构，其后又对系统各模块功能设计做了详细描述。

第5章系统功能实现

校园O2O超市系统从功能实现上主要分为前台（买家）和后台（卖家），前台实现的功能主要包括用户注册、用户登录、商品分类、商品详情、加入购物车、我的购物车、提交订单、我的订单、订单详情；后台主要是对前台商品发布、商品管理、订单管理；以下详细说明了各个模块的功能实现。

3.1 前台模块

3.1.1用户注册模块

下图页面是用户的注册页面，一般进入系统未注册的成为游客，所以游客只有通过注册页面注册成功之后才能成为本系统的用户，就可进行登录，才可对系统购买商品的流程进行一系列操作。为了验证两次输入密码是否一致，所以对注册页面进行了密码输两次的确认，如图3-1所示。

图3-1 用户注册图

用户注册模块主要是填写用户注册的基本信息，填写包括用户的手机号和密码，当用户注册信息填写成功后，系统将会把刚刚所填写的正确的注册信息保存到数据库对应的表当中。注册时对注册的手机号码进行了限制，判断手机号码格式是否正确，为了有效的管理用户信息和防止恶意的注册。验证表单中手机号码是否为空，以及格式是否正确。

主要代码实现如下：

if(phone==""){ //判断手机号若为空

res=false;

alert("手机号码不能为空");//弹出“手机号码不能为空”

}else{

var pattern=/^1[34578]\d{9}$/; //手机号输入的格式匹配

if(!phone.match(pattern)){//判断手机号格式若错误

res=false;

alert("手机号码格式不正确!");//弹出“手机号码格式不正确”

}

}

3.1.2 用户登录模块

登录模块主要是用户已经注册完之后，登录的信息已经在数据库中了，用户只需填写个人的登录信息与数据库的所填注册的信息的字段对比，若一致则登录成功，否则重新写登录。主要填写的是用户的手机号码和密码，验证这两个是否正确，用户只有成功登录后才能进行浏览商品或者将购买商品等等操作。如图3-2所示，

图3-2 用户登录图

用户登录模块主要是填写的是用户的登录信息，填写包括用户的手机号和密码，用户登录时需要与数据库中的注册信息进行匹配，若一致则登录成功，否则登录失败。验证部分的主要实现代码如下：

public String dologin() throws Exception{

User temuser=userService.getUserByNameOrPhone(user); //用户输入的用户信息

if(temuser.getPassword().equals(user.getPassword())){ //判断密码是否一致

ServletActionContext.getRequest().getSession().setAttribute("user",temuser);//获取temuser对象放入session中

this.json=new ByteArrayInputStream("success".getBytes("UTF-8")); //json的值为success

}else{

this.json=new ByteArrayInputStream("fail".getBytes("UTF-8")); //json的值为fail

}

return"ajaxjson"; //通过ajax返回json的值

}

3.1.3 购物车模块

1）用户购买功能

在校园O2O超市系统中，购买方式与现实生活购买商品的方式很相似，主要是考虑现实用户购买商品的习惯，用现实生活中的“购物车”的方式来模拟，用户只要将所要购买的商品点击加入购物车，则自动会加入购物车当中，符合现实社会用户购买商品的流程与习惯，方便用户操作，无需接受新方式，简洁方便。如图3-3所示。

图 3-3 购物车图

加入购物车商品主要分为两种，一种是原来购物车已经存在的，还有一种原来购物车没有的，若已经存在的直接修改购物车对应的数据库中商品的数量，若没有则需要添加到购物车对应的数据库中。

2）查看购物车

当用户点击完加入购物车后，怎么才能看到自己已经加入购物车中的商品，则可以通过点击系统页面右上角的“我的购物车”，可以查看到用户所加入购物车当中的所有商品，如果用户对所加入的购物车不想买了，可以删除所不需要的商品；如果想改变商品的数量，可以在文本框中输入想要商品数量的个数，也可以点击两边的加号和减号进行更改数量，当商品挑选结束后可以点击“结算”可进行确认订单。如图3-4所示。

图 3-4 加入购物车商品列表图

删除商品功能主要是考虑到用户如果对购物车中的商品不想购买了或者不想在购物车中出现，则单击“删除”，系统会弹出“确定删除”弹框，点击确认就可删除。对商品删除操作，

3.1.4 订单生成模块

当用户点击结算后跳到的订单生成页面，用户需要填写自己的订单信息，方便配送和联系。用户必须选择收货地址，也可以添加收货地址；付款方式可以选择货到付款、微信支付、支付宝支付，当鼠标悬停到微信支付或者支付支付时，对应的微信二维码或者支付宝二维码就会显示在下方供用户扫码，用户可以根据自己的选择，选择相应的支付方式；最下面是所购买的商品信息。如图3-5所示。

图 3-5 订单生成图

如果用户需要添加地址，则点击新增地址出现弹框，弹框中填写用户的地址信息，主要有收件人的地址、收件人姓名、手机号；这些都不能为空，填写时需通过验证。如图3-6所示。

图 3-6 新增收货地址图

3.1.5 我的订单模块

当用户对自己已经下单的商品需要查看时，就可在我的订单中查看，在我的订单中可以查看商品名称、商品单价、数量、小计、交易状态和操作。主要是交易状态和操作，用户可以根据交易状态知道商品的配送情况，交易状态主要分成了待收货、待发货和已完成。当用户下单完之后的状态为待发货；当卖家点击了发货按钮，则买家的状态就变成了待收货；当买家收到商品时则就可点击确认订单按钮，则交易状态就会变成已完成。如图3-7所示。

图 3-7 我的订单图

3.1.6订单详情模块

订单详情主要是为了让用户在对已购买商品的订单中想详细了解，则可点击订单详情，了解所购商品名称、商品数量、商品单价、商品小计和商品总价等商品的详细信息。如图3-8所示。

图 3-8 订单详情图

3.2 后台模块

3.2.1 管理员管理

管理员顾名是管理这个系统的，首先管理员需要登录才能进入后台管理，才能对系统进行管理与维护本网站。本系统只有一个管理员——卖家。管理员通过登录验证，保证了本网站数据的安全和隐私。管理员的信息在用户表里面已经设置好了；管理员控制数据库中的每张表，每张表的字段与管理员的操作是息息相关的，可以对每张表进行增加、删除和修改。由于订单是有前台的用户购买商品是生成的，所以对订单管理不可以进行删除和修改。后台管理员登录如图3-9所示。

图 3-9 管理员登录

3.2.2 前台商品发布

前台商品的展示都是通过后台发布商品才能展示的，通过输入商品的名称、价格、库存和上传商品的图片，后台每添加一个商品则前台就会对应的区域显示该商品。如图3-10所示。

图 3-10 发布商品图

在发布商品时，用户要了解商品首先是看图片，所以后台在上传图片的时候对图片格式进行了限制，防止恶意上传，主要格式有：gif、jpg、png。验证上传图片格式主要实现代码：

3.2.3 商品管理

商品管理主要是对前台商品进行管理，主要是对商品的删除操作，管理网站者可以通过删除已经下架的商品或者库存不足的商品，每删除一个商品，前台页面中就会对应的删除该商品的信息，同步数据中也对应将商品的所有字段信息删除，从而实时更新商品。如图3-11所示。

图 3-11 商品管理图

3.2.4 订单管理

订单主要是对前台用户所购买的商品能够准确及时通知商品的发货情况。主要是对购买商品订单进行操作，比如：前台用户购买了商品，后台管理可以对商品进行发货操作，此时前台用户的订单状态也改变了，表示商品已经发货了，就能很快跟踪商品，方便买家和卖家及时跟踪商品，订单管理图如图所示3-12。

图 3-12 订单管理图

3.3 本章小结

本章主要介绍了校园O2O超市系统前台与后台的所有模块，各个界面的实现功能。主要对前台模块和后台模块分别做了详细的功能实现及核心代码解释，说明了每个模块的功能和作