基于Spec Coding快速构建用户通知系统：10分钟搭建全栈实战项目

这次我们来看一个用 Spec Coding 构建用户通知系统的实战项目。如果你对快速搭建一个功能完整、前后端分离的后台系统感兴趣，但又不想从零开始写大量重复代码，这个项目思路值得一试。Spec Coding 的核心在于通过规范化的描述（Specification）来生成或组织代码，它能帮你快速搭建起项目骨架，把精力集中在业务逻辑的实现上。

这个项目最直接的价值是： 在10分钟内，你就能得到一个具备用户管理、消息模板、通知发送与记录查询等核心功能的可运行系统 。它不是一个简单的 Demo，而是一个结构清晰、包含数据库设计、API接口和基础前端页面的实战项目。对于想学习现代 Web 项目结构、快速验证想法或者需要一套通知系统基础框架的开发者来说，这是一个高效的起点。

本文将带你完整走通从环境准备、项目初始化、核心功能实现到接口测试的全过程。我们会重点关注如何利用 Spec Coding 的思想来定义系统规格，并基于此快速生成代码结构，同时也会详细拆解用户通知系统的几个关键模块：用户与消息模板的管理、多种发送渠道（如站内信、邮件）的集成，以及发送记录的追踪。整个过程不需要复杂的 AI 模型或显卡，一台能运行 Node.js 和 MySQL 的电脑就足够了。

1. 核心能力速览

在深入细节之前，我们先通过一个表格快速了解这个项目能做什么、需要什么，以及它的特点。

2. 适用场景与使用边界

这个项目模板适合以下几类开发者：

• 全栈学习者 ：想通过一个完整的、非玩具项目来理解前后端如何协作，以及用户、模板、发送记录等常见业务表的设计。
• 效率追求者 ：厌倦了每次新项目都从头搭建用户、权限、通知等基础模块，希望有一套可复用的基础框架。
• 想法验证者 ：有一个产品创意需要快速做出一个包含通知功能的可交互原型，用于演示或内部评审。

它能解决的问题很明确： 快速生成一个具备用户通知管理功能的可运行系统骨架 。你得到的是一个结构良好的起点，而不是一个开箱即用的企业级产品。基于这个骨架，你可以轻松地：

• 修改和扩展通知渠道（如集成短信、微信推送）。
• 增加更复杂的用户角色和权限体系。
• 美化前端界面。
• 对接真实的邮件发送服务（如 SMTP 或第三方 API）。

需要注意的是， 它不适合直接用于生产环境 。项目默认不包含高级安全特性（如完善的 JWT 鉴权、SQL 注入深度防护）、高性能消息队列、分布式部署方案等。在用于正式业务前，你必须在此基础上进行安全性加固、性能优化和充分的测试。此外，如果集成邮件等外部服务，请确保遵守相关服务商的使用条款和隐私政策。

3. 环境准备与前置条件

开始之前，请确保你的开发环境满足以下基本要求。这是项目能成功运行的基础。

1. 操作系统 ：Windows 10/11, macOS, 或 Linux (如 Ubuntu) 均可。
2. 运行时环境 （根据你选择的后端技术栈）：
   • Node.js 路线 ：安装 Node.js (版本 16 或以上) 和 npm/yarn/pnpm。
   • Python 路线 ：安装 Python (版本 3.8 或以上) 和 pip。
   • Java 路线 ：安装 JDK (版本 11 或 17) 和 Maven/Gradle。
3. 数据库 ：安装 MySQL (版本 5.7 或以上) 或 PostgreSQL。确保数据库服务正在运行，并记住 root 用户密码（或已创建一个有权限的数据库用户）。
4. 代码编辑器 ：推荐 VS Code，并安装对应语言的支持插件（如 ESLint、Pylance、Java Extension Pack）。
5. 网络 ：能正常访问互联网，用于下载依赖包。如果后续要集成邮件发送，需要能访问 SMTP 服务器或相关 API。
6. 磁盘空间 ：预留几百 MB 空间用于安装依赖和存储代码。

通用检查清单 ：

• node --version 或 python --version 或 java -version 命令能正确输出版本号。
• 数据库客户端（如 MySQL Workbench, pgAdmin）或命令行能成功连接到本地数据库实例。
• 你的 IDE 或编辑器已准备就绪。

