【原创精品】通用购物商城，在线购物网站，基于SpringBoot3+Vue3，完全手把手带敲，详细教学从0带做

• 哈喽大家好，欢迎来到java小白专属教程系列视频。
• 本期我们带来的是一个小米商城的项目展示。
• 让我们一起探索这个项目的功能点和用户体验。
• 包括商品详情页、购物流程、用户登录与评价等。
• 最后我们会简单提到算法推荐功能。

哈喽大家好
这里是程序阿水
欢迎来到java小白专属教程系列视频。

额，这期话给大家带来的是一个小米商城这样一个项目啊。
呃首先话我们还是正常看下我们这整个项目的一个功能点啊。

呃现在的话我带大家看的是一个商品的一个详情页。
比如说我们鼠标放上来的话，啊，看是会有一个这个呃局部放大这样一个效果对吧。
可以对商品图进行一个局部放大啊。

呃左侧部分的话我们可以看到
其实是有几个这个额外的一些商品图。
我们可以点击鼠标左键点击啊，可以切换这个商品图对吧。
那我们切换完以后可以可以正常的啊
还可以正常的去进行一个这个哎商品的一个放大一个展示对吧。

好，这个就是我们平常这个哎商城项目当中
一般会或商城系统当中一般会遇到的一个呃会碰到的一个功能点啊。
好那么我们这边的话，嗯，比如说这个唉这个商品是这个这个店铺卖的是吧。
我们还可以进入到这个店铺里面啊，啊这个，然后我们就可以看到这个店铺下面他卖的一些这个所有的商品啊。
好那么我们还是先去到这个呃再去到刚才这个这个具体的商品这里啊。

好，那这个我们可以看到
我们可以点直接购买和这个加购物车啊。
那比如说这里的话他是有库存九个对吧。
那我们这里的话比如说买一个啊。

额这里的话这个我们这里没有地址。
没有地址是因为你看大家注意到啊，我们是没有登录的，对不对？
没有登录，所以说这里的话就说我们这个项目啊
就是即便我们这个系我们这个用户没有登录，
就是我们额就是就是说呃不登录状态下，也是可以正常去进行一个这个数据的访问对吧。

在这里的话猜你喜欢，因为这里呃用户没有登录的话，
我们就是随机的这个呃给用户去推荐这个商品啊。
如果当我们用户登录以后呢，
当用户登录以后就会根据我们用户的一些行为喜好啊。
比如说我们这个啊用户的这个下单是吧，
呃下单和这个呃收藏行为啊都会给用户去加一些这个操作行为的权重。
然后就会根据用户的行为权重去给用户这个进行一个推荐啊。
啊这里用的就是我们一个这个基于用户行为的这个协同过滤推荐算法，对吧。

好，那这里的话我们还是这个可以看下
其他的一个商品啊。
比如说我们看下这个商品，哎，这个商品它有历史评价吗？
啊没有。
我们看这个这个商品他好像有个历史评价是吧，
我找一个有历史评价的吧，
就是买了哪个商品给历史评价的呃。
我们往下看一下啊。
哎这个吗啊，这个有对吧啊。

这个这个手表可以看，呃，如果说我们这个用户买过以后啊，然后的话他就可以去哎对商品进行一个评价。
然后可以看哎他的一个历史评价内容，
然后包括这个商家可以进行一个回复啊。
好，那这样的话我们就是整个的一个这个哎这个未登录状态下的一个效果啊。

那么我们可以在诶主页这里是吧，
哎我们再过来一下啊可以看选择一个注册或者一个开店是吧。
那注册的话其实就是比较好理解，就是我们正常用户的一个注册。
开店其实也是注册啊，只不过这里的话就是呃我们这里的话开店的话
你就可以选择这个商家去开店是吧。
好那我们这里登录一下啊，呃这里登录11111好吧。
这是一个用户啊，我们登录一下。

