JavaWeb网站项目开发：Sweets甜品线上门店设计与开发

时间：2023-09-20 20:12:01 | 来源：网站运营

时间：2023-09-20 20:12:01 来源：网站运营

JavaWeb网站项目开发：Sweets甜品线上门店设计与开发：也算是一个比较完整的项目报告了！冲呀！




一、背景意义

如今实体经济受到了互联网经济的巨大冲击，消费者体验诉求逐步提高，传统线下企业积极拓展线上模式，零售行业的积极变革和创新能力激发了行业新的活力。因此本项目选择为线下中小店铺设计网上门店，这一模式不但可以拓宽销售渠道，满足用户对产品的加购、意见反馈等需求，还可以将线上的用户吸引到线下进行消费，为线下实体渠道带来更多的用户，也让用户享受到更多的实惠。同时为企业积攒用户数据，对之后的用户画像分析、营销方案设计等分析与决策提供数据支持。使销售过程实现智能化控制和管理，以提高效率、降低成本。




二、项目目标

Sweets甜品店线上门店系统致力于实现前台用户购物系统和后台企业管理系统两部分系统。在前台系统中实现用户注册、登录、信息浏览、产品搜索、购物车增删改、订单提交、反馈提交等功能，满足顾客网上浏览购物的基本需求。在后台系统中为不同级别或部门管理员提供不同的管理页面，实现对用户、商品、员工、反馈等信息增删改查等日常管理操作，以满足门店智能管理的需要。




三、技术工具

本项目使用Java语言开发、Eclipse编码、使用Linux系统虚拟机CentOS上的MySql数据库存储数据，以JavaWeb三层架构思想为基础，同时运用数据库连接池c3p0技术、JSTL标准标签库、Ajax、Jquery等技术以实现项目目标。并采用Chrome浏览器进行测试。




四、项目周期

20xx年x月x日 确定项目方向

20xx年x月x日 - 20xx年x月x日 构建网站、完成页面总体设计

20xx年x月x日 - 20xx年x月x日 搭建三层架构

20xx年x月x日 - 20xx年x月x日 实现具体功能

20xx年x月x日 - 2019年x月x日 修改完善细节

20xx年x月x日 - x月x日 撰写报告

20xx年x月x日 回顾总结、完善细节

20xx年x月x日 答辩

五、项目设计

（一）功能模块设计

1.前台功能列表

图1 前台功能列表




2.后台功能列表

图2 后台功能列表

（二）网站结构设计

本项目基于由数据访问层、业务逻辑层、表示层组成的三层结构模式搭建，具体如下图3所示：

图3 JavaWeb三层架构模型




1. Sweets甜品线上门店平台前台系统使用三层结构：

表示层：包括HTML、JSP、CSS。

业务逻辑层：使用Servlet、Service接口和实现类。主要包括：InitServlet、UserServlet、ProductServlet、CartServlet、UserService、ProductService、CartService及其实现类。

数据访问层：使用Dao接口及其实现类。主要包括：UserDao、ProductDao、CartDao及其实现类。

图4程序结构




2. Sweets甜品线上门店平台后台系统使用三层结构：

表示层：包括JSP、CSS。

业务逻辑层：使用Servlet、Service接口和实现类。主要包括：AdminServlet、FunctionServlet和UserService、ProductService、AdminService、RoleService、MenuService及其实现类。

数据访问层：使用Dao接口及其实现类。主要包括：UserDao、ProductDao、AdminDao、RoleDao、MenuDao及其实现类。

（三）数据库设计

本网站使用CentOS虚拟机上的MySql数据库进行数据管理，使用有自动回收空闲连接功能的c3p0数据库连接池技术实现于数据库的连接，配置信息见config源文件夹下c3p0-config.xml文件。Sweet数据库包括12个基本表，相关的表使用外键连接，结构图如下图5所示。

图5 MySql表设计




六、项目实施

（一）前台系统

1. 首页index.jsp

