写在前面的话，多年以来学习软件技术到学各种新东西，最大的体会就是：从实战入手，遇到什么问题解决什么问题，缺什么找什么，更能有动力完成。
所以这次想完成一个 从0到1的 《项目实战——“微商城”前后台开发》，来快速掌握 vue3的开发 。
项目概述
整个项目采用前后端分离的形式，主要分为三块代码，前台代码、后台代码、服务端代码。
下图为系统架构图，简单说明如下（后续会单独讲解）：
- 前台代码，也就是图中的【H5客户端】，“微商城”前台网站主要包括 首页，分类，商品详情，消息，购物车，我的等功能。
- 后台代码，即图中【PC管理系统客户端】，“微商城”后台管理主要包括 商城数据统计，商品管理，商品分类管理等功能。
- 服务端代码，就是图中的 【服务端server】，构建RESTful风格的API，为前端提供数据接口服务。
项目前台分析
微商城”前台网站主要以适配移动设备，使用Chrome浏览器的开发者工具，测试页面在移动端模拟环境下的页面效果。
技术栈为 vue3 + Vant4.0组件库。主要包含以下页面：
- 首页
- 我的
- 商品详情
- 消息
- 购物车
- 我的
下面对这些页面进行分别展示。
1，首页
首页从上到下分别是搜索框、轮播图、功能按钮区、商品信息展示区、底部导航栏。
- 搜索框：展示用户搜索的信息。
- 轮播图：展示一组推广的商品图片。
- 按钮功能区：展示功能内容。
- 商品信息展示区：展示各种商品信息，例如每周上新的商品、热销商品等。
- 底部导航栏：展示当前选中标签的名称。
首页上半部分
首页中间部分
首页下半部分
未输入内容时的搜索框状态
输入内容时的搜索框状态
2. 分类
分类页面分为左侧菜单栏和右侧商品列表。
- 单击左侧菜单栏，右侧商品列表会滚动到相应的分类；
- 滑动右侧商品列表，左侧菜单栏的样式会相应改变。
滚动效果在这里使用better-scroll插件实现，核心借鉴了iscroll的实现原理，相应的API设计基本兼容iscroll，但是在iscroll基础上又做了扩展和性能优化。
3 . 商品详情
单击分类页面中的商品，会跳转到相应商品的详情，商品详情页介绍如下。
- 顶部通过轮播图的形式显示商品的图片；
- 轮播图下面显示商品的标题、价格、运费和剩余库存等；
- 单击顶部的【返回 按钮】 会跳转到分类页面；
- 底部显示了“客服”按钮、“购物车”按钮、“加入购物车”按钮和“立即购买”按钮；
- 通过单击“加入购物车”按钮可以完成商品加入购物车的操作。
- 单击“购物车”可以跳转到购物车页面。
- 上半部分
- 下半部分
“微商城”商品详情页分析
4. 消息
消息页面用于展示已设置接收消息的群组列表，例如店铺消息、消息号内容、订阅号消息等，可以方便查找用户与客服的聊天记录。
5. 购物车
购物车页面介绍如下。
- 购物车页面单击“删除”按钮，可以把商品从购物车中删除；
- 单击“+”按钮可以将当前商品的数量加1；
- 单击“-” 按钮可以将当前商品的数量减1；
- 勾选商品前面的复选框，可以选中当前商品，并会自动合计已勾选商品的金额，显示在“合计”- 处，将已勾选商品的数量显示在“结算”处。
6. 我的
我的页面中已登录页面介绍如下。
- 显示当前登录的用户名和“退出”按钮；
- 单击“退出”按钮，就会退出登录；
- 显示“待付款”“待收货”“待评价”“退货/售后”链接，单击链接会查看相应的信息；
- 单击“全部订单”会跳转到订单页，查看全部的订单；
- 单击“我的积分”会跳转到积分页，查看账号中的积分列表；
- 单击“我的优惠券”会跳转到优惠券页，查看所有的优惠券；
- 单击“我的红包”会跳转到红包页，查看所有的红包。
未登录状态
已登陆状态
