# campussupermarket

**Repository Path**: li-chen-chuxia/campussupermarket

## Basic Information

- **Project Name**: campussupermarket
- **Description**: 随着高校规模扩大，师生日常购物需求呈现高频次、碎片化特点。传统线下超市存在营业时间限制、高峰期排队等问题，且如果有疫情，无接触配送需求激增 。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-14
- **Last Updated**: 2025-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 校园网上超市系统


![首页](%E9%A2%84%E8%A7%88%E5%9B%BE/%E9%A6%96%E9%A1%B5.png)

## 🚀 项目亮点

- 页面精美：利用Element-Plus框架设计出精美的网站页面
- 校园圈：添加社交功能，使系统更加贴合校园场景
- 人性化：拥有详细的提示信息，使系统操作更加简单


## 🌟 项目背景

 **核心痛点：** 高校师生日均购物频次达3.2次，传统超市存在以下问题：

- 配送需求：传统超市无法满足高校师生的配送需求
- 效率瓶颈：高峰期结账排队超15分钟
- 疫情响应：封控期间无接触配送需求增长400%

## 🛠️ 技术架构
| 层级   | 技术方案                          | 特性说明              |
|------|-------------------------------|-------------------|
| 前端   | Vue3 + Element-Plus + ECharts | 跨平台响应式设计          |
| 后端框架 | SpringBoot 3 + MyBatis        | REST API开发效率提升40% |
| 数据库  | MySQL                         | 事务处理优化+缓存机制       |

## 🔍 功能模块

 **核心功能矩阵** 
| 模块    | 功能点                             |
|-------|---------------------------------|
| 网站首页  | 商品展示、商品分类、无限滚动加载、商品推荐           |
| 购物车   | 结账跳转、添加商品、删除商品、计算金额             |
| 订单管理  | 订单商品项、订单金额、订单支付管理、订单收货地址、订单状态跟踪 |
| 登录与注册 | 身份选择、数据校验、错误提示                  |
| 用户中心  | 个人资料、收藏夹、收货地址、我的订单、我的文章         |
| 骑手系统  | 订单大厅、历史订单、个人中心                  |
| 管理后台  | 数据可视化、用户管理、订单管理、商品管理、文章管理、登录日志  |
| 校园圈   | 文章发布、文章查看、文章点赞、文章媒体             |

## 📦 项目部署

### 环境要求

#### 前端环境
- Node.js 16+
- npm 8+ 或 yarn 1.22+

#### 后端环境
- JDK 17
- Maven 3.8+
- MySQL 8.0+

### 数据库配置
1. 运行sql脚本
'sql/data/campussupermarket.sql'


### 后端部署
1. 修改数据库配置
   编辑`src/main/resources/application.yml`文件，配置数据库连接信息：
```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/campussupermarket?useSSL=false&serverTimezone=UTC
    username: 你的数据库用户名
    password: 你的数据库密码
    driver-class-name: com.mysql.cj.jdbc.Driver
```

2. 修改服务器配置
```yaml
server:
  port: 8080
  address: 你的服务器IP地址  # 默认为192.168.0.3，根据实际情况修改
```

3. 编译打包
```bash
# 在项目根目录下执行
mvn clean package
```

4. 运行应用
```bash
# 方式1：直接使用java命令
java -jar target/campussupermarket-0.0.1-SNAPSHOT.jar

# 方式2：使用Maven插件
mvn spring-boot:run
```

### 前端部署
1. 安装依赖
```bash
# 进入前端项目目录
cd vue-project

# 使用npm安装依赖
npm install
# 或使用yarn
yarn
```

2. 修改请求配置
   编辑`vue-project/src/utils/request.js`文件，配置后端服务器地址

3. 开发环境运行
```bash
npm run dev
# 或
yarn dev
```

4. 生产环境构建
```bash
npm run build
# 或
yarn build
```

5. 部署生产环境
   将`vue-project/dist`目录下的文件部署到Web服务器(如Nginx)

### Nginx配置示例
```nginx
server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或IP

    root /path/to/vue-project/dist;
    index index.html;

    # 处理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

### 常见问题排查
1. 数据库连接失败：检查MySQL服务是否启动，用户名密码是否正确
2. 端口冲突：检查8080端口是否被占用，可在application.yml中修改端口
3. 跨域问题：确保后端已配置CORS或使用代理服务器解决跨域
4. 文件上传失败：检查uploads目录权限，确保应用有写入权限

## 📤 功能演示
### 首页
![首页](%E9%A2%84%E8%A7%88%E5%9B%BE/%E9%A6%96%E9%A1%B5.png)

### 登录
![登录](%E9%A2%84%E8%A7%88%E5%9B%BE/%E7%99%BB%E5%BD%95.png)

### 注册
![注册](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%B3%A8%E5%86%8C.png)

### 管理员后台
![管理员后台](%E9%A2%84%E8%A7%88%E5%9B%BE/%E7%AE%A1%E7%90%86%E5%91%98%E5%90%8E%E5%8F%B0.png)

### 骑手系统
![骑手系统](%E9%A2%84%E8%A7%88%E5%9B%BE/%E9%AA%91%E6%89%8B%E7%B3%BB%E7%BB%9F.png)

### 商品分类页面
![商品分类页面](%E9%A2%84%E8%A7%88%E5%9B%BE/%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2.png)

### 商品详情页面
![商品详情页面](%E9%A2%84%E8%A7%88%E5%9B%BE/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E9%9D%A2.png)

### 订单结算
![订单结算](%E9%A2%84%E8%A7%88%E5%9B%BE/%E8%AE%A2%E5%8D%95%E7%BB%93%E7%AE%97.png)

### 校园圈
![校园圈](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%A0%A1%E5%9B%AD%E5%9C%88.png)

### 购物车
![购物车](%E9%A2%84%E8%A7%88%E5%9B%BE/%E8%B4%AD%E7%89%A9%E8%BD%A6.png)

### 个人中心
![个人中心](%E9%A2%84%E8%A7%88%E5%9B%BE/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.png)

### 收藏夹
![收藏夹](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%94%B6%E8%97%8F%E5%A4%B9.png)

### 收货地址
![收货地址](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%94%B6%E8%B4%A7%E5%9C%B0%E5%9D%80.png)

### 我的订单
![我的订单](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%88%91%E7%9A%84%E8%AE%A2%E5%8D%95.png)

## 🧩 后端架构

![架构图](%E9%A2%84%E8%A7%88%E5%9B%BE/%E6%9E%B6%E6%9E%84%E5%9B%BE.png)



📧 联系我：2982788056@qq.com
本项目仅用于个人学习