可登录以后我们看到啊
哎这个用户登录了，我登录的是一个阿水这样一个账户啊。
好，那这里的话我们还可以去进行一个个人信息修改是吧。
那我就把我这个人信息的这个修改一下就可以了啊。
好那么我们看一下啊。

啊比如说呃智能穿戴是吧，
那我想看更多智能穿戴。
那我可以点这个查看更多啊。
我点查看更多以后就可以去到这个全部分类，
这个智能穿戴这里呃，然后我可以再点这个全部分类可以看。
下面还会有会展示出来所有的分类是吧
所有商品的分类，我们可以按照这个新品呀，
啊和销量去排，或者说综合去拍是吧。

好呃那么我们还是一样的啊，
比如说这里搜一个这个诶我搜一个什么呢，
我看一下啊搜一个这个嗯，
搜一个这个什么，搜个这个面霜吧，好吧。
搜一个这个面霜啊，面霜面霜搜一下看哎，
这就出来两个商品是吧，所有关键词是面霜啊。
然后的话分类就是上面这些分类。

那么我们这个诶可以点进去具体一个面霜啊。
好那这个还是一样的，可以支持我们的这样一个这个唉放大查看效果是吧。
好我们看历史评价，这个没有啊。
好，那这里的话我们可以选择我们的一个这个呃
这个收货地址啊。
收货地址怎么怎么去填呢，
我们可以在我们这个哎是吧点到主页以后，
我们这里的话有一个这个个人订单，比如这订订单的话，
就是我们买过的一些这个历史历史这个哎购买商品啊。
那这里的话我们还是去到这个地址这里是吧点到地址。

那这可以，
这里就可以去编辑我的一些收货地址了，
比如新增，或者说对现在已有的地址进行一个编辑啊。
好那么编辑完以后呢，
我们在这个具体的某个商品啊商品页面诶进行一个这个下单是吧。
那我们还是去到一个这个刚才一个面霜吧。

那这个是吧啊，我记得好像是旁边这个啊这个面霜是吧。
哎我们可以选择一个这个包，包括下面是有个商品详情是吧。
那这个呃这个商家可以自己自己去定义一下啊。
然后我们这里的话选择我们的一个地址啊，
然后可以点这个直接购买诶已下单。

嗯，请及时支付是吧。
那我们看啊，
我们这有了一个新的一个订单号啊，就是一个订单号。
然后商品名称如果点的话，可以再点击回来啊，
点击到具体商品详情页。
那商品数量我们刚才下单一个啊，订单总价是1499，
然后这是一个下单时间，
然后的话是商家，我们点商家的话也可以跳到具体的商家啊，
商家的一个页面。

然后这里商家的话他会有一些这个标签是吧，
那这个标签的话是这个管理员可以给商家去添加的。
这个我们会等一下会说到啊。
那这里的话我们看这个信息啊，
我们说地址是这个哎收货人具体地址和电话是吧。
那状态这个待支付，
那我点击支付会打开一个这个哎支付页面啊。
那当然这里支付的话
我们没有去真正的去做一个这个额这个支付效果因为什么呢，
因为我们这个呃呃一般来说你这个支付的话呃
可能会涉及到一个这个你需要这个商家账户是吧，
对公账户或者说这个呃企业账户呃，
这个是为什么呢，
是因为你你这样收款的话你可能要涉及到一个这个交税问题是吧，
交税问题。

那么你这个报税的时候你不可能说，
一般来说不是以个人单位为报税是吧，
一般是以公司这种单位报税。
所以这里的话嗯，你如果去申请这个微信支付的话
就或者说支付宝支付就非常麻烦啊。
所以这里的话我们就这个简单去做一下这个模拟支付一个过程啊。
所以这里的话我比如我选择一个微信支付啊
我点这个确认支付好吧，
好支付出一周好吧。
那这支付成功啊
你支付成功支付这个价格。

