基于Spring Boot和Vue的甜点购物商城

一、绪论

1.1 开发背景

随着互联网的发展，各个行业都在进行着信息化变革，电商行业的飞速发展，数据的处理已经不适用于依靠传统人力方式来管理，蛋糕行业也不例外。通过对云端蛋糕商城的设计可以快捷的对商品进行添加、删除、修改以及查询，用户可以根据自己的查询结果，选择自 己想要购买的蛋糕进行添加购物车、购买支付、确认订单以及确认收货等一系列功能。一方面提高了用户的适用体验，另一方面方便了商家的信息化管理，从而提高了盈利。 近年来，在这个快速发 展的互联经济的时代，提高了开发人员的工作效率，及时的开发出具 有良好的时效性的优秀的软件，本系统采用 Sporing Boot+Vue 技术设计实现出云端蛋糕商城。
纵观当今时代，科技不断进步，经济不断增长。一方面，科技的飞速发展将全世界 带入信息时代，计算机互联网将人们之间的联系变得更加密切，如今伴随着 5G 的出现， 人们的生活方式将发生巨大的改变，但同时也对人们的信息安全和便利提出更大、更为 严苛的要求，计算机技术也将迎来更大的挑战。另一方面，经济的不断增长也在逐渐改 变人们的消费方式。自“互联网+”诞生以来，各行各业通过和互联网结合，使得行业迅 速发展，促进了经济快速增长。其中最为耀眼的当属商业经济活 动与互联网技术的结合， 产生了一种全新的、基于计算机技术的新型商业经济模式-电子商务。经过不断的发展， 如今电子商务已经融入到人们的日常生活，在促进经济发展过程中扮演者尤为重要的角色。
然而凡事有利皆有弊，电子商务在不断发展的过程中，虽促进了经济的快速发展， 也为广大消费者提供了便利，但也出现了许多问题 。
消费者在使用电子商城购买蛋糕甜点时，电子商城平台的商品推荐功能大都不够 精确，只能进行简单的筛选，对同类商品无法判断其质量优劣，对消费者可能感兴趣的 商品无法准确推荐，致使消费者不仅无法在大量的商品信息中找到优质的同类商品以及可能感兴趣的商品信息，而且这些较差的商品信息对消费者产生了消费干扰，不仅没有 购买到自己想要的优质商品，还购买了许多质量较差的商品。
因此，基于以上问题，本文设计并实现了一种电子商城购物平台，采用 Spring Boot与Vue框架以及Java语言进行系统搭建，有效的提高了商品推荐的准确率、商品质量以及交易数量。

二、需求分析

2.1 CakeStore可视化购物商城的简介

2.1.1 商店的类型

该CakeStore甜点商城是一个类似于淘宝购物商城的网页商店，用户可以在网上购买各种蛋糕等商品，并查看相应的订单。管理员可以对用户信息、订单进行修改，更新热销商品和最新商品，用户最后可以通过支付宝或微信方式对购物车中的商品进行支付。

2.1.2 蛋糕商城的简介

用户可以通过登录网址进入商城首页，在商城中浏览所有商品。商城提供多个商品分类，例如冰激凌系列、零食系列、法式系列等，用户可以根据自己喜欢的商品类型进行浏览。此外，用户还可以通过商品名称进行搜索，系统会自动匹配到对应的蛋糕甜点。
如果用户要购买商品，需要进行账号登录。如果没有账号，可以进行账号注册。登录后，用户可以将所需商品添加到购物车，并最终通过支付宝或微信等方式进行购买。例如，用户可以使用沙箱支付宝进行商品购买。用户还可以随时查看自己的订单，并有可能取消订单。
另外，用户还可以查看商城中销售量前七的商品信息，以了解当前热销商品的情况。管理员负责管理用户信息和订单，可以对其进行修改。管理员还负责更新热销商品和最新商品，以确保商城中的商品信息始终保持最新。
综上所述，该CakeStore甜点商城为用户提供了方便的在线购物体验，并通过支付宝或微信等支付方式使购物流程更加便捷。管理员负责管理商城的运营和商品信息，以提供良好的用户服务。

2.1.3 CakeStore购物商城的特点