前台项目首页（见图6）顶部左侧通过choose语句实现未登录时显示“Welcome Back!”欢迎语和Sign In链接，登陆后显示“Welcome xxx(当前用户名)!”欢迎语和Sign Out链接，如下图7显示，代码见图8。除此之外还有注册页Register链接和搜素页Search链接，中部项目名和右侧第三方账号连接。并通过下方轮播图展示相关信息。

图6 首页

图7 顶部链接是否登录的显示区别

图8 根据是否登录显示不同的链接

前台通过从数据库调取全部商品信息，显示在如下图9显示的轮播图中，全部16件商品循环展示，可向左或向右点击更换。

图9 全部商品轮播图

除了显示全部商品之外，还从数据库中根据不同属性值（如isnew属性、discount属性等）选取特定商品并显示了最热商品、最新商品、无糖商品、打折商品等特殊分类产品。通过点击上方类型标签分类显示如图10，代码如图11所示。

图10 特殊类型商品展示




图11 获得不同分类商品

页面最下方页脚处（见图12），用户可以点击About Us的Read More按钮跳转留言页。也可以在Subscribe for hot updates中提交邮箱以获取最新商品信息和优惠券。但此文本框会判断邮箱是否在数据库中已经存在，已提交的用户不可获得二次优惠，显示“您已获得优惠”信息，若为第一次提交成功显示“提交成功”信息。

图12 提交邮箱

除此之外，前台主页还包括企业历史信息、企业日志记录、图片展示、顾客反馈轮播图等模块。




2. 企业信息页about.jsp

企业信息页（见图13）主要显示企业介绍、员工介绍等基本信息，方便用户了解企业文化及管理信息。

图13 企业历史信息

3. 登录页login.jsp

登录页如下图14所示，其输入为：用户名、密码、验证码。其中4位验证码通过项目com.ali.business.utils包中CaptchaImgUtils.java文件随机生成，且具有两条干扰线。同时，点击验证码图片再次调用此方法生成新的验证码，实现点击更换验证码的功能（见图15）。

输入后进行信息检验：

1.用户名检查：在login.js中利用Ajax（见图16）实现判断用户是否存在，若存在显示“用户名存在”信息，若不存显示“用户名不存在”信息无法登录。

2.账号权限检查：判断用户账号是否被冻结，若会员等级sid为0则为冻结不可登录。

3.验证码：验证码生成、点击更换并判断验证码输入结果是否正确。

4.非空检验：login.js中checkEmpty()函数实现验证所有输入框不得为空。

5.密码验证：若如上均正确点击提交，判断密码是否正确，不正确不可登录。

登录页输出：若登陆成功跳转主页，若登陆失败显示“登陆失败”信息。

图14 登录页

图15 点击更换验证码

图16 用户验证

4. 注册页register.jsp

注册页如下图17所示，其输入为：用户名、邮箱、密码、密码确认、联系电话、小区地址。其中校区地址通过regist.js中showVillage()函数（见图18）实现从数据库内获取小区信息，并通过下拉列表显示。

输入后进行信息检验：

1.用户名检查：在regist.js中利用Ajax实现判断用户是否存在，若存在无法注册。

2.密码确认：两次密码输入一致显示“密码确认成功”信息，不一致显示“两次密码不一致”信息，则无法登录。

3.非空校验：在regist.js文件中的checkEmpty()函数实现验证所有输入框不得为空。

4.数据格式前台检验：regist.js中checkData()函数（见图19）中两个正则表达式实现验证“用户名长度必须2-14位，字母开头、可包含数字或_”及邮箱格式检验。

注册页输出：点击提交时，若以上条件均符合则为注册成功跳转登录页，若失败在按钮旁显示“注册失败”信息。

图17 注册页




图18 获取小区列表

图19 数据格式校验

5. 菜单页menu.jsp

菜单页如下图20所示，显示产品列表并实现分页。在com.ali.business.utils包中Common.java文件设置每页显示6条数据，每次只从数据库中取相应条数据显示，而非取出全部数据再进行分页显示。并且可以通过点击第一页、前一页、下一页（见图21）、最后一页四个按钮实现分页跳转。可以点击每条信息后方的“加入购物车”按钮，若用户未登录不可加购，使其跳转登录页登录，若用户已登录则加入一件对应的商品进入购物车，并跳转至购物车cart.jsp页面。