然后我们看我们的订单状态是不是已经变成了一个这个哎代发货了啊，代发货。
好，那么我们这边的话，
唉既然已经是一个待发货的状态，我们这可以按可以点击上面去筛选
这个所有待发货状态的一个这个订单啊。
啊所有订单。

那么我们可以去到这个对对应的一个商家哦，
我忘了是哪个商家。
我们试一下啊，这个商家吗？
诶不是这个商家啊。
看一下R2，好像这个商家吧，商品管理。
那也不是他，我们11111商家好这个是吧，也不是啊。
那我们应该是44了都没试对啊，好上加好。

那我们商品管理这里是吧，
还我们订单管理这里啊，
你看刚才的话这个王兰花是不是刚才这王兰花他是不是下单了一个这个哎这个面霜是吧。
哎我看是不是这个订单啊，嗯这个是啊
对是这个订单啊，这个订单是一个待发货的啊，
一开始这个订单啊。
这个订单啊好，那我们可以是不是可以点击这个查看评价，
现在可能不能查看啊，
我们这个可以点击一个发货是吧。
哎点击发货，啊这边的话可以有一个退款状态啊。
我们先点发货啊，来点击发货。他是一个待收货状态是吧。

那代收货呢，这边的话就需要用户去对自己的订单进行一个收货啊。
哎那我们还是点击查看个人订单，
哎点击这个哎代收货的是吧。
我们这边比如说收货额到货到了然没问题，我们点击收货啊。

呃我们可以看所有订单，那这里的话我们的订单就是一个这个待评价啊。
就是那你现在的话就收完货以后，你去看这个货有没有问题呃。
如果你货没有问题的话是吧，
我们就可以进行正常的一个评价。
你给他打一个分，给一个评价，
如果你觉得会有问题的话，
我们可以点击申请退款对吧，
你点退款以后呢，
那就是刚才我们这个有这样一个状态。

比如说这里的话有一个这个待退款，这样一个状态啊。
那我们还是正常切到商家那边去看一下啊，
唉商家这里我们点商品管理啊。
哦点订单管理可以看，
这里的话他是一个这个待退款状态。
那我们操作话可以进行一个这个同意或者拒绝。
那同意的话，那我们就可以变给用户去进行一个这个正常一个退款操作啊。

好，那因为我们这里没有额涉及到真正的一个这个支付操作
所以这里的话这个就是我们还是一样的啊，
就是简单去模拟一下整个流程好。
那我们这里的话比如说再发货一个啊，
再发货诶，这个是谁买的？
这个是这个是哎，这个就不是我们刚才那个用户买的了是吧。
那我们这里的话就先这样退款吧，
这个退款退款没问题没问题啊。

额我们还是经常查看订单啊。
嗯这里的话他是一个这个待评价是吧。
那我们就走一个这个哎评价的一个一个一个流程啊，
比如这里评价我们比如说这个这是这个叫什么，
这个是一个面霜是吧。
好好那这个是叫什么，我们说买给买给女朋友的面霜，
面霜女朋友说非常好用，
哎超级推荐给大家是吧，好。
那这是一个评价，
那这里的话还还支持这个上传图片啊。

那我们就正常上传一个图片，
哎这里的话我就上传一个这个猫猫的图片呃，猫的一个图片啊，
好我给它放小一点啊。
啊这里的话其实可以上传一些真呃真实的一些图片是吧。
好我们点确定啊，
好那这个订单状态变成已完成了是吧。
那我们可以去看到这个哎去到这个去商品详情页啊，
我看这个历史评价，看哎这个时候我们可以看我们的用户的这条
这个评价是不是就出来了。

就是我刚才这个用户评价了啊，包括他的一个评分和评价内容。
那么对于商家来说呢，额他也可以去进行这个来进行一个这个对你用户评价的一个这个回复啊。
就看那这里的话我们这个哎已完成是吧。
那这样的话他是一个这个已完成。

