# cakeShop

**Repository Path**: zxdfs/cake-shop

## Basic Information

- **Project Name**: cakeShop
- **Description**: 模仿某蛋糕小程序界面制作的一个前端，后端使用若依框架
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 3
- **Created**: 2024-06-30
- **Last Updated**: 2025-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite

## README

## 一、项目名称：蛋糕商城

#### 介绍
模仿某蛋糕小程序制作的一个前端，后端使用若依框架

## 二、项目成员及分工：

| 角色       | 姓名   | 分工  |
| --------   | -----  | :----  |
| 组长  |董乃烨 | 项目原型设计、项目功能分析及设计、前端界面设计  ... |
| 成员 |包邦忠|项目原型设计 、前端界面设计、后端前端对接、项目文档整理、页面功能设计...|
|成员 |王江华 |数据库设计、API接口设计及测试、后端前端对接、数据库数据的储存...|
	
## 三、项目功能
- 1、首页：轮播、快捷入口跳转对应分类、横向动画、商品推荐等
- 2、商品：分类、列表、下拉加载等
- 3、购物车：购物车商品显示、删除、修改数量、清空、是否勾选等
- 4、我的：注册/登录、我的订单、我的资料、我的密码等
- 5、半成品详情页、搜索（api未实现，后续会慢慢完善）
	

## 四、项目数据库表设计
   项目数据库设计文档，参见 [数据库表结构设计](cake_database-design.md)

## 五、项目原型设计
  项目原型设计文件，参见：[cake项目原型设计](https://app.mockplus.cn/s/4QDTOym-R?请查看《新项目》)

## 六、API接口
   后端API接口，参见：[cakeShop首页接口](https://apifox.com/apidoc/shared-4062fe5e-ea1e-4b98-9014-ccc20127ab40)、[cakeShop商品接口](https://apifox.com/apidoc/shared-6f553f85-4701-4e94-a0f6-79ca4d40f63c)、[cakeShop购物车接口](https://apifox.com/apidoc/shared-e88ece4f-b01b-4ff7-992a-3b02b6841c31)、[cakeShop我的接口](https://apifox.com/apidoc/shared-659d3a37-7d14-40c5-a78c-00b39a3aebdf) 
  
## 七、项目演示
   项目演示视频，参见：[cake项目演示视频（传到git上画质有点差所以下面弄了gif图，但转的gif图速度可能有点快）](cakeShopShow.mp4 )  
- 1、首页，参见：[首页.1轮播、快捷入口、横向动画](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif1-1.gif)、[首页.2](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif1-2.gif) 
- 2、商品，参见：[商品.1商品分类](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif2-1.gif)、[商品.2上拉刷新](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif2-2.gif)
- 3、首页快捷入口跳转对应分类商品页，参见：[快捷入口跳转](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif3-1.gif)、[快捷入口跳转](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif3-2.gif)
- 4、我的，参见：[登录](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif4-1.gif)、[注册](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif4-2.gif)、[注册](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif4-3.gif)、[注册后的登录](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif4%20-4.gif) 
- 5、购物车，参见：[购物车的商品勾选，数量加减及计算](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif5-1.gif)、[购物车的清空、个人资料](https://gitee.com/zxdfs/cake-shop/blob/master/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif/%E9%A1%B9%E7%9B%AE%E6%BC%94%E7%A4%BAgif5-2.gif)             
	 
## 项目安装-后端
- 1、下载后安装项目依赖包  npm i
- 2、启动mysql,新建数据库cake,导入表结构及数据（执行项目目录下的cake.sql)
- 3、修改util\pool.js中关于mysql数据库cake的访问配置（用户名、密码等）确保数据库能正常访问。
- 4、启动运行  npm run dev 在控制台显示:蛋糕商城后端服务（v2.0）已启动，端口:5050 ......
	 
## 项目安装-前端
- 1、下载后安装项目依赖包  npm install。
- 3、修改main.js、vite.config.js、package.json、request.js中的ip地址，改为当前电脑连接的网络的ip。
- 4、启动运行  npm run dev ，手机与电脑连接同一网络可根据ip地址:端口号，在手机浏览前端页面。