项目名称：爱心母婴室
项目概述：
通过使用vuecli以及axios的完善的电商小型项目，帮助新生儿的爸爸妈妈们购买精品的儿童用品。也是一个电商练手小项目。
技术栈：
- 前端框架：vue.js
- 后端框架：express
- 数据库技术：mysql5.7
- 数据响应：axios
遇到的挑战：
登录、退出登录与注册功能的尝试。搜索功能的实现。
功能需求：
1）用户注册和登录、退出：
用户可以进行账号注册和登录，注册需要提供基本信息，如用户名、密码、联系方式等，登录后可以进行商品浏览、购物车管理、订单处理等操作。退出登录能实现重新登录新账号。
2）商品展示和搜索：
用户可以在网站上浏览商品信息，包括商品名称、价格、图片等，同时可以进行关键字搜索、分类浏览等操作。
3）购物车管理：
用户可以将感兴趣的商品加入购物车，可以对购物车中的商品进行增删改查等操作，并可以直接结算购物车中的所有商品。
4）订单管理：
用户可以在网站上创建订单、查看订单、取消订单等操作，同时也可以对已完成订单进行评价。
5）商家后台管理：
商家可以在网站后台管理系统中进行商品信息管理、订单管理、用户管理等操作，同时也可以查看销售统计、库存管理等信息。
数据库设计：
1）商品信息表（product_detail）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 商品详情id | bigInt | 否 | 主键（自增） |
| name | 商品版本名 | Text | 否 | |
| stock | 商品库存 | Int | 否 | |
| price | 商品原价 | varchar | 否 | |
| sale_price | 商品售价 | varchar | 否 | |
| image | 商品图片 | Text | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| product_id | 商品id | Bigint | 否 | 外键，关联商品表 |
2）用户信息表（user）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 用户id | Bigint | 否 | 主键（自增） |
| username | 用户名 | varchar | 否 | |
| password | 密码 | varchar | 否 | |
| 邮箱 | varchar | 否 | ||
| avatar | 地址 | varchar | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
3）订单信息表（order）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 订单id | varchar | 否 | 主键（自增） |
| price | 订单总价 | varchar | 否 | |
| paid | 是否支付 | tinyint | 否 | 1表示已支付，0表示未支付 |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| contact_id | 收货地址id | bigint | 否 | 外键，关联收货地址 |
| user_id | 用户id | bigint | 否 | 外键，关联用户表 |
4）商品分类表（product_category）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 商品类别id | bigint | 否 | 主键（自增） |
| name | 商品类别名 | varchar | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
5）商品表（product）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 商品id | bigint | 否 | 主键（自增） |
| name | 商品名称 | text | 否 | |
| description | 商品描述 | text | 否 | |
| show_index | 展示索引 | int | 否 | 一个商品下有不同版本，默认展示版本索引 |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| category_id | 类别id | bigint | 否 |
6）购物车表（cart）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 购物车id | bigint | 否 | 主键（自增） |
| checked | 是否勾选 | tinyint | 否 | 1表示勾选，0表示未选 |
| quantity | 数量 | int | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| product_id | 商品id | bigint | 否 | 外键，关联商品表 |
| detail_id | 商品详情id | bigint | 否 | 外键，关联商品详情表 |
| user_id | 用户id | bigint | 否 | 外键，关联用户表 |
7）订单详情表（order_detail）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 订单详情id | bigint | 否 | 主键（自增） |
| quantity | 数量 | int | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| order_id | 订单id | varchar | 否 | 外键，关联订单表 |
| product_id | 商品id | bigint | 否 | 外键，关联商品表 |
| detail_id | 商品详情id | bigint | 否 | 外键，关联商品详情表 |
8）收货地址表（contact）：
| 字段名 | 字段说明 | 字段类型 | 是否允许为空 | 备注 |
|---|---|---|---|---|
| id | 收货地址id | bigint | 否 | 主键（自增） |
| name | 收货人 | varchar | 否 | |
| telephone | 电话 | varchar | 否 | |
| address | 地址 | text | 否 | |
| tag | 标签 | varchar | 否 | |
| create_time | 创建时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| update_time | 更新时间 | datetime | 否 | 默认值：CURRENT_TIMESTAMP |
| user_id | 用户id | bigint | 否 | 外键，关联用户表 |
9）表关系：
编码实现：
1）注册登录功能：
当用户点击登录或者注册时会执行
表示当前点击的是否不同于上一次的状态，如果真，就执行切换显示，注册或者登录的浮悬窗，所以要是点完登录再次点击登录将不会弹出浮悬窗
在store.js中具体的切换功能实现
退出登录实现：
定义一个a标签绑定退出事件
在store.js中定义的退出实现
在函数中调用vuex中的函数
重新调用登录浮悬窗
搜索功能实现：
下载了element-ui插件npm i element-ui -S，在main.js中引入element-ui和ui样式
在site-header.vue中使用el-autocomplete标签来当做搜索框
用v-model来双向绑定实时修改然后，fetch-suggestions根据用户输入的查询字符串从restaurants数组中筛选匹配的结果，并通过延迟调用回调函数返回结果。
其中，createStateFilter方法用于创建一个用于过滤结果的函数。
clearTimeout来防止频繁调用函数
@select监听事件用来当用户执行查询操作时调用handleSelect()方法，来使用路由重定向到商品页
商品宣传视频下载，画中画功能实现：
商品分类功能实现：
轮播图页面跳转实现：
项目链接：
后端启动方式 进入到/var/hexo/baby/server目录中然后pm2 start bin/www来启动（后台端口3000）
番外：
Promise学习：
理解：
在 JavaScript 中，Promise 是一种表示异步操作的对象，其可以在未来的某个时间点提供一个值。
实际问题：
在做搜索功能时，发现数据返回的格式不对，深入研究后发现问题的根源在于对Promise的返回机制理解不够。
对问题的理解：
在代码
this.loadAll().then((formattedProducts) => {
return formattedProducts;
});
中，then() 的回调函数里返回了 formattedProducts，这样会创建一个新的Promise对象，这个新Promise的解析结果就是formattedProducts，如果没有在外层继续调用.then()或者使用await去处理这个新的Promise，就无法直接获取到formattedProducts的值。
比如在下面的写法中：
this.loadAll().then((formattedProducts) => {
this.restaurants = formattedProducts;
});
实际上是在等待loadAll()方法返回Promise对象，并在该 Promise 对象解析时，将其结果赋值给 this.restaurants，这样就能正确获取数据
欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com