那我们可以这个点击回复啊，呃回复的状态下，
比如说呃商家可以说诶感谢我们客户的支持，呃用心做好产品对吧。
哎那这个时候我们就可以看到我们给到这个给到用户的一个评价啊。
这是用户发的，然后我们去的还是去到前台啊，
给大家去看一下，这个展示一个效果是什么样子的。
呃还是呃是这个吗，对是这个啊。
好，那看诶这个时候是我们这个用户评价的对吧好。

那这个就是商家啊给这个条用户评回复的啊。
那这样的话就是说呃当我们这个用户唉
当我们其他用户想买这个商品的时候，
就可以根据这个历史评价去看一下这个商品到底怎么样对吧。
那你的评价可以给到其他用户的一些建议啊。

呃那么我们还可以怎么样呢，
我们可以比如说现在的话啊，
现在的话我这个把这个用户退出登录一下是吧。
那当然我们现在是在这个login页面啊，
那正常的话，我们是不是只要输入这个5173对吧。
哎5173就是到我们的这个
到我们的这个整个系统的一个这个主页了啊。
我们输入一下5173可以看，我们是到front home了是吧。
那右上角的话它提示我们登录注册啊。
这里的话我提示我们是一个游客啊。

那我们这个时候再去看这个面霜啊。
哎哎是吧，整个系统都没有问题。
那这里如果我们点购买或者加入购物车的话，
那这里肯定就是会
哎它会有个提示请登录是吧。
加购物车也是请登录啊。

好，那么我们这里的话，
哎那那还是这个正常的走下另外一个流程吧。
比如说走一个我们这个额加入加入购物车这个流程啊。
那个大家注意看啊，
就是刚才我这里的话已售是个零是吧。
库存是个一啊，这话比如说我这个呃再加一是加不动的，
因为他现在库存只有一个了啊。

所以这里的话我加入购物车啊，我点加入购物车成功。
呃，因为这里的话只加物车，所以没有买，
所以这里库存还是一啊啊，这里库存还是一。
然后已售一。
那这里的话我们这个哎我们这里的话去到我们用户的这里，
这个购物车里啊，
啊先看收藏夹吧，收藏夹的话也呃大家也好理解，
就是我收藏的一些商品是吧。
我可以正常的去点过来啊，他点过来，然后可以去这个哎取消收藏啊是吧。
我取消收藏啊，没问题。

然后我们这里的话还是去了购物车，
哎那这里的话我给大家展示一下，
比如多个商品吧是吧。
哎我这个在这个咱再要个这个啊，
然后加个购物车啊。

好诶，那我这里选购物车，
然后这里点全选是吧。
我点全选以后呢，那这个哎右侧也会帮我们进行一个这个详细的一个这个明细是吧。
然后这里的话就需要我们去选择具体某个地址下单就可以。
额这里的话我们可以正常的去加，
哎，但是我记得这个黑的这个面霜，
好像是已经是只剩一个了对吧？
你如果加二的话，我们点结算看一下啊，
商品库存不足，他就直接就会提示你了啊，商品库存不足。

那我们点一啊，
那注意看那这里我们因为选的是两个商品啊。
我就比如说把这个去掉是吧，右边就少一个啊。
把这个把这个加上啊，
勾选上以后哎那我这个就是两件合计是这个价格啊。
我们点击结算啊，点击结算诶，
那这个我买两个吧，这个白色我买两个啊，
好这个是我们一个折合价格。
我点结算，看好一下单，请及时支付是吧。

好，那这个时候我们看我们这个白色面霜，它的商品数量就是二。
我们下两单啊。
这单总价就是这个价格，然后这个下了一个。
这个时候我们再去看下我们这个哎他的一个这个销量啊，
你看他的库存已经变成零了是吧，已售是二啊。
好乙数加了一，然后库存变为零了。

