# mblog

**Repository Path**: dddpeter/mblog

## Basic Information

- **Project Name**: mblog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-01
- **Last Updated**: 2025-10-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Spring Boot + Vue 前后端不分离应用

这是一个展示如何将 Vue 3 + Vite 前端与 Spring Boot 后端集成的示例项目，采用前后端不分离的架构。

## 技术栈

### 后端
- Spring Boot 5.3.19
- Spring Web MVC
- Jetty 服务器
- Jackson JSON 处理

### 前端
- Vue 3
- Vue Router 4
- Vite 构建工具
- Axios HTTP 客户端

## 项目结构

```
demo-spring5/
├── frontend/                 # Vue 前端项目
│   ├── src/
│   │   ├── components/      # Vue 组件
│   │   ├── App.vue         # 根组件
│   │   └── main.js         # 入口文件
│   ├── index.html          # HTML 模板
│   ├── package.json        # 前端依赖
│   └── vite.config.js      # Vite 配置
├── src/main/java/          # Java 后端代码
├── src/main/resources/static/ # 构建后的前端资源
├── build.sh               # 构建脚本
├── dev.sh                 # 开发脚本
└── pom.xml               # Maven 配置
```

## 快速开始

### 1. 安装依赖

确保已安装：
- Java 11 或更高版本
- Node.js 16 或更高版本
- Maven 3.6 或更高版本

### 2. 开发模式

```bash
# 启动开发环境（前端热重载 + 后端）
./dev.sh
```

这将同时启动：
- 前端开发服务器：http://localhost:3000
- 后端服务器：http://localhost:8080

### 3. 生产构建

```bash
# 构建整个应用
./build.sh

# 运行构建后的应用
mvn exec:java -Dexec.mainClass="com.dddpeter.app.WebApp"
```

## 开发说明

### 前端开发

前端代码位于 `frontend/` 目录，使用 Vite 作为构建工具：

```bash
cd frontend
npm install          # 安装依赖
npm run dev         # 开发模式
npm run build       # 生产构建
```

### 后端开发

后端使用 Spring Boot，主要文件：

- `WebApp.java` - 应用入口
- `AppWebConfig.java` - Web 配置
- `IndexController.java` - API 控制器
- `TestService.java` - 业务服务

### 集成说明

1. **构建集成**：Vite 构建输出到 `src/main/resources/static/` 目录
2. **路由支持**：Spring 配置了视图控制器，支持 Vue Router 的 History 模式
3. **API 代理**：开发模式下，前端通过 Vite 代理访问后端 API

## API 端点

- `GET /api/` - 获取欢迎消息
- `GET /api/health` - 健康检查

## 特性

- ✅ 前后端不分离架构
- ✅ 热重载开发体验
- ✅ 现代化 UI 设计
- ✅ 响应式布局
- ✅ 单页应用路由
- ✅ RESTful API 集成

## 部署

1. 运行 `./build.sh` 构建项目
2. 将生成的 JAR 文件部署到服务器
3. 启动应用：`java -jar target/demo-spring5-1.0-SNAPSHOT.jar`

## 许可证

MIT License