2025-10-08 00:43:15 +08:00
|
|
|
# Mini Email Sender
|
|
|
|
|
|
|
|
|
|
一个简易的邮件发送应用,用户可以通过前端界面填写邮件信息并发送邮件。
|
|
|
|
|
|
2025-10-08 00:45:15 +08:00
|
|
|

|
|
|
|
|
|
2025-10-08 00:43:15 +08:00
|
|
|
## 项目介绍
|
|
|
|
|
|
|
|
|
|
Mini Email Sender 是一个前后端分离的邮件发送应用,采用现代化的技术栈构建。用户可以通过直观的前端界面快速发送邮件,后端负责处理邮件发送逻辑。
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
|
|
|
|
|
### 后端 (Spring Boot)
|
|
|
|
|
- **框架**: Spring Boot 3.x
|
|
|
|
|
- **语言**: Java 21
|
|
|
|
|
- **邮件发送**: Spring Mail + JavaMail
|
|
|
|
|
- **构建工具**: Maven
|
|
|
|
|
|
|
|
|
|
### 前端 (Vue.js)
|
|
|
|
|
- **框架**: Vue 3 + Vite
|
|
|
|
|
- **UI组件库**: Element Plus
|
|
|
|
|
- **HTTP客户端**: Axios
|
|
|
|
|
- **样式**: Scss + Custom CSS
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
.
|
|
|
|
|
├── backend/ # 后端代码
|
|
|
|
|
│ ├── src/main/java/cn/hezhaohui/mail/
|
|
|
|
|
│ │ ├── controller/ # 控制器层
|
|
|
|
|
│ │ ├── service/ # 服务层
|
|
|
|
|
│ │ ├── config/ # 配置类
|
|
|
|
|
│ │ └── entity/ # 实体类
|
|
|
|
|
│ └── pom.xml # Maven配置文件
|
|
|
|
|
├── frontend/ # 前端代码
|
|
|
|
|
│ ├── src/
|
|
|
|
|
│ │ ├── components/ # 组件目录
|
|
|
|
|
│ │ │ └── EmailSender.vue # 邮件发送组件
|
|
|
|
|
│ │ ├── App.vue # 根组件
|
|
|
|
|
│ │ └── main.js # 应用入口
|
|
|
|
|
│ └── package.json # 前端依赖配置
|
|
|
|
|
└── README.md # 项目说明文档
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 功能特性
|
|
|
|
|
|
|
|
|
|
### 前端功能
|
|
|
|
|
- 邮件发送表单(收件人、标题、内容)
|
|
|
|
|
- 表单验证(邮箱格式、必填项)
|
|
|
|
|
- 响应式UI界面
|
|
|
|
|
- 发送状态提示
|
|
|
|
|
- 重置表单功能
|
|
|
|
|
|
|
|
|
|
### 后端功能
|
|
|
|
|
- RESTful API接口
|
|
|
|
|
- 邮件发送服务
|
|
|
|
|
- 基本的错误处理
|
|
|
|
|
- 日志记录
|
|
|
|
|
|
|
|
|
|
## 快速开始
|
|
|
|
|
|
|
|
|
|
### 环境要求
|
|
|
|
|
- Java 21
|
|
|
|
|
- Node.js 16+
|
|
|
|
|
- Maven 3.6+
|
|
|
|
|
|
|
|
|
|
### 后端启动
|
|
|
|
|
|
|
|
|
|
1. 进入后端目录:
|
|
|
|
|
```bash
|
|
|
|
|
cd backend
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
2. 编译项目:
|
|
|
|
|
```bash
|
|
|
|
|
mvn clean compile
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
3. 运行应用:
|
|
|
|
|
```bash
|
|
|
|
|
mvn spring-boot:run
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
默认端口:`8080`
|
|
|
|
|
|
|
|
|
|
### 前端启动
|
|
|
|
|
|
|
|
|
|
1. 进入前端目录:
|
|
|
|
|
```bash
|
|
|
|
|
cd frontend
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
2. 安装依赖:
|
|
|
|
|
```bash
|
|
|
|
|
npm install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
3. 启动开发服务器:
|
|
|
|
|
```bash
|
|
|
|
|
npm run dev
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
默认端口:`3000`
|
|
|
|
|
|
|
|
|
|
## API接口
|
|
|
|
|
|
|
|
|
|
### 发送邮件
|
|
|
|
|
- **URL**: `/api/email/send`
|
|
|
|
|
- **方法**: `POST`
|
|
|
|
|
- **参数**:
|
|
|
|
|
- `to` (string, 必填): 收件人邮箱地址
|
|
|
|
|
- `subject` (string, 必填): 邮件标题
|
|
|
|
|
- `content` (string, 必填): 邮件内容
|
|
|
|
|
- **响应**:
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"status": 200,
|
|
|
|
|
"message": "success"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 配置说明
|
|
|
|
|
|
|
|
|
|
### 后端邮件配置
|
|
|
|
|
需要在 `application.properties` 或 `application.yml` 中配置SMTP服务器信息:
|
|
|
|
|
```yaml
|
|
|
|
|
spring:
|
|
|
|
|
mail:
|
|
|
|
|
host: smtp.example.com
|
|
|
|
|
port: 587
|
|
|
|
|
username: your-email@example.com
|
|
|
|
|
password: your-password
|
|
|
|
|
properties:
|
|
|
|
|
mail:
|
|
|
|
|
smtp:
|
|
|
|
|
auth: true
|
|
|
|
|
starttls:
|
|
|
|
|
enable: true
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|