# systemDynamicModelsAgent

**Repository Path**: MpLebron/system-dynamic-models-agent

## Basic Information

- **Project Name**: systemDynamicModelsAgent
- **Description**: 前后端分离Web应用项目模板 - Vue.js 3 + Node.js/Express + MongoDB
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-09
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前后端分离 Web 应用项目

这是一个最基础的前后端分离 Web 应用项目模板。采用 Vue.js 3 + Node.js/Express 技术栈，提供基本的 CRUD 操作功能。

## 项目结构

```
systemDynamicModelsAgent/
├── client/                     # 前端项目
│   ├── src/
│   │   ├── components/         # 可复用组件
│   │   ├── views/             # 页面视图
│   │   │   ├── Home.vue       # 首页
│   │   │   └── Users.vue      # 用户管理页面
│   │   ├── store/             # 状态管理
│   │   │   └── userStore.js   # 用户状态管理
│   │   ├── services/          # API 服务层
│   │   │   ├── api.js         # Axios 配置
│   │   │   └── userService.js # 用户 API 服务
│   │   ├── router/            # 路由配置
│   │   │   └── index.js       # 路由定义
│   │   ├── main.js            # 应用入口文件
│   │   ├── App.vue            # 根组件
│   │   └── style.css          # 全局样式
│   ├── public/                # 静态资源
│   ├── package.json           # 项目依赖和脚本
│   ├── vite.config.js         # Vite 配置
│   ├── tailwind.config.js     # TailwindCSS 配置
│   └── postcss.config.js      # PostCSS 配置
└── server/                    # 后端项目
    ├── controllers/           # 控制器层
    │   └── userController.js  # 用户控制器
    ├── models/               # 数据模型
    │   └── User.js           # 用户模型
    ├── routes/               # 路由定义
    │   └── userRoutes.js     # 用户路由
    ├── config/               # 配置文件
    │   └── database.js       # 数据库配置
    ├── .env                  # 环境变量
    ├── index.js              # 服务器入口文件
    └── package.json          # 项目依赖和脚本
```

## 技术栈

### 前端 (Frontend)

- **Vue.js 3.3.4** - 现代前端框架，使用 Composition API
- **Vue Router 4.2.0** - 官方路由管理器
- **Pinia 2.0.36** - 状态管理库
- **Vite 4.3.9** - 现代前端构建工具
- **TailwindCSS 3.3.2** - 实用优先的 CSS 框架
- **Axios 1.4.0** - HTTP 客户端，用于 API 请求

### 后端 (Backend)

- **Node.js 18** - JavaScript 运行时环境
- **Express.js 4.18.2** - Web 应用框架
- **MongoDB** - NoSQL 文档数据库
- **Mongoose 7.0.3** - MongoDB 对象建模工具
- **dotenv 16.0.1** - 环境变量管理
- **cors 2.8.5** - 跨域资源共享

## 快速开始

### 环境要求

- Node.js 18 或更高版本
- MongoDB 4.4 或更高版本
- npm 或 yarn

### 安装步骤

1. **克隆项目**

   ```bash
   git clone <repository-url>
   cd systemDynamicModelsAgent
   ```

2. **安装前端依赖**

   ```bash
   cd client
   npm install
   ```

3. **安装后端依赖**

   ```bash
   cd ../server
   npm install
   ```

4. **配置环境变量**

   ```bash
   # 在 server 目录下已有 .env 文件，包含基本配置
   # 请根据你的 MongoDB 配置修改 MONGODB_URI
   ```

5. **启动 MongoDB**

   ```bash
   # 请确保 MongoDB 服务正在运行
   # macOS (使用 Homebrew)
   brew services start mongodb-community

   # Windows/Linux
   mongod
   ```

6. **启动后端服务**

   ```bash
   # 在 server 目录下
   npm run dev
   ```

7. **启动前端开发服务器**

   ```bash
   # 在 client 目录下
   npm run dev
   ```

8. **访问应用**
   - 前端应用: http://localhost:5178
   - 后端 API: http://localhost:3002

## 功能特性

### 已实现功能

- ✅ **用户管理** - 完整的 CRUD 操作

  - 查看用户列表
  - 添加新用户
  - 编辑用户信息
  - 删除用户
  - 数据验证

- ✅ **响应式设计** - 使用 TailwindCSS 实现
- ✅ **状态管理** - 使用 Pinia 管理全局状态
- ✅ **路由管理** - 支持 SPA 导航
- ✅ **API 拦截器** - 统一请求/响应处理
- ✅ **错误处理** - 前后端统一错误处理
- ✅ **开发代理** - Vite 开发服务器代理配置

### API 接口

基础 URL: `http://localhost:3002`

#### 用户相关接口

- `GET /users` - 获取所有用户
- `GET /users/:id` - 获取单个用户
- `POST /users` - 创建用户
- `PUT /users/:id` - 更新用户
- `DELETE /users/:id` - 删除用户
- `DELETE /users` - 批量删除用户

#### 请求示例

```javascript
// 创建用户
POST /users
{
  "name": "张三",
  "email": "zhangsan@example.com",
  "age": 25
}

// 响应
{
  "success": true,
  "data": {
    "_id": "...",
    "name": "张三",
    "email": "zhangsan@example.com",
    "age": 25,
    "createdAt": "2023-...",
    "updatedAt": "2023-..."
  },
  "message": "用户创建成功"
}
```

## 开发指南

### 数据模型

#### User 模型

```javascript
{
  name: String,      // 姓名 (必填, 最大50字符)
  email: String,     // 邮箱 (必填, 唯一, 格式验证)
  age: Number,       // 年龄 (必填, 1-120)
  createdAt: Date,   // 创建时间 (自动生成)
  updatedAt: Date    // 更新时间 (自动生成)
}
```

### 前端组件

- **App.vue** - 根组件，包含导航栏和路由出口
- **Home.vue** - 首页，展示项目介绍
- **Users.vue** - 用户管理页面，包含列表、添加、编辑、删除功能

### 状态管理

使用 Pinia 进行状态管理：

```javascript
// userStore.js
const userStore = useUserStore();

// 获取用户列表
await userStore.fetchUsers();

// 创建用户
await userStore.createUser(userData);

// 更新用户
await userStore.updateUser(id, userData);

// 删除用户
await userStore.deleteUser(id);
```

### 样式系统

项目使用 TailwindCSS 作为 CSS 框架：

- 响应式设计
- 实用优先的类名
- 现代化的 UI 组件
- 统一的设计系统

## 部署

### 前端部署

```bash
cd client
npm run build
# 将 dist 目录部署到静态文件服务器
```

### 后端部署

```bash
cd server
npm start
# 或使用 PM2 等进程管理器
```

### 环境变量配置

生产环境需要配置以下环境变量：

```bash
NODE_ENV=production
PORT=3002
MONGODB_URI=mongodb://your-mongodb-url/webapp_db
```

## 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 许可证

MIT License

## 联系方式

如有问题或建议，请创建 Issue 或联系项目维护者。

---

**注意**: 这是一个基础模板项目，适合学习和小型项目使用。在生产环境中，建议添加更多的安全措施、测试、日志记录等功能。