4. 安装部署与启动方式

我们以 Node.js + Express + Vue.js 的技术栈组合为例，展示从零到一的启动过程。其他技术栈的流程思想类似：初始化项目、安装依赖、配置数据库、启动服务。

4.1 项目初始化与结构生成

首先，创建项目目录并初始化。Spec Coding 的思想在这里体现为：我们先定义好项目模块（Spec），然后根据这个结构去创建文件和目录。

# 1. 创建项目根目录
mkdir user-notification-system && cd user-notification-system

# 2. 创建后端服务目录并初始化
mkdir backend && cd backend
npm init -y
# 安装核心依赖
npm install express cors dotenv mysql2 sequelize
npm install --save-dev nodemon

# 3. 返回根目录，创建前端目录（这里使用Vue CLI快速生成，需提前全局安装）
cd ..
# 如果你已安装 @vue/cli
vue create frontend --default
# 或者使用 Vite 更轻快
# npm create vue@latest frontend -- --default

接下来，按照我们定义的“规格”，创建核心目录和文件。你可以手动创建，也可以编写一个简单的初始化脚本。

项目核心结构 (Specification) ：

user-notification-system/
├── backend/                 # 后端服务
│   ├── src/
│   │   ├── models/         # 数据模型 (User, Template, NotificationLog)
│   │   ├── routes/         # 路由定义
│   │   ├── controllers/    # 控制器逻辑
│   │   ├── services/       # 业务服务 (如邮件发送)
│   │   ├── config/         # 配置文件 (数据库)
│   │   └── app.js          # 应用入口
│   ├── package.json
│   └── .env.example
├── frontend/                # 前端应用
│   ├── src/
│   │   ├── views/          # 页面组件 (User.vue, Template.vue, Log.vue)
│   │   ├── components/     # 可复用组件
│   │   ├── router/         # 路由配置
│   │   ├── api/            # 后端接口封装
│   │   └── App.vue
│   └── package.json
└── README.md

4.2 数据库配置与模型定义

在 backend 目录下，创建 .env 文件（参考 .env.example ）配置数据库连接：

DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=notification_db

然后，在 backend/src/config/database.js 中，使用 Sequelize (ORM) 初始化连接：

const { Sequelize } = require('sequelize');
require('dotenv').config();

const sequelize = new Sequelize(
  process.env.DB_NAME,
  process.env.DB_USER,
  process.env.DB_PASSWORD,
  {
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    dialect: 'mysql',
    logging: false, // 生产环境可关闭
  }
);

module.exports = sequelize;

接着，定义核心数据模型。例如，在 backend/src/models/ 下创建 User.js , Template.js , NotificationLog.js 。

User.js 示例 ：

const { DataTypes } = require('sequelize');
const sequelize = require('../config/database');

const User = sequelize.define('User', {
  id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true },
  username: { type: DataTypes.STRING, unique: true, allowNull: false },
  email: { type: DataTypes.STRING, unique: true, allowNull: false },
  // 可以添加更多字段，如角色、状态等
}, {
  tableName: 'users',
  timestamps: true, // 自动添加 createdAt, updatedAt
});

module.exports = User;

Template.js 示例 ：

const { DataTypes } = require('sequelize');
const sequelize = require('../config/database');

const Template = sequelize.define('Template', {
  id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true },
  name: { type: DataTypes.STRING, allowNull: false },
  content: { type: DataTypes.TEXT, allowNull: false }, // 消息内容，支持变量如 {username}
  channel: { type: DataTypes.ENUM('in_app', 'email'), defaultValue: 'in_app' },
}, {
  tableName: 'templates',
  timestamps: true,
});

module.exports = Template;

4.3 启动后端服务

创建 backend/src/app.js 作为主入口文件：

const express = require('express');
const cors = require('cors');
const sequelize = require('./config/database');
const userRoutes = require('./routes/userRoutes'); // 待创建
const templateRoutes = require('./routes/templateRoutes'); // 待创建

const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());

// 同步数据库模型（开发环境，生产环境需用迁移）
sequelize.sync({ force: false }).then(() => {
  console.log('Database synced');
});

// 挂载路由
app.use('/api/users', userRoutes);
app.use('/api/templates', templateRoutes);