那这时候我们再下单怎么办呢，
呃比如说我们在选上看合体，这库存不足，无法下单对吧。
那这个时候就会保证
我们如果说商家这个库存不足的话，
我们就可以及时的进行一个这个哎
及时进行一个这个哎订正啊。
好嗯，然后包括用呃没有话不会允许用户再下单，这样的话就不会出现这个你下单了发不了货的情况啊。

啊呃那么我们还是到我们这个诶订单这里啊，
哎到我们这个哎我看一下啊，
到我们这个订单这里是吧。
那这个流程的话就我们就还是一模一样，
所以这一个就不带大家看了。

然后的话来说下这个首页啊，首页话这边的这个轮播图是吧。
龙图的话可以理解为这个商家可能觉得自己商品想要去这个
做一个这个小爆款，然后让这个整个系统的整个这个是吧，
让整个系统的这个管理员给他去这个唉做个这个广告位引流啊。

所以这里的话哎，呃这个你这个轮播图下面有个立即查看啊
就点一个这个立即查看是吧，
就能到具体的某一个这个商品上啊，
就会关联到这某某个商品上，
这个是管理员可以操作啊。

左边的话也有这个具体的这个分类，
你点过来的话可以到这个具体分类下啊。
好，那这些话就是我们主要的一个这个额用户端的一个操作啊。

好我们在还是再简单看商家端吧。
好，商家端的话其实就是主要是我们的一个后台是吧。
还有一个这个数据统计啊，还有一个商品管理和这个订单管理。
商品管理的话大家很好理解，就是上架商品是吧。

呃这个商品这里的话我们可以多说两句啊，
比如这里有个上架状态，如果说你这里刷，
加上你给他关了以后啊，你给它关了以后呢
这个商品就是看不到的了。
在前台大家就看不到了。
好，那当然了你如果上架了啊，正常上架也是可以正常看到啊。

要编辑这里啊，然后嗯这个库存数量如果你不够了，
你可以去哎正常的修改你这个库存数量是吧。
你比如说我不够了啊，那我再给他加十个是吧。
哎确定啊。
哎好，那这个时候我们的库存是不是就哎有十个了啊。
啊这个订单的话，这个也是比较好理解，
那大家可以这个可以看我这个用户所有下的一些订单情况啊。

好啊当然当然一样啊，
就是我们只能看我们自己这个商家的订单是吧，
呃就是我们自己是商家发布的所有商品的订单，
不会看到其他商商商家啊。
如果你是管理员是可以看到的啊，这个我们等下去登个管理员账户可以给大家看一下。

那数据统计这里的话一样的呃，
数据统计这里的话只能查看我们这个商家
我们这个商家下面的商品的这个信息啊。
然后这我的这个商家他卖的是这些比他卖的好，
这个最高销量是吧，那他统计了一个这个销量啊。

好嗯包括这个哎不同分类销量，
那我们看下主要是什么分类，
那这个商家他主要是卖的是一个这个哎我们看一下啊。
哎这里的话是不是好像统计的不太对啊。
哎我们看一下哦，
嗯我们这里的话按F12看看数据啊
这统计是不是不太对。
那统计不太对的话我们这个，
哎这个美妆购物好像没统计不太对是吧。
这没关系，我们看下这个代码
我们给他这个现场改一下啊，
额这个是在哪个页面呢，我们看一下啊。

count count1是吧，这这1HS啊，一CHS1h s control啊。
好那我们这里的话我这个先暂停一下啊。
好我这里简单修改一下啊。
修改完以后呢，呃我这个多做了一层这个分类商品map是吧。
然后就多写了一个这个for循环啊。
好那这样的话我们就因为这个是这个商家他只有这个哎卖这个美妆过户是吧。
美妆客户。

所以他应该只统计出来这个美妆客户，
其他的话他们都是一个这个零啊，都是个这个零。
每周过后话它是有五个啊，不能分析商品销量比图，
这样的话就对了好。