（1）用户在登录商品中需要输入用户名和密码，并且还需要进行邮箱验证的检验，如果验证码输入不正确，用户则需要重新输入，直接所有数据均输入正确为止。
（2）用户可以在蛋糕在线商城中进行商品的浏览，并且我们将商品进行分类，用户能够通过类型查找具体的商品，也可以通过查询商品的名称进行模糊匹配。
（3）用户登录信息后能够查看自己的个人信息，并对收货信息和用户信息进行修改，然后通过点击修改按钮将个人信息进行保留
（4）用户可以查看自己的所有订单，并且可以通过分页的形式进行展示，方便用户可以很好的观看
（5）用户可以在经过一系列的流程进行订单支付这一环节，并且最后用户能通过微信或者支付宝的形式进行支付，能够对商品进行购买，完成订单这个最为重要的环节
（6）用户还可以在商城中查看近期来商品销售量中前七名的商品，商品采用e-charts技术，通过柱状图的形式进行展示，简单易懂，完美地符合用户的视觉审美。
（7）用户能够通过可视化的界面查看商家的地理位置，以及商家所处位置的天气气候，并且可以通过日历查看商家营业时长。
（8）蛋糕线上商城提供管理员的界面，在登录界面中可以登录后台管理员账号，对商城的商品展示信息进行修改，或者是对用户的信息，用户订单信息进行更新，最后还可以添加一些新的商品类目等一系列操作。

2.2 需求分析

2.2.1 商城购物数据流图

（1）游客登录商城数据流图
用户能够先以游客的方式进入商城进行浏览，查看各种商品信息，如热销商品，最新商品，今日精选推送等信息，此时用户并不能对喜爱的商品进行支付。用户需要进行登录后才可以购买商品，将商品添加至购物车，然后通过支付宝或者微信的方式进行支付，从而完成购物车中商品的支付。
用户在登录商城后，除了可以浏览商城信息外，还可以对自己喜爱的商品进行购买，用户可以通过点击商品的图片，查看此商品的详细描述信息[5]。
此外，用户还可以通过点击‘加入购物车’的按钮，将商品加入到自己账号的购物车中，然后在购物车中可以点击‘进行支付按钮’，将跳转到信息确认界面，其中包括商品寄送地址等信息，并且提供了微信支付和支付宝支付的两种方式，用户可以选择其中一种进行支付，完成订单支付功能。
管理员在登录商城后，可以通过点击后台管理按钮，进入后来管理界面，包括查看所有订单，客户信息管理模块，商品管理和类目管理模块，通过点击订单模块，可以对用户的未付款订单，已付款订单等进行查看和修改[6]。然后，可以点击客户信息按钮，可以对用户的密码进行修改，也可以对用户进行删除。然后可以更改商品信息，如将一些商品加入条幅，热销和新品中。最后，管理员可以在类目界面中更新商品的类目信息。

2.2.2 前端界面需求