app.get('/', (req, res) => {
  res.send('Notification System Backend is running.');
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

在 package.json 中添加启动脚本：

{
  "scripts": {
    "start": "node src/app.js",
    "dev": "nodemon src/app.js"
  }
}

现在，可以启动后端服务了：

cd backend
npm run dev

如果看到 Server is running on http://localhost:3000 和 Database synced 的日志，说明后端基础服务启动成功，数据库连接正常。

4.4 启动前端服务

进入前端目录，安装可能需要的 UI 库（如 Element Plus 用于快速搭建界面）和 HTTP 客户端（如 axios）。

cd ../frontend
npm install axios element-plus
# 如果使用 Vue 3 + Vite，还需要安装相关插件
# npm install @element-plus/icons-vue

修改 frontend/src/main.js 引入 Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router' // 确保已配置路由

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

配置 frontend/vite.config.js (或 vue.config.js ) 代理，解决开发环境跨域：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true,
      },
    },
  },
})

启动前端开发服务器：

npm run dev

通常前端服务会运行在 http://localhost:5173 (Vite) 或 http://localhost:8080 (Vue CLI)。访问该地址，应该能看到一个基础的 Vue 应用界面。

至此，一个基于 Spec Coding 思想规划的项目骨架已经搭建并运行起来。接下来，我们为这个骨架填充血肉——实现核心业务功能。

5. 功能测试与效果验证

现在，我们开始实现并测试用户通知系统的几个核心功能模块。我们将遵循“定义接口（Spec）-> 实现后端逻辑 -> 编写前端页面 -> 联调测试”的流程。

5.1 用户管理模块

测试目的 ：验证用户信息的增删改查（CRUD）功能是否正常。

后端实现 ：

1. 在 backend/src/controllers/ 下创建 userController.js ，编写基本的 CRUD 函数。
2. 在 backend/src/routes/ 下创建 userRoutes.js ，定义 RESTful API 路由并关联控制器。

userRoutes.js 示例 ：

const express = require('express');
const router = express.Router();
const userController = require('../controllers/userController');

router.get('/', userController.getAllUsers);
router.get('/:id', userController.getUserById);
router.post('/', userController.createUser);
router.put('/:id', userController.updateUser);
router.delete('/:id', userController.deleteUser);

module.exports = router;

接口测试 ： 使用 Postman 或 curl 测试 API 是否工作。

# 创建用户
curl -X POST http://localhost:3000/api/users \
  -H "Content-Type: application/json" \
  -d '{"username":"test1", "email":"test1@example.com"}'

# 查询用户列表
curl http://localhost:3000/api/users

前端实现 ： 在 frontend/src/views/ 下创建 User.vue 组件，使用 axios 调用上述 API，并用 Element Plus 的表格和表单组件展示数据。实现用户列表展示、新增、编辑和删除功能。

判断成功 ：在前端页面能成功加载用户列表，并能通过表单创建新用户，新用户能立即出现在列表中且无报错。

5.2 消息模板管理模块

测试目的 ：验证消息模板的创建、编辑、删除，以及模板内容变量（如 {username} ）的支持。

后端实现 ：类似用户模块，创建 templateController.js 和 templateRoutes.js 。特别注意，在创建或更新模板时，需要对 content 字段进行基本的校验。

接口测试 ：

# 创建一条站内信模板
curl -X POST http://localhost:3000/api/templates \
  -H "Content-Type: application/json" \
  -d '{"name":"欢迎邮件", "content":"尊敬的{username}，欢迎加入我们！", "channel":"email"}'

前端实现 ：创建 Template.vue 组件。提供一个富文本编辑器或文本区域用于编辑模板内容。列表页展示模板名称、渠道和预览。

判断成功 ：能成功创建包含变量的模板，并能通过 API 准确获取和更新模板内容。

5.3 通知发送与记录查询

这是系统的核心功能。流程是：选择用户、选择模板、系统将模板中的变量替换为用户实际数据、通过指定渠道发送、记录发送日志。

后端实现 ：

1. 创建发送服务 ：在 backend/src/services/ 下创建 notificationService.js 。这里实现核心的发送逻辑。
   • sendNotification(userId, templateId) : 根据用户ID和模板ID，获取用户信息和模板内容，进行变量替换，然后调用对应的渠道发送器。
   • 变量替换函数：例如，将模板中的 {username} 替换为实际的 user.username 。
