# Vue_喜茶

**Repository Path**: bigcat_li/vue-heytea

## Basic Information

- **Project Name**: Vue_喜茶
- **Description**: vue2+vant喜茶订餐小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2023-06-30
- **Last Updated**: 2024-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 1.	系统功能模块介绍 
![输入图片说明](01.png)
 
（1）系统包含登录注册，点餐，设置三⼤功能模块。 
（2）小程序的引导⻚，4张宣传海报的轮播，点击⽴即登录按钮即可进⼊登录板块，为 
了保证信息的私密性，使⽤前必须先注册，若未注册，则切换到注册⻚⾯，注册成功后⾃动跳转到登录⻚⾯。 
（3）登录前需要勾选用户协议，登录成功后，进⼊主⻚⾯，主⻚⾯下⽅tabbar组件进⾏不同⻚⾯之间的切换。 
主⻚⾯默认为⾸⻚。 
四个⻚⾯分别是⾸⻚Homepage，点餐Order，订单Car，个⼈Setting。 
（5）⾸⻚Homepage主要是宣传海报，前往点单以及当季热⻔菜品推荐 
（6）点餐Order⻚⾯是菜品的选择，每个菜品包含图⽚，菜名，价格等内容，⽤户通过点 
选操作将菜加⼊购物⻋。菜品使用sidebar侧边栏分类等，通过点击不同的分类，显示不同类型的菜品。 
（7）购物⻋内显示⽤户已点的菜，⽤户可对菜的数量进⾏修改操作。购物⻋要根据⽤户 
所点的菜实时更新总价。当⽤户点击下单按钮，弹出相应的对话框，显示所点菜的 
列表（包含所点的菜及相应的数量，总价及总数量以及下单时间） 
（8）个⼈设置Setting⻚⾯可修改个⼈的基本信息，如⽤户名，密码，收货地址等。 
（9）录⼊的信息利⽤h5的本地存储(storage)进⾏存储。
2.系统设计 
组件设计及功能分析： 
根据系统功能，设计了相应的Vue⻚⾯级组件及⼀些⼩组件，具体如表格所示。
Views中的组件
| LoginItem.vue  | 登录页面，在Login.vue中引用  |
|---|---|
| Register.vue  | 注册页面，在Login.vue中引用  |

components中组件
| BannerItem.vue  | 在Homepage.vue中引用，展示最新产品信息  |
|---|---|
| Car.vue  | 购物车订单页面，在NavigationBar.vue中引用  |
| Change.vue  | 修改个人信息页面，在Setting.vue中引用  |
| NavigationBar.vue | 首页页面，在Homepage.vue中引用  |
| Order.vue  | 点餐页面，在Homepage.vue中引用  |
| Setting.vue | 个人设置页面，在Homepage.vue中引用  |	
系统路由情况：
   ![输入图片说明](%E5%9B%BE%E7%89%872.png)
![输入图片说明](%E5%9B%BE%E7%89%873.png)
![输入图片说明](%E5%9B%BE%E7%89%874.png)
3系统基本功能介绍及分析
1.引导页
引导页由宣传轮播图及立即登录按钮组成，点击立即登录按钮即可到达login页面。
 ![输入图片说明](%E5%9B%BE%E7%89%875.png) 
![输入图片说明](%E5%9B%BE%E7%89%876.png)
2.	Login登录页
由logo，field组件和button组件构成。
使⽤前必须先注册，注册完成之后需要勾选用户协议，点击注册button，则切换到注册⻚⾯，注册成功后，点击登录button跳转到NavigationBar首页⻚⾯。  
![输入图片说明](%E5%9B%BE%E7%89%877.png)![输入图片说明](%E5%9B%BE%E7%89%878.png)

注册：
![输入图片说明](%E5%9B%BE%E7%89%879.png)
![输入图片说明](%E5%9B%BE%E7%89%8710.png)
  
登录：
 ![输入图片说明](%E5%9B%BE%E7%89%8711.png)