为了满足用户能够在网上支持线上的Cake蛋糕甜点购物，并且以简洁优美的界面减少用户的视觉疲劳的效果，我们的项目使用了清晰优美的界面设置，实现类似于淘宝商城的Cake商店，用户可以轻松地在该商城中进行购物选择，查看订单以及完成支付等操作。
（1）用户的登录与注册
用户可以通过登录进入商城，在登录界面需要填写用户的账号以及密码，更为重要地是用户需要填写自己的QQ邮箱，此商城能够向用户邮箱发送验证码，用户需填写正确的验证码才可以进行登录，如用户不存在，可以通过点击注册按钮，进入商城的账号注册界面，并填写一些个人信息，如果用户名存在，则需要更换用户名，重新填写用户信息，。
当然用户可以在未进行登录的情况下在商城浏览商品，但是不能进行提交订单，支付环节等一系列操作。只有在用户登录之后，才可以进行这些操作。
（2）用户个人信息：
用户在商城进行登录之后，可以查看个人信息，此界面并添加了彩色的背景图，以及动态点击效果，通过引入Bootstrap提供的API，用户点击可以出现各种图案，增加了界面的趣味性以及互动性。用户可以在此界面查看用户名，密码，地址等一系列信息。用户也可以在此界面进行信息的修改，然后点击修改按钮进行用户信息的更新[7]。
（3）用户购物车界面
此界面添加了动态点击效果，用户能够在此界面查看目前购物车中的所有商品，并且用户能够对购物车中的各种商品的数量添加或者减少，此界面也添加了界面分页的效果，每页存有用户由近到远的订单记录，用户能够点击页首，页尾，每一页能够跳转到相应页的详细订单信息。
（4）商品展示界面
用户打开网页后即可看到商城的主页面，该页面主要由三个部分组成，分别是今日推荐商品，热销商品，最新商品三个部分[8]。用户可以查看商家目前提供的商品类型，为用户提供商品购买的意见。并且用户能够立刻查看目前购物车中商品的总数量，然后点击支付按钮，跳转到支付界面，此页通过分页的形式展示，当商品的数量够多时，用户能够通过店家分页按钮查看不同页面的商品。
（5）商家location界面
此界面通过引用百度地图等多个API插件，用户能够通过此界面能够了解商家的具体位置，然后此界面也带有日历，天气功能，用户能够查看商家当前所在地天气情况，并且通过日历查看商家的营业时长，更具自己情况对购物车中的商品选择线下自取或者是外卖派送方式获得。这些功能的提供，能够为用户对商城的信息有进一步的了解。
（6）hot热销界面
该界面采用柱状图来展示此商城最近商品的销售量排名，用户可以通过此界面了解前7的蛋糕甜点销售量，为用户提供一些客观的参考意见，能够借助大众的评价选择适宜的商品，并且此界面简洁，通俗易懂，还可以减少用户的视觉疲劳，提高界面的可观赏性。
（7）后台用户订单展示界面
该界面可以展示所有用户购买的所有订单，并且能够修改订单的状态。例如，可以根据商品是否发放决定用户订单是否修改成发货状态，若完成发货，用户也收到商品，则可以将订单的转态能够修改成完成。并且管理员可以点击点击配送中按钮，已完成按钮等进行跳转到相应的商品展示页面。
（8）客户管理界面
管理员在进行登录后，可以点击客户管理按钮，查看目前商城中所有的客户，并且可以通过点击修改按钮对客户的信息进行修改，通过删除按钮将此客户在商城系统中进行删除，通过重置按钮对用户的密码进行重置，用户可以重新设置自己的密码。
（9）商品管理界面
该界面能够展示商城中的所有销售的商品，并且对所有的商品有了详细的介绍，管理员可以通过修改的按钮对商品的信息进行修改，还可以将商品加入条幅，新品，热销模块，在这些模块中的商品，能够在主界面进行展示。管理员可以点击这些按钮进入相应的页面，并从中移出相应的商品。更为重要的事，管理员能够在此界面加入一些新品商品，通过上传图片，以及相应的商品描述信息，即可将商城中的商品进行更新。用户则可以在主界面对新品商品进行购买。
（10）类目管理界面
该界面展示商城中提供给用户的所有商品类型，用户在主页面可以根据这些提供的商品类目查看各种种类下的商品。而管理员可以在后台对商品的类目进行修改，删除，以及通过点击添加按钮对商品的类目进行增加，从而扩充商品的销售类型。

2.2.3用户权限控制功能需求

（1）游客：
用户可以以游客身份登录商城系统，但只能进行商品浏览和将喜欢的商品加入购物车的操作。游客无法进行支付订单、查看订单等操作。如果游客点击支付按钮，系统将提示用户先进行登录，并自动跳转到登录注册界面。用户只有在完成登录后才能执行支付订单的操作。
（2）客户：
游客：用户可以以游客身份登录商城系统，但只能进行商品浏览和将喜欢的商品加入购物车的操作。游客无法进行支付订单、查看订单等操作。如果游客点击支付按钮，系统将提示用户先进行登录，并自动跳转到登录注册界面。用户只有在完成登录后才能执行支付订单的操作。
（3）后台管理员：
后台管理员负责用户账号的管理。当用户注册后，其信息将及时添加到数据库中；用户注销时，相应的信息将从数据库中删除。此外，后台管理员还可以对商品信息进行管理。例如，修改用户订单、添加新的商品信息、修改用户信息、修改商品类别等。
（4）CakeStore在线商城的设计者：
CakeStore在线商城的设计者：商城的设计者可以根据大众的审美趋势对商城界面进行修改。及时更新商城的主题，并对商城进行维护和更新，以确保商城的正常运行。