图20 商品列表




图21 下一页按钮

在前台menu.jsp页面右侧如下图22所示Search区域，实现通过获取文本框中输入的名称，利用SQL语句中LIKE语句（见图23）实现通过商品名模糊查询相似商品信息的功能，并分页显示于网页左下方原全部商品分页显示位置，同样为6条每页且可翻页。

图22 搜索功能

图23 LIKE搜索

6. 商品详细信息页product.jsp

点击商品目录指定产品信息可以调换到商品详细信息页（见图24）。商品详细页根据传入的商品ID显示对应商品的图片、名称、分类、价格、库存信息。并通过不可更改的文本框，点击加号或减号按钮实现架构数量的增减，变化范围为1至库存商品数量。

点击“Add in cart”按钮，若登录则加入对应的产品和数量到购物车或更改相应的数量和金额（见图25），并跳转至购物车cart.jsp页面，若未登录跳转至登陆页面先进行登录。

图24 商品详细信息页

图25 加入购物车

7. 购物车页cart.jsp

每次用户登录，从数据库中调取用户购物车信息，显示在如下图26所示的cart.jsp页面中，若为新用户其购物车为空。通过在如上商品列表页menu.jsp或商品详细页product.jsp添加商品到此页，cart.jsp中显示购物车内容，并计算商品金额。点击“删除”按钮实现对应产品架构记录的删除；点击“清空购物车”清空该用户的所有加购项；点击“提交订单”实现清空购物车并增加对应金额的积分，实现对数据库相关信息的增删改查操作（见图27）。

图26 购物车页

图27 购物车页操作

8. 留言页single.jsp

如下图28所示，留言页不连接数据库，只实现用户提交留言信息，显示在上方空白用户头像位置，代码见图29。

图28 网页留言

图29 留言

9. 联系页contact.jsp

如下图30所示，在前台contact.jsp页面利用iframe标签调取百度地图网页显示定位的门店信息，代码见图31。地图可以放大或缩小，并点击选取，与地图网站操作相同。

图30 地图




图31 获取地图

下方图32位置显示门店地址、邮件、电话等联系方式。

图32 信息

之后为用户反馈页面如下图33所示，无论用户是否登录或是否为会员均可对商品和服务进行评价。对于产品和服务采取下拉列表框评分机制，同时可在右侧提出意见或建议，可供企业进行对应的数据分析。可多次进行评价，将评价结构收集到数据库对应的feedback表中。

图33 用户反馈

（二）后台系统

1. 登录页/首页

门店后台以管理员登录页为主页，如下图34所示，只有登陆后才可显示菜单。管理页面根据管理员角色不同显示不同的管理菜单（如下图35所示，代码见图36）：

（1）对于门店店主/超级管理员

用户名：aa 密码：111

可实现所有的功能操作。在后台页面显示用户管理、库存管理、人力管理、反馈管理、管理员管理菜单，包括用户增加、会员管理、商品增加、商品查改、员工管理、角色/菜单增加、反馈查看、管理员添加页面。

（2）对于门店销售人员

用户名：bb 密码：222

在后台页面显示库存管理菜单，包括商品增加、商品查改页面。

（3）对于门店人力部

用户名：cc 密码：333

在后台页面显示人力管理菜单，包括员工管理、角色/菜单增加页面。

（4）对于门店客服人员

用户名：dd 密码：444

在后台页面显示用户管理、反馈管理菜单，包括用户增加、会员管理、反馈查看页面。

其信息验证部分与前台相同，在此不再赘述。

图34 登录页

图35 不同用户导航栏对比

图36 不同用户导航栏显示不同菜单

2. 用户管理：

2.1用户增加

如下图37所示增加用户，填写相关信息，信息检验与注册页相同。若成功显示“添加成功”信息，否则显示“添加失败”信息。