![输入图片说明](%E5%9B%BE%E7%89%8712.png)
 
3.	HomePage主页⻚⾯
由navbar，欢迎语，banneritem组件中热门商品信息组成，NavigationBar组件实现页面切换，点击前往点单按钮或者去热门商品里的箭头按钮切换到Order点餐界面。
![输入图片说明](%E5%9B%BE%E7%89%8713.png)
 ![输入图片说明](%E5%9B%BE%E7%89%8714.png)
![输入图片说明](%E5%9B%BE%E7%89%8715.png) 
![输入图片说明](%E5%9B%BE%E7%89%8716.png) 
![输入图片说明](%E5%9B%BE%E7%89%8717.png)  
![输入图片说明](%E5%9B%BE%E7%89%8718.png) 
4.	order点餐页面
由user信息，横、纵向轮播图，sidebar，顶部的纵向轮播图会显示贵宾特权信息，user栏会显示用户信息以及收货地址，右侧菜品内容立即购买button和购物车组成使用sidebar侧边栏分类等，通过点击不同的分类，显示不同类型的菜品，点击购物车图标弹出购物车商品信息。
![输入图片说明](%E5%9B%BE%E7%89%8719.png) 
![输入图片说明](%E5%9B%BE%E7%89%8720.png)      
![输入图片说明](%E5%9B%BE%E7%89%8721.png)
![输入图片说明](%E5%9B%BE%E7%89%8722.png)
![输入图片说明](%E5%9B%BE%E7%89%8723.png)
![输入图片说明](%E5%9B%BE%E7%89%8724.png)
![输入图片说明](%E5%9B%BE%E7%89%8725.png)
![输入图片说明](%E5%9B%BE%E7%89%8726.png)
![输入图片说明](%E5%9B%BE%E7%89%8727.png)
![输入图片说明](%E5%9B%BE%E7%89%8728.png)   
5.	Car订单页面
菜品信息组成，通过子传父传字将信息传入点击详情显示购买数量和总价。
![输入图片说明](%E5%9B%BE%E7%89%8729.png) 
![输入图片说明](%E5%9B%BE%E7%89%8730.png)
![输入图片说明](%E5%9B%BE%E7%89%8731.png)  
6.	Setting个人设置页面
![输入图片说明](%E5%9B%BE%E7%89%8732.png)
![输入图片说明](%E5%9B%BE%E7%89%8733.png)  
由logo和个人信息组成
点击arrow图标进行信息修改，修改成功点击button返回设置界面。
设置：
![输入图片说明](%E5%9B%BE%E7%89%8734.png) 
 ![输入图片说明](%E5%9B%BE%E7%89%8735.png)
![输入图片说明](%E5%9B%BE%E7%89%8736.png) 
修改信息：
![输入图片说明](%E5%9B%BE%E7%89%8737.png)  
![输入图片说明](%E5%9B%BE%E7%89%8738.png)
4.	总结与反思
关于一些目录，比如导航目录，一般是写死的，当然也有从后台获取的，我现在这个项目就是从后台获取目录，还有请求URL，和一些http请求，你就可以新建一个server目录，然后分模块的写道js文件夹里面，return出去，然后再在其他页面中引入，这样做的好处是，模块化管理，将常量和http请求进行统一管理。
在刚刚结束得项目中，感觉收获良多，今日便为刚刚结束得项目做出总结。
在这次项目中，发现自己重大问题，即许多知识点仅浮于皮毛，并未深沉理解其真正含义，对于一项功能得实现理解仅限于教材与视频教程所讲并为深挖期原理，只知生搬硬套，导致错误频出，后续应多加练习并熟读相关知识点文档，理解并深刻记忆其应用。
这次项目总的来说工作算是完成，可是并没有能做的更好，没有完善自己的代码，不仅是因为能力，更多的是因为自己没有规划好时间，做好每日计划。现在回想起工作时为自己在项目开始之初时准备不充分而感到一丝悔意，又因及时发现自己的不足而感到一丝庆幸，希望下次项目自己能有更好的表现。