2.2.4用户操作错误提示需求

（1）用户登录出错：
当用户登录时，如果用户名或密码错误，系统将在用户输入后显示用户名或密码错误的提示信息。如果用户使用QQ邮箱登录并输入验证码后与邮箱收到的验证码不匹配，系统会在后端对用户填写的验证码和提供的验证码进行校验。如果验证码错误，系统将向用户提示验证码错误的消息。
（2）用户注册出错：
用户在注册时，如果填写的用户信息已存在，系统将在填写完信息后，在登录注册界面向用户显示用户已存在的提示信息。如果用户输入的邮箱格式不正确，系统将提示用户邮箱格式不正确，需要用户重新输入邮箱。用户需要重新填写正确的注册信息。

三、程序设计

3.1 总体设计

CakeStore在线购物商城总体可分为十三大核心模块，分别是对数据库的模块设计，登录模块，注册模块，用户个人信息模块，购物车模块，热销模块，商品location模块，商品展示模块，后台订单管理模块，客户管理模块，商品管理模块，类目管理模和支付模块。

3.2 登录注册模块

实现用户登注册页面，用户填写包括用户名密码的基本信息之后，将用户信息存储到数据库。用户尝试对系统进行操作前，判断用户是否登录，如果没有就跳转到登录页面让用户输入用户名密码。用户输入正确的用户名密码之后，验明用户身份并进入系统。使用邮箱对用户的身份进行验证。用户在登录页时，除了要用户输入用户名和密码以外，还需要用户输入其邮箱验证码。用户提交注册表单后，系统验证其输入的是否合法，并向这个邮箱发一封注册验证邮件，其内包含一个随机生成的验证码，用户输入验证码后，完成登录注册。

3.3 商城报表模块设计

在该模块中，商城报表设计涵盖了用户查看商城物理位置、天气预报和商家营业时长等功能，以提供用户更多选择和方便。在商城报表模块中，用户可以通过查看商城的具体物理位置来了解商城所在地的详细地址。这个功能对于用户来说非常重要，尤其是对新用户或者希望亲自到商城购物的用户来说，提供了准确的导航信息，帮助他们快速找到商城的位置。另外，商城报表模块还提供天气预报功能，用户可以通过天气预报查看当地的气候情况。这项功能对用户来说非常实用，特别是在决定是否线下自取或者选择门店服务的时候。用户可以根据天气情况合理安排购物行程，避免不必要的出行。商家的营业时长也是商城报表模块的一部分。通过日历，用户可以查看商家的营业时间，包括每天的开店和闭店时间。这对于用户来说非常便利，可以根据商家的营业时长来规划购物时间，避免白跑一趟。
综上所述，商城报表模块的设计使用户可以通过了解商城的具体物理位置、当地天气情况和商家营业时长等因素，更好地做出购物决策。这样的设计为用户提供了更多选择的便利，使他们能够更好地享受商城的服务。

3.4 商品展示模块设计

商品展示模块设计为用户提供了浏览商店热销商品、最新商品和今日推荐商品的功能。通过这个模块，用户可以根据自己的需求轻松地查看各个商品，并深入了解每个商品的详细信息。此外，用户还可以将感兴趣的商品加入购物车，方便后续购买。为了提升用户体验，商品展示模块采用了element来设计前端界面。element作为一款流行的前端框架，提供了丰富的组件和样式，使得界面更加美观、易于操作。在商品展示模块中，每个商品都配有附加的图片，以突出商品的特点和吸引用户的注意力。同时，通过添加动态效果，如图片轮播、商品介绍的展开收起等，增加了模块的趣味性和交互性。
用户可以通过在商品展示模块中点击具体的商品，进一步查看该商品的详细信息。详细信息包括商品的描述、价格、规格、评论等内容，让用户更全面地了解商品的特点和性能。用户可以根据自己的需求和偏好，从多个商品中进行选择和比较，以便做出最佳购买决策。
在商品展示模块中，购物车功能也是一个重要的组成部分。用户可以将感兴趣的商品加入购物车，方便统一管理和结算。购物车可以显示已选商品的数量和总价，用户可以随时查看和修改购物车中的商品内容。
综上所述，商品展示模块设计为用户提供了便捷的商品浏览、详细信息查看和购物车管理功能。通过element前端框架、附加图片和动态效果的运用，使得模块更加美观、趣味，并提升用户的交互体验。这样的设计旨在满足用户对商品信息了解和选择的需求，促进用户进行购物和消费。

