# AIWebGen

**Repository Path**: leo_engineer/aiweb-gen

## Basic Information

- **Project Name**: AIWebGen
- **Description**: 这是一个由AI生成的官网系统
- **Primary Language**: Java
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Future Mobility 公司官网

仿照九号电动车官网风格打造的公司官网项目，采用深色主题设计，展示智能电动车产品。

## 技术栈

### 前端
- Vue 3 + TypeScript
- Vue Router 4
- Pinia
- Element Plus
- Tailwind CSS
- Axios
- GSAP（动画库）
- Swiper（轮播组件）

### 后端
- Spring Boot 3.2
- Spring Security
- MyBatis-Plus 3.5.16
- JWT Authentication
- MySQL 8.0
- Maven

## 项目结构

```
aiweb-gen/
├── frontend/          # Vue3 前端项目
│   ├── src/
│   │   ├── components/   # 公共组件
│   │   ├── views/        # 页面视图
│   │   ├── stores/       # Pinia 状态管理
│   │   ├── router/       # 路由配置
│   │   └── assets/       # 静态资源
│   ├── .env.development  # 开发环境配置
│   ├── .env.test         # 测试环境配置
│   ├── .env.production   # 生产环境配置
│   └── package.json
├── backend/           # Spring Boot 后端项目
│   ├── src/main/java/
│   │   └── com/future/aiweb/
│   │       ├── controller/   # API控制器
│   │       ├── service/      # 业务逻辑（接口+实现）
│   │       ├── mapper/       # MyBatis-Plus Mapper
│   │       ├── entity/       # 实体类
│   │       ├── dto/          # 数据传输对象
│   │       ├── config/       # 配置类
│   │       ├── security/     # 安全配置
│   │       └── repository/   # 数据访问层（预留）
│   ├── src/main/resources/
│   │   ├── db/               # 数据库脚本
│   │   │   ├── schema.sql    # 建表脚本
│   │   │   └── data.sql      # 初始化数据
│   │   ├── application.yml       # 主配置
│   │   ├── application-dev.yml   # 开发环境
│   │   ├── application-test.yml  # 测试环境
│   │   ├── application-prod.yml  # 生产环境
│   │   └── logback-spring.xml    # 日志配置
│   ├── Dockerfile
│   └── pom.xml
├── docker-compose.yml # Docker编排
└── README.md
```

## 功能特性

### 前端功能
- 响应式设计，支持移动端和桌面端
- 深色主题UI，仿九号电动车官网风格
- 首页轮播、产品展示、新闻资讯
- 产品详情页，支持图片画廊
- 关于我们、联系我们页面
- 后台管理系统（产品管理、新闻管理）

### 后端功能
- RESTful API 设计
- MVC 分层架构（Controller-Service-Mapper）
- JWT 身份认证
- MyBatis-Plus 持久化层
- 多环境配置隔离（dev/test/prod）
- 产品 CRUD 操作
- 新闻 CRUD 操作

## 环境要求

- **Java**: 17+
- **Node.js**: 18+
- **MySQL**: 8.0+
- **Maven**: 3.8+

## 快速开始

### 方式1：本地开发环境

#### 1. 启动MySQL数据库

```bash
# 创建数据库
mysql -u root -p < backend/src/main/resources/db/schema.sql
mysql -u root -p aiweb_dev < backend/src/main/resources/db/data.sql
```

#### 2. 启动后端服务

```bash
cd backend

# 方式A：使用Maven
mvn clean install
mvn spring-boot:run

# 方式B：使用环境变量
export MYSQL_HOST=localhost
export MYSQL_PORT=3306
export MYSQL_DATABASE=aiweb_dev
export MYSQL_USERNAME=root
export MYSQL_PASSWORD=your_password
mvn spring-boot:run
```

后端服务将运行在 http://localhost:8080

#### 3. 启动前端服务

```bash
cd frontend
npm install
npm run dev
```

前端服务将运行在 http://localhost:3000

### 方式2：Docker Compose（推荐）

```bash
# 一键启动所有服务（MySQL + 后端）
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

# 重新构建
docker-compose up -d --build
```

## 多环境配置

### 后端环境配置