2. 实现渠道发送器 ：
   • inAppSender : 站内信发送。可以简单地将消息存入 NotificationLog 表，并标记为“站内信”。
   • emailSender : 邮件发送。需要集成 nodemailer 等库，配置 SMTP。 注意： 这里需要你配置真实的 SMTP 信息（如 QQ 邮箱、公司邮箱服务器），测试时请使用测试账户或邮件测试服务（如 Mailtrap）。
3. 创建日志模型和控制器 ： NotificationLog 模型记录每一次发送尝试（用户ID、模板ID、渠道、状态、发送时间、错误信息等）。并提供查询接口。

notificationService.js 关键代码片段 ：

const User = require('../models/User');
const Template = require('../models/Template');
const NotificationLog = require('../models/NotificationLog');
const { sendInAppMessage, sendEmail } = require('./senders'); // 假设的发送器

async function sendNotification(userId, templateId) {
  try {
    const user = await User.findByPk(userId);
    const template = await Template.findByPk(templateId);
    if (!user || !template) {
      throw new Error('User or Template not found');
    }

    // 变量替换
    let finalContent = template.content;
    finalContent = finalContent.replace(/{username}/g, user.username);
    finalContent = finalContent.replace(/{email}/g, user.email);
    // 可以替换更多变量...

    let result;
    if (template.channel === 'in_app') {
      result = await sendInAppMessage(userId, finalContent);
    } else if (template.channel === 'email') {
      result = await sendEmail(user.email, `Notification: ${template.name}`, finalContent);
    }

    // 记录日志
    await NotificationLog.create({
      userId,
      templateId,
      channel: template.channel,
      status: 'success',
      content: finalContent,
    });

    return { success: true, message: 'Notification sent successfully.' };
  } catch (error) {
    // 记录失败日志
    await NotificationLog.create({
      userId,
      templateId,
      channel: template.channel,
      status: 'failed',
      errorMessage: error.message,
    });
    return { success: false, message: error.message };
  }
}
module.exports = { sendNotification };

接口测试 ：

# 调用发送接口 (假设路由为 /api/notifications/send)
curl -X POST http://localhost:3000/api/notifications/send \
  -H "Content-Type: application/json" \
  -d '{"userId": 1, "templateId": 1}'

前端实现 ： 在 frontend/src/views/ 下创建 SendNotification.vue 和 NotificationLog.vue 。

• SendNotification.vue : 提供两个下拉选择框（用户、模板）和一个发送按钮。点击按钮后调用发送 API。
• NotificationLog.vue : 以表格形式展示 NotificationLog 数据，包括发送时间、用户、模板、渠道、状态，支持按状态筛选。

判断成功 ：

1. 在 SendNotification 页面选择用户和模板，点击发送，前端收到成功响应。
2. 在 NotificationLog 页面能看到一条状态为“success”的新记录。
3. （如果测试邮件）登录测试邮箱，能收到对应的邮件，且邮件内容中的变量已被正确替换。

5.4 批量发送任务

测试目的 ：验证系统是否能同时向多个用户发送通知。

实现思路 ：前端提供一个多选用户组件，后端接收一个用户ID数组，然后循环调用 sendNotification 服务。 注意： 直接循环发送对于大量用户是低效且可能阻塞请求的，这里仅演示功能。生产环境应引入消息队列（如 Bull）进行异步处理。

后端接口 ：

// 在 notificationController.js 中
async function sendBatchNotifications(req, res) {
  const { userIds, templateId } = req.body;
  const results = [];
  for (const userId of userIds) {
    const result = await notificationService.sendNotification(userId, templateId);
    results.push({ userId, ...result });
  }
  res.json({ success: true, results });
}

前端实现 ：在 SendNotification.vue 中，将用户选择器从单选改为支持多选（如 Element Plus 的 el-select 多选模式），并将选中的用户ID数组提交到批量发送接口。

判断成功 ：选择多个用户和一个模板，点击发送后，日志表中会为每个用户生成一条独立的发送记录。

6. 接口 API 与批量任务