3.5 热销模块的设计

热销模块设计旨在向用户展示商城中当前最畅销的商品。该模块通过一个专门的页面，将热销商品集中呈现给用户。用户可以浏览该页面上展示的热销商品，并通过点击具体商品进一步了解商品的详细信息。
为了使界面简洁明了，热销模块采用elem-li标签来展示商品的部分信息。elem-li标签是element框架中的一个组件，可以将商品信息以标签的形式展示在页面上。这种设计方式既节省空间，又使得用户可以快速浏览多个商品，了解其基本特点。
在热销模块中，每个商品都配备了加入购物车按钮。用户可以通过点击该按钮，将感兴趣的商品添加到自己的购物车中。这样，用户无需离开当前页面就能方便地管理自己的购物清单，并且可以随时查看购物车中已添加的商品数量和总价。
通过热销模块，用户可以迅速了解当前最受欢迎的商品，避免错过热门款式或限时优惠。这对于追求潮流和敏锐消费者来说非常重要。同时，通过提供商品详细信息和快速加入购物车的功能，热销模块也为用户提供了便捷的购物体验。
综上所述，热销模块的设计旨在向用户展示商城中最畅销的商品，并通过elem-li标签展示商品信息和加入购物车按钮，使用户可以快速浏览、了解和购买热销商品。这样的设计满足用户对时下热门商品的需求，提升用户购物的便利性和体验感。

3.6 数据库模块的设计

数据库模块的设计对于蛋糕商店的顺利运营非常关键。通过合理的表关系和数据存储方式，可以有效地管理各类信息，包括商品(goods)、用户个人信息(profile)、商品类型(type)和订单等。
首先，我们可以设计一个名为"goods"的表来存储蛋糕商品的信息。该表可以包含商品的唯一标识符(goods_id)、商品名称(name)、描述(description)、价格(price)、库存(stock)等字段。每个商品都被赋予一个唯一的goods_id，以保证数据的完整性和准确性，并且可以方便地进行商品查询和管理。
其次，我们可以设计一个名为"profile"的表来存储用户个人信息。该表可以包含用户的唯一标识符(user_id)、用户名(username)、密码(password)、联系方式(contact)等字段。通过user_id作为主键，可以实现对用户信息的精确查询和修改，同时保证数据的唯一性和一致性。
另外，我们可以设计一个名为"type"的表来存储蛋糕商品的类型信息。该表可以包含类型的唯一标识符(type_id)、类型名称(type_name)等字段。每个商品可以被分类到不同的类型，通过type_id作为外键与goods表关联，实现商品类型与商品信息的关联查询，方便用户根据类型浏览和筛选商品[9]。
最后，为了记录用户的购买行为，我们可以设计一个名为"order"的表来存储订单信息。该表可以包含订单的唯一标识符(order_id)、用户标识符(user_id)、商品标识符(goods_id)、购买数量(quantity)、订单状态(status)等字段。通过order_id作为主键，可以轻松地跟踪和管理每个订单的详细信息，包括订单的状态跟踪和物流信息等。
通过以上设计，数据库模块能够有效地存储和管理蛋糕商店的各类信息。合理的表关系和外键设置使得商品信息、用户个人信息、类型信息和订单信息能够相互关联，方便系统展示蛋糕商店的内容，并支持商城运营的逻辑。良好的数据库设计可以提高系统的性能和效率，保障用户体验和数据安全，为蛋糕商店的成功运营提供坚实的基础。

四、程序实现

五、源码获取

大家点赞、收藏、关注、评论啦 ，私信获取联系方式