| 环境 | 配置文件 | 数据库 | 启动命令 |
|------|----------|--------|----------|
| 开发 | application-dev.yml | MySQL (本地/Docker) | `mvn spring-boot:run` |
| 测试 | application-test.yml | MySQL (测试服务器) | `mvn spring-boot:run -Dspring.profiles.active=test` |
| 生产 | application-prod.yml | MySQL (生产集群) | `mvn spring-boot:run -Dspring.profiles.active=prod` |

### 前端环境配置

```bash
# 开发环境
npm run dev

# 构建不同环境
npm run build:dev    # 开发环境
npm run build:test   # 测试环境
npm run build:prod   # 生产环境
```

### 环境变量

#### 后端环境变量

```bash
# 数据库配置
export MYSQL_HOST=localhost
export MYSQL_PORT=3306
export MYSQL_DATABASE=aiweb_dev
export MYSQL_USERNAME=root
export MYSQL_PASSWORD=your_password

# JWT配置
export JWT_SECRET=your-secret-key
export JWT_EXPIRATION=86400000

# CORS配置
export CORS_ALLOWED_ORIGINS=http://localhost:3000

# 日志路径
export LOG_PATH=/var/log/aiweb
```

#### 前端环境变量

```bash
# .env.development / .env.test / .env.production
VITE_API_BASE_URL=http://localhost:8080
VITE_APP_TITLE=Future Mobility
VITE_APP_DEBUG=true
```

## 默认账号

- **用户名**：admin
- **密码**：admin123

## API 文档

### 公开接口

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/products | 获取产品列表 |
| GET | /api/products/{id} | 获取产品详情 |
| GET | /api/news | 获取新闻列表 |
| GET | /api/news/{id} | 获取新闻详情 |

### 管理接口（需要认证）

| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/admin/login | 管理员登录 |
| POST | /api/products | 创建产品 |
| PUT | /api/products/{id} | 更新产品 |
| DELETE | /api/products/{id} | 删除产品 |
| POST | /api/news | 创建新闻 |
| PUT | /api/news/{id} | 更新新闻 |
| DELETE | /api/news/{id} | 删除新闻 |

## 页面预览

### 前台页面
- **首页** - 全屏轮播、核心优势、热门产品、最新资讯
- **产品页** - 产品列表、分类筛选
- **产品详情** - 图片画廊、技术参数、价格、相关产品推荐
- **关于我们** - 公司介绍、发展历程、核心价值观、团队
- **新闻资讯** - 新闻列表、分类筛选
- **联系我们** - 联系表单、服务中心地图

### 后台页面
- **登录页** - JWT认证
- **仪表盘** - 数据统计、快捷操作
- **产品管理** - 产品列表、添加/编辑/删除
- **新闻管理** - 新闻列表、发布/编辑/删除

## 设计特点

- **深色主题**：以黑色为主色调，橙色为品牌色
- **大图展示**：全屏轮播图展示产品
- **玻璃拟态**：使用 backdrop-blur 效果
- **流畅动画**：GSAP 实现页面过渡和交互动画
- **响应式布局**：适配各种屏幕尺寸

## 数据库设计

### 用户表 (users)
- 管理员账号管理
- 支持逻辑删除

### 产品表 (products)
- 产品信息管理
- 支持新品/热销标记
- 支持逻辑删除

### 新闻表 (news)
- 新闻资讯管理
- 支持草稿/发布状态
- 浏览量统计
- 支持逻辑删除

## 部署指南

### 生产环境部署

1. **准备环境**
   ```bash
   # 安装Java 17
   # 安装MySQL 8.0
   # 安装Nginx（前端部署）
   ```

2. **配置数据库**
   ```bash
   mysql -u root -p < backend/src/main/resources/db/schema.sql
   ```

3. **部署后端**
   ```bash
   cd backend
   mvn clean package -DskipTests -Dspring.profiles.active=prod
   java -jar target/aiweb-backend-1.0.0.jar
   ```

4. **部署前端**
   ```bash
   cd frontend
   npm run build:prod
   # 将dist目录部署到Nginx
   ```

### Docker部署

```bash
# 构建镜像
docker build -t aiweb-backend ./backend

# 运行容器
docker run -d \
  -p 8080:8080 \
  -e MYSQL_HOST=mysql \
  -e MYSQL_USERNAME=root \
  -e MYSQL_PASSWORD=password \
  aiweb-backend
```

## 开发团队

- 架构：Spring Boot 3 + Vue 3
- 设计：仿九号电动车官网风格
- 特色：MVC分层、MyBatis-Plus、多环境隔离

## 许可证

MIT License