网易严选电商前端原型系统产品系统

本项目面向品质生活零售电商的商品展示与分类导购场景。用户在购买家居、食品、个护等日常消费品时，往往会遇到商品入口分散、分类不清晰、页面等待体验较差的问题。项目以网易严选风格商城为参考，建设首页推荐、商品分类浏览和内容导流能力，帮助用户从轮播活动、新鲜好物、人气推荐及商品专区中快速发现感兴趣的商品。业务上，首页承担活动曝光、推荐分发和分类导流职责，分类页承担按品类聚合与浏览职责，为后续接入商品详情、购物车、登录和订单交易流程预留扩展空间。

项目已实现商城公共布局、顶部工具栏、搜索头部、分类导航及分类下拉面板；首页包含轮播图、新鲜好物、人气推荐和多商品专区等模块，并通过通用商品卡片与内容面板组件统一展示样式。分类页面支持根据路由参数展示对应品类的面包屑、轮播内容和子分类信息。项目配置了 Vuex 分类数据共享、Axios 请求封装、开发代理和 Express 本地 Mock 服务，支持远程接口与本地模拟数据混合使用。针对数据加载过程，首页商品模块实现了骨架屏、空状态、请求失败提示及重新加载入口，提升页面在网络请求过程中的可用性与体验一致性。

我负责项目的前端页面搭建、路由设计、组件拆分、接口接入和本地 Mock 数据服务配置。项目基于 Vue 3 和 Vue CLI 构建，使用 Vue Router 实现首页、分类页和登录页的 Hash 路由管理，使用 Vuex 模块化管理分类与用户状态；通过 Axios 实例、接口地址配置和请求方法分层，统一管理接口调用，并通过开发代理解决跨域问题。实现中将轮播图、商品卡片、内容面板、更多入口和骨架屏抽为可复用组件，减少重复代码并便于后续扩展。难点主要在于不同数据源的联调、分类数据在导航和页面间共享，以及接口加载、失败和空数据状态的统一处理。