本节详细说明系统提供的核心 API 和批量任务的设计思路，方便你进行二次开发或集成。

6.1 核心 API 列表

6.2 API 调用示例（Python）

你可以使用任何语言调用这些 API。以下是一个 Python 示例，用于批量创建测试用户并发送通知。

import requests
import json

BASE_URL = "http://localhost:3000/api"

# 1. 创建几个测试用户
users_to_create = [
    {"username": "alice", "email": "alice@test.com"},
    {"username": "bob", "email": "bob@test.com"},
    {"username": "charlie", "email": "charlie@test.com"},
]

user_ids = []
for user_data in users_to_create:
    response = requests.post(f"{BASE_URL}/users", json=user_data)
    if response.status_code == 200:
        user_id = response.json().get('id')
        user_ids.append(user_id)
        print(f"Created user: {user_data['username']} (ID: {user_id})")
    else:
        print(f"Failed to create user {user_data['username']}: {response.text}")

# 2. 创建一个邮件模板
template_data = {
    "name": "系统公告",
    "content": "亲爱的{username}，系统将于今晚10点进行维护，请提前保存工作。",
    "channel": "email"
}
template_resp = requests.post(f"{BASE_URL}/templates", json=template_data)
if template_resp.status_code == 200:
    template_id = template_resp.json().get('id')
    print(f"Created template (ID: {template_id})")
else:
    print(f"Failed to create template: {template_resp.text}")
    exit()

# 3. 批量发送通知
if user_ids and template_id:
    batch_payload = {
        "userIds": user_ids,
        "templateId": template_id
    }
    batch_resp = requests.post(f"{BASE_URL}/notifications/send-batch", json=batch_payload)
    print(f"Batch send result: {batch_resp.json()}")

# 4. 查询发送日志
log_resp = requests.get(f"{BASE_URL}/notification-logs")
if log_resp.status_code == 200:
    logs = log_resp.json()
    print(f"Total logs: {len(logs)}")
    for log in logs[:5]:  # 打印前5条
        print(f"- User {log['userId']}, Status: {log['status']}, Time: {log['createdAt']}")

6.3 批量任务的生产级建议

上述演示的批量发送是同步循环，不适合大规模任务。对于生产环境，建议：

1. 引入消息队列 ：使用 Bull (Node.js)、Celery (Python) 或 Spring Batch (Java)。将发送任务推入队列，由后台工作进程异步处理。
2. 任务状态管理 ：创建一个 BatchTask 表，记录批量任务的元信息（创建人、模板、总用户数、成功/失败数、状态、创建时间、完成时间）。
3. 进度查询 ：提供 API 查询批量任务的执行进度。
4. 失败重试与告警 ：对发送失败的消息进行重试，并设置失败阈值，超过后触发告警（如邮件通知管理员）。

7. 资源占用与性能观察

本项目是典型的 Web 应用，资源消耗主要集中在数据库和服务运行时。

1. 内存与 CPU 占用 ：

   • 后端服务 ：一个基础的 Node.js Express 服务，在空闲时内存占用通常在 100-200 MB。当处理批量发送（尤其是同步循环时），CPU 和内存使用会短暂上升。使用 pm2 或系统监控工具观察。
   • 前端开发服务器 ：Vite 或 Webpack 开发服务器内存占用约 200-300 MB。
   • 数据库 ：MySQL 或 PostgreSQL 默认安装后，空闲内存占用在 200-500 MB 左右，具体取决于配置。

2. 数据库连接池 ：确保在 Sequelize 配置中设置了合理的连接池参数，避免连接数过多或过少影响性能。

   // backend/src/config/database.js
   const sequelize = new Sequelize(/* ... */, {
     // ... other options
     pool: {
       max: 10, // 最大连接数
       min: 0,
       acquire: 30000,
       idle: 10000
     }
   });
   

3. 性能瓶颈与优化 ：

   • 同步批量发送 ：这是最大的性能瓶颈。用户数稍多（如上百）就会导致 HTTP 请求超时。 务必改为异步队列处理 。
   • N+1 查询问题 ：在查询日志列表时，如果关联查询用户和模板信息，要使用 ORM 的 include 选项一次性加载，避免循环中多次查询数据库。
   • 前端资源 ：如果通知列表数据量巨大，前端表格应启用分页或虚拟滚动，避免一次性渲染成千上万条数据导致页面卡顿。