图37 用户添加

2.2用户管理

如下图38所示用户管理页面显示数据库中所有用户的信息。

图38 用户管理

2.2.1会员等级修改/冻结

点击上图修改按钮可以更改用户等级或对违规用户进行冻结。如下图39所示，传入对应用户的ID值，若设置state属性为-1（对应sid属性为0）则该用户被冻结，再次登录时显示如下图40所示“用户被冻结”信息。若state属性为1，0.95，0.9，0.85，0.8(对应sid属性分别为1，2，3，4，5)，则与用户结算时计算相应的折扣值。

图39 用户冻结/更改等级

图40 冻结用户登录

2.2.2用户删除

点击如上图38“删除”按钮，传递用户ID删除相应的用户信息，并跳转回当前页面。

3. 库存管理：

3.1库存增加

在如下图41所示页面添加商品。判断商品名是否存在，存在则显示“该商品已存在，请转到修改页”信息，此时无法增加该商品；若商品名不存在显示“该商品为新商品”信息。且信息不得为空。

图41 商品添加

3.2库存管理

库存管理界面如下图42所示，可以查看库存商品的全部信息，包括编号、名称、价格、库存、折扣等。

图42 商品管理

3.2.1信息修改

点击上图所示画面每件商品对应的修改按钮时，跳转到如下图43所示的商品信息修改页面。通过传递的商品ID获得全部商品信息并显示在表格中，其中对于下拉列表和单选按钮利用Jquery获取并设置，以是否折扣和是否含糖属性为例，代码见图44。对需要更改的项进行更改并提交，成功则显示“修改成功”信息，否则显示“修改失败”信息。

图43 商品修改




图44 显示商品信息

3.2.2库存商品删除

点击图42中“删除”按钮，在数据库中删除对应产品编号的商品信息，并跳转到库存管理页面。

4. 人力管理：

4.1角色增加

在如下图45中添加角色，判断角色是否存在，如果存在显示“该角色已存在”，否则显示“该角色为新角色”，点击“Add”按钮加入数据库。

图45 角色添加

4.2菜单增加

在如下图46中添加菜单，判断菜单是否存在，如果存在显示“该菜单已存在”，否则显示“该菜单为新菜单”，点击“Add”按钮加入数据库。

图46 菜单添加

4.3员工信息删除

通过如下图47所示页面查看管理员信息，包括该管理员的角色和角色所包含的菜单信息。点击后方“删除”按钮，删除该员工及其所有信息，代码见图48。

图47 员工管理

图48 员工信息删除

5. 反馈管理：

通过如下图49所示页面显示用户反馈信息，包含用户名、商品评分、服务评分和评价信息等内容，不可修改。

图49 反馈管理

6. 管理员管理：

只有超级用户/店主才可以获得此功能的菜单，可以添加普通管理员，而普通管理员无此权限。在如下图50所示界面添加新管理员，并设置其密码、工资，并通过多选设置其用户角色，代码见图51。

图50 管理员添加

图51 管理员添加代码

七、项目测试

1.进行黑盒测试

黑盒测试也称功能测试或数据驱动测试，它是在已知产品所应具有的功能，通过测试来检测每个功能是否都能正常使用。在不考虑程序内部结构和内部特性的情况下，进行测试。此项目程序通过了黑盒测试。

2.进行白盒测试：

白盒测试也称结构测试或逻辑驱动测试，它是知道产品内部工作过程，可通过测试来检测产品内部动作是否按照规格说明书的规定正常进行，按照程序内部的结构测试程序，检验程序中的每条通路是否都有能按预定要求正确工作。此项目程序通过了白盒测试。

八、总结

本项目实现了用户登陆、注册、商品展示、商品分页，多用户的商品购物车以及后台用户角色权限管理等功能。并为项目中设计了数据库和三层架构。实习期间加深了对以前学习过的JavaWeb、JQuery、Ajax、EL和JSTL等知识点的理解和应用，积累了项目开发经验、提高了实践能力。