那我们去这个哎管理员这里看一下啊。
管理员这里看一下，哎管理员按数据统计看是吧。
那不同分类的话他是这样的一个销售情况，
然后他的一个这个哎不同的这个系最高销量额，
最高销量商品top10柱状图是吧。

那我们如果是管理员的话他站在一个更高的角度啊，
额那他可以看到整个所有的这个就买哪些，卖的好是吧。
那我们如果是商家号只能看到自己卖的啊，
这个公告管理的话
就是我们这个这个边界公告啊。
轮播图这里的话我们可以看看，那可以去关联，
聚集到关联到具体某一个商品上啊。

啊这个轮播图的封面啊，这个好分类的话
就是我们的一个商品分类吧。
商品管理这里的话就不太多说，不再多说。
订单和地址收藏，这比较简单
然后这里的话我们说下这个商家和商家标签管理啊。

呃商家标签管理这里的话可给这个商家去诶去这个贴标签啊。
啊比如说这里的话他有这些标签是吧，那我们这个嗯我们后面还可以加，比如说这个发货快啊，
呃服务好是吧。
那这里的话我们只需要在这个去添加新的标签
添加外，或者给我们这个哎商家去打上具体的一个标签是吧。
那我们这个在前台的时候，用户登录的时候就可以看
哎这个商家的去写的一个这个一个一个哎商家具体一个标签了是吧。
那这个就比较哎比较合理了，这样一个功能啊。

好诶那我们还是进行到具体的这个呃这个管理员这里吧。
哎那我们还是去到山楂这里吧。
呃说到这里的话我们注意到呃
其实我们这个图片啊，
就商品这个图片它是支持一个这个商品图和一个更多商品图的啊。

我们可以看一下呃这里不光能定义这个商品图，
还可以这个哎更多商品图， 这里的话是可以上传多张图的啊。
呃比如说我想想啊。
这这这里面有两张，有一个是里面有个商品，
应该是有个多图的啊，看诶这个是吧。
那这个就是一个多图啊，那这里的话
你可以对具体某一个商品图进行一个删除是吧。
那这里的话他的更多商品图就只能去传额，
只有只有一个了是吧。

那这个话就很好理解啊，
你比如再上传一个是吧，
那他的这个商品图就有三张啊。
那就是我们可以看一下，比如说我们直接点预览啊，
可以看哎这个是有三张上面图的。

那我们还是继续切换到我们的一个这个用户这边啊，
诶他比如说这个呃这个是吧。
好那这个话就会有多一张猫图片出来啊。
好那这个就比较好理解啊，44444。
那我还是把这个数据给他进行一个删除啊。

额我们看一下这个是这个是哪里的
这个是一个这个嘶额这个数据是吧。
这是这里是吧，好我把这个图片删除掉啊。
好点确定啊，保存一下好吧。
那现在的话我们再去展示预览这个更多商品图是吧。
那就是这两张图啊。

好呃到此的话就是其实就是我们整个一个小米商城主要一个功能点啊，
呃那最后的话其实呃可能还有一个这个这个
猜你喜欢这样一个功能是吧，就是给用户这个其余用户的这个行为习惯
这个啊去给用户推荐这个商品啊。

那这里的话还不太明显，那这个后面的话大家如果能这个跟着教程一下
跟下来是吧，后面我我包括讲到这一节的时候
我会专门给大家诶展示如何去体现这个猜你喜欢这个功能是吧。
哎给不同用户推荐这个不同的这个商品啊。

那这里的话我们就先这个埋下一个这个按下不表好吧，
那我们后面的话就就可以
这个来正式的跟这个教程学下来。
那学完以后呢啊，就是看到这一集的话我们就会着重去给大家体现一下这个猜你喜欢这样一个功能好吧。

那这个视频我们就这个演示演示功能，演示这个功能部分就到这，
然后后面的话就正式开始我们的教程啊。
那我们这个后面视频见！