监控建议 ：在开发阶段，可以简单使用 console.time / console.timeEnd 来测量关键接口的响应时间。对于生产环境，需要接入完整的 APM（应用性能监控）工具。

8. 常见问题与排查方法

在搭建和运行过程中，你可能会遇到以下问题。这里提供排查思路。

9. 最佳实践与使用建议

基于此项目模板进行进一步开发时，遵循以下建议可以让你的系统更健壮、更易维护。

1. 从最小功能开始验证 ：不要一开始就实现所有功能。先确保“创建用户 -> 创建模板 -> 发送一条站内信”这个最小闭环能跑通，再逐步添加邮件发送、批量任务、前端美化等。
2. 配置管理 ：敏感信息（数据库密码、SMTP 密码、API Keys）永远不要硬编码在代码中。坚持使用 .env 文件和环境变量。并将 .env 加入 .gitignore 。
3. 代码结构清晰 ：保持现有的 MVC 或分层结构。业务逻辑尽量放在 services 层，控制器只负责接收请求和返回响应。这有利于后续单元测试。
4. 错误处理与日志 ：在控制器和服务中做好 try-catch，返回友好的错误信息给前端。使用 winston 或 log4js 等日志库记录关键操作和错误，便于排查问题。
5. 前端状态管理 ：当应用变得复杂时（如多个页面共享用户状态），考虑引入 Pinia (Vue 3) 或 Vuex 进行集中式状态管理。
6. 安全性增强 ：
   • API 认证 ：为管理接口添加 JWT 或 Session 认证。
   • 输入验证 ：使用 Joi 或 express-validator 对所有 API 输入进行严格的验证和清理，防止 SQL 注入和 XSS 攻击。
   • 密码安全 ：如果用户模块需要密码，务必使用 bcrypt 等库进行哈希加盐存储，切勿明文存储。
7. 生产部署 ：
   • 使用 pm2 或 docker 管理 Node.js 进程。
   • 前端使用 npm run build 构建生产版本，并通过 Nginx 等 Web 服务器提供静态文件服务。
   • 配置数据库的定期备份策略。
8. 合规与授权 ：如果系统用于发送真实的营销或通知邮件，务必遵守《网络安全法》和《个人信息保护法》等相关法规，获取用户同意（如订阅），并提供明确的退订渠道。

10. 总结与下一步

通过这个实战项目，我们实践了如何用 Spec Coding 的思想来高效启动一个全栈项目。核心不是死记硬背代码，而是掌握“定义规格 -> 生成骨架 -> 填充逻辑”的流程。这个用户通知系统项目麻雀虽小，五脏俱全，涵盖了数据库设计、RESTful API、前后端交互、第三方服务集成等常见开发环节。

最值得尝试的点 在于，你可以基于这个清晰的骨架，快速将其改造成任何需要后台管理、用户和消息功能的应用，比如工单系统、内容发布平台、内部审批流等。

最先应该验证的功能 就是“站内信”的完整流程。因为它不依赖任何外部服务（如 SMTP），最容易跑通，能立刻给你正向反馈，建立信心。

最容易踩的坑 有两个：一是数据库连接配置错误，二是邮件发送的 SMTP 配置。按照第 8 节的排查方法，大部分问题都能解决。

后续可以扩展的方向 非常多：

• 增加发送渠道 ：集成短信（阿里云、腾讯云）、微信模板消息、企业微信/钉钉机器人、App 推送等。
• 强化模板功能 ：支持更复杂的变量逻辑、条件判断，甚至引入简单的模板引擎。
• 实现用户分组 ：将用户按部门、标签分组，支持按组发送通知。
• 添加数据看板 ：使用 ECharts 等库，在前端展示通知发送量、成功率、渠道分布等统计图表。
• 接入工作流 ：将通知发送作为一个节点，接入更复杂的业务流程中。

建议你将这个项目代码保存为你的个人“项目启动模板”，下次需要类似功能时，直接在此基础上修改，能节省大量初始化时间。动手做一遍，远比只看文档更有收获。如果在实现过程中遇到问题，多查阅官方文档、在技术社区搜索错误信息，大部分难题都有现成的解决方案。