小兔鲜电商购物平台

项目

该项目类似于京东、淘宝等电商前台购物项目，项目主要包括首页、用户登录、身份校验、商品详情页展示、加入购物车、获取订单列表、支付结果展示、会员中心等子模块。

项目起步

项目初始化和git管理

别名路径练习设置

elementPlus引入

该项目基于Element-UI组件库进行开发，对商品及用户购物车信息进行实时更新及页面还原；

axios基础配置

对Axios请求进行二次封装，配置基础路径，超时等全局设置，并在请求拦截器中统一为请求头添加token，在响应拦截器中对错误进行统一处理；

项目整体路由设计

使用vue-router实现页面切换跳转，并在路由守卫中通过判断localstorage中是否存在token判断用户登录状态，token失效自动跳转登录页

静态资源引入

Layout模块

静态模板解构搭建

字体图标引入

Layout - 一级导航渲染

Layout - 吸顶导航交互需求

Layout-Pinia优化重复请求

使用Pinia保存数据，实现组件间的通信；

Home模块

Home-整体组件搭建和分类实现

Home-banner轮播图实现

Home-面板组件封装

Home-新鲜好物业务实现

Home-图片懒加载指令

Home-Product列表实现

Home-GoodsItem组件封装

一级分类

一级分类-路由配置；

一级分类-面包屑导航渲染

一级分类-分类轮播图实现

一级分类-激活状态显示和分类列表渲染

一级分类-解决路由缓存问题

一级分类-使用逻辑函数拆分业务

二级分类

二级分类-路由配置

二级分类-面包屑导航实现

二级分类-基础商品列表实现

二级分类-列表筛选功能实现

二级分类-列表无限加载实现

二级分类-定制路由滚动行为

商品详情页

详情页-路由配置

详情页-基础数据渲染

详情页-热榜区-基础组件封装

详情页-热榜区-适配不同title和内容

详情页-图片预览组件-小图切换显示大图效果

详情页-图片预览组件-放大镜效果

详情页-props适配

详情页-SKU组件

详情页-通用组件统一注册全局

用户登录

登录-路由配置

登录-表单校验实现

登录-自定义校验规则

登录-表单校验-统一校验

登录-基础功能实现

登录-Pinia管理用户数据

登录-Pinia用户数据持久化

登录-登录和非登录状态的模板适配

登录-请求拦截器携带token

登录-退出登录业务实现

登录-401拦截处理

通过判断localstorage中是否存在token判断用户登录状态，token失效自动跳转登录页

本地购物车

本地购物车-加入购物车实现

本地购物车-头部购物车-列表渲染和消息框渲染

本地购物车-头部购物车-删除功能

本地购物车-头部购物车-计算逻辑

本地购物车-列表购物车-基础数据渲染

本地购物车-列表购物车-单选功能

本地购物车-购物车列表-全选功能

本地购物车-购物车列表-统计计算

接口购物车

接口购物车-加入购物车

接口购物车-删除功能&小优化

退出登录时清空购物车数据

登录时合并购物车

结算模块

结算页-路由配置以及基础数据的渲染

结算页-地址切换-打开弹窗

结算页-切换地址-激活交互实现

支付模块

支付-获取基础支付信息

支付-支付功能实现

支付-支付结果展示

支付-封装倒计时函数

会员中心

会员中心-功能理解以及路由配置

会员中心-个人信息数据渲染

会员中心-我的订单-使用基础参数获取基础列表

会员中心-我的订单-使用tab切换获取状态数据

订单-分页逻辑