当前位置:首页 > web前端开发视频教程 > 正文

Vue3.x网上商城项目黑马小兔鲜儿电商实战视频教程

浏览924+

vue3电商商城项目功能介绍与项目演示

咱们的这个vue3项目是一个小兔鲜儿综合品类电商项目,是独家运营的品类,参考的竞品是网易严选,首页展示还是比较大的,有很多块分类内容,有顶级分类,顶级分类下有二级分类,然后有搜索功能和购物车功能,分类点进去之后右边显示的是一些配件,下面还有一些品牌推荐。 品牌推荐包括新鲜好物、人气推荐、 热门品牌等等,然后还有居家美食、母婴等等,这是首页主打的四个类目。

每个类目下都有自己的推荐商品及它下面所有的二级类目, 项目中还专门设计一个最新专题板块,比如说三八节、618节日做一些推广之类的促销和秒杀抢购等。

你从首页这里还可以进入它的二级类目,然后看到的就是一些具体的商品,二级类目中可以做一些筛选属性,可以按照规格、尺寸、颜色等进行筛选展示,下一块就是商品详情,点商品进入咱们的商品详情页,这个位置就是一个商品图的展示、放大镜的展示、图片的切换,需要购买的话下面还有配选地区的一个选择, 有规格选择、有spu 的选择。

商城首页项目演示

小兔鲜儿商城项目的特色功能

下面讲一下购物车的特色功能,首先点击加入到购物车,登录成功的状态下是可以直接添加购物车的,我们的这个项目还支持离线购物车功能,就是退出登录后显示未登录的状态,点一下商品依然可以加入购物车, 登录和未登录两种状态下都可以实现,这是购物车的特色功能, 一旦当我去进行登录的时候,就会将本地购物车合并。

登录这一块的话有三种方式的登录,有账号和密码的登录,有手机号和验证码的登录,这其实都是直接登录,然后你还可以通过qq进行登录,qq登录就分两种情况,一种是你已经绑定过当前的注册账号,然后直接点击qq登录就可以直接登录成功,另一种是从来没有注册过账号,这种情况的话点击qq登录就会提示绑定手机号然后完善信息,这也是一个特色业务。

购物车结算功能又有一套逻辑,购物车包括全选全选商品、删除商品、清空商品、改变商品数量、改变规格、计算价格等等,然后进行下单结算, 下单结算之后就会跳到填写地址界面,这里有个收货地址的管理,默认会有一个收货地址,你也可以修改收货地址,如果没有你也可以添加一个新的收货地址,提交订单必须在半小时之内进行支付,可以选择微信和支付宝,支付宝支付完了会跳转到支付成功页面,会显示当前的订单状态,其他功能都是比较雷同的了。

还有告诉大家一个消息,本vue3电商商城项目没有用任何组件库,主线全部自己封装,内容已经给大家介绍完毕了,大家不用太担心,只要跟着老师一步一步的走,做这个项目完全没问题的。

前后台接口对接开发说明

后端接口大部分都是我前端来定的,后端按照这个接口字段来开发就可以,当然也有后台编写接口返回给前台,我们按照后台的约定来做开发,都是一样的,我们和后台做好约定就可以,后台看到我们定义的接口之后,按照这个文档进行开发就可以,或者说后台把这个东西定义好,前端按照这个文档开发就可以。即使后台接口没有开发完,我们也可以调这个接口来完成一些前台逻辑,只要到时候和后台就进行接口联调就可以了。

我们在做这个项目的时候,会遇到同样的一些问题,首先大家会遇到的一个问题就是数据问题,刚才演示的时候是有些数据就不太对,后台老师后续会整理完成,我们专门有一个后台,java技术开发的后台, 如果遇到不合适的数据,老师还是会给大家演示一下如何在没有后台接口的情况下完成前端开发。

开发过程中,由于我们用的是最新版本的vue,因此有可能会遇到各种问题,你使用一些新特性之类的,你就要准备踩坑,项目中老师也会手把手的带着我们进行踩坑埋坑,大家不用太担心啊,突然出现了bug不知道怎么回事也没关系啊,我们会慢慢过渡下去,慢慢的一起解决版本的bug问题,如果你想把这个项目作为工作的项目经验,那就得好好听一听,步骤细节应该要做清楚。

Vue3.0小兔鲜儿电商项目视频教程课程详情

1、课程大小:6.20GB

2、课程课时:共计154课时

3、播放格式:(mp4视频格式)百度云网盘在线播放、下载视频播放器播放、不加密

4、技术架构:Vue3.x+Vuex+Vue-router+Vue-cli+axios+vuex-persistedstate+vee-validate+dayjs

5、课件说明:教程课程涵盖素材、代码、笔记资料

小兔鲜项目搭建、首页布局、商品详情开发、第三方登录开发课程详情

vue3商城qq登录开发、购物车开发、结算页面开发视频教程详情

vue3商城支付开发、订单模块开发、商城个人中心课程详情

百度云网盘视频教程分享

责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:Vue3.x网上商城项目黑马小兔鲜儿电商实战视频教程
本篇文章url地址:http://www.itjcw123.cn/9270.html

三个月热门文章推荐

  • N/A