# 软件开发工程师提示词（MySQL & Node.js 16.20.2 优化版）

## 项目概述
开发一个前后端分离的 Web 应用，前端使用 Vue.js（3.x Composition API）、HTML5、JavaScript（ES6+）、CSS，后端使用 Node.js（版本 16.20.2，Express 框架），数据库为 MySQL。所有数据必须从 MySQL 动态获取，不允许硬编码或静态数据。前后端通过统一的 RESTful API 进行数据交互，使用 fetch 方法进行 HTTP 请求。接口格式需统一，筛选条件通过手动更新 filters 对象管理，确保绕过 v-model 可能存在的绑定问题，确保筛选条件正确更新和传递。

## 技术栈
- **前端**：Vue.js (3.x Composition API)、HTML5、JavaScript (ES6+)、CSS
- **后端**：Node.js (16.20.2, Express 框架)、Sequelize (6.x) 或 mysql2 (2.x)
- **数据库**：MySQL（云服务如 AWS RDS，推荐 8.0.x）
- **数据交互**：使用 fetch 方法，通过 RESTful API 进行前后端通信
- **接口格式**：JSON，统一响应结构
- **筛选条件管理**：手动更新 filters 对象，避免 v-model 绑定问题
- **开发工具**：ESLint（前端）、StandardJS（后端）、Git

## 详细要求

### 1. 前端开发
- **框架**：使用 Vue.js (3.x Composition API) 构建响应式界面。
- **数据获取**：
  - 使用 fetch 方法从后端 API 获取数据。
  - 所有数据（如列表、筛选结果等）必须从 MySQL 动态加载，不允许硬编码或静态数据。
- **筛选条件管理**：
  - 维护一个 reactive 的 filters 对象，用于存储筛选条件（如搜索关键词、分类、日期范围等）。
  - 通过事件处理程序手动更新 filters 对象（如 `filters.key = value`），避免直接使用 v-model 绑定可能导致的响应式问题。
  - 每次筛选条件更新后，触发 API 请求，将 filters 对象作为查询参数发送到后端。
- **界面**：
  - 使用 HTML5 和 CSS 构建现代化、响应式布局。
  - 确保组件模块化，遵循 Vue 组件化开发规范。
- **接口调用**：
  - 使用 fetch 方法发送 GET/POST 请求，统一处理 API 响应。
  - 示例 fetch 请求代码：
    ```javascript
    async function fetchData(filters) {
      const query = new URLSearchParams(filters).toString();
      const response = await fetch(`/api/data?${query}`, {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      });
      const result = await response.json();
      return result;
    }
    ```

### 2. 后端开发
- **框架**：使用 Node.js 16.20.2 和 Express 框架（4.x，兼容 Node.js 16）构建 RESTful API。
- **数据库交互**：
  - 连接 MySQL，所有数据从数据库动态查询。
  - 使用 mysql2 (2.x) 或 Sequelize (6.x) 管理 MySQL 交互，兼容 Node.js 16.20.2。
  - 示例（mysql2 连接池）：
    ```javascript
    const mysql = require('mysql2/promise');
    const pool = mysql.createPool({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: 'project_db',
      waitForConnections: true,
      connectionLimit: 10,
      queueLimit: 0
    });
    ```
  - 示例（Sequelize 模型）：
    ```javascript
    const { Sequelize, DataTypes } = require('sequelize');
    const sequelize = new Sequelize({
      dialect: 'mysql',
      host: process.env.DB_HOST,
      username: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: 'project_db'
    });
    const Data = sequelize.define('Data', {
      id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
      name: { type: DataTypes.STRING, allowNull: false },
      category: { type: DataTypes.STRING },
      date: { type: DataTypes.DATE }
    }, {
      indexes: [{ fields: ['name'] }, { fields: ['category'] }]
    });
    ```
- **API 设计**：
  - 统一接口路径，如 `/api/data`。
  - 支持查询 parameters（如 `?key=value`）处理筛选条件。
  - 统一响应格式：
    ```json
    {
      "status": "success",
      "data": [],
      "message": ""
    }
    ```
  - 示例 API 路由（使用 mysql2）：
    ```javascript
    const express = require('express');
    const mysql = require('mysql2/promise');
    const app = express();

    const pool = mysql.createPool({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: 'project_db'
    });

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

    app.get('/api/data', async (req, res) => {
      try {
        const { name, category } = req.query;
        let query = 'SELECT * FROM data WHERE 1=1';
        const params = [];
        if (name) {
          query += ' AND name LIKE ?';
          params.push(`%${name}%`);
        }
        if (category) {
          query += ' AND category = ?';
          params.push(category);
        }
        const [rows] = await pool.query(query, params);
        res.json({ status: 'success', data: rows, message: '' });
      } catch (error) {
        res.status(500).json({ status: 'error', data: [], message: error.message });
      }
    });

    app.listen(3000, () => console.log('Server running on port 3000'));
    ```
- **安全性**：
  - 使用参数化查询防止 SQL 注入。
  - 使用环境 variables（`dotenv` 包，兼容 Node.js 16.20.2）存储数据库连接信息。
  - 示例 `.env` 文件：
    ```env
    DB_HOST=localhost
    DB_USER=root
    DB_PASSWORD=your_password
    DB_DATABASE=project_db
    ```

### 3. 统一接口格式
- **请求格式**：
  - GET 请求：通过 URL 查询参数传递 filters（如 `/api/data?name=example&category=test`）。
  - POST 请求：通过 JSON body 传递 filters。
- **响应格式**：
  - 成功响应：
    ```json
    {
      "status": "success",
      "data": [/* 数据数组 */],
      "message": ""
    }
    ```
  - 错误响应：
    ```json
    {
      "status": "error",
      "data": [],
      "message": "错误描述"
    }
    ```

### 4. 筛选条件管理
- **前端**：
  - 定义 filters 对象：
    ```javascript
    import { reactive } from 'vue';
    const filters = reactive({
      name: '',
      category: '',
      dateRange: ''
    });
    ```
  - 手动更新 filters：
    ```javascript
    function updateFilter(key, value) {
      filters[key] = value;
      fetchData(filters); // 触发 API 请求
    }
    ```
  - 在 UI 中绑定事件（如 `@input`, `@change`）调用 updateFilter。
- **后端**：
  - 解析查询参数或请求 body，转换为 MySQL 查询条件。
  - 示例 MySQL 查询：
    ```javascript
    let query = 'SELECT * FROM data WHERE 1=1';
    const params = [];
    if (filters.name) {
      query += ' AND name LIKE ?';
      params.push(`%${filters.name}%`);
    }
    if (filters.category) {
      query += ' AND category = ?';
      params.push(filters.category);
    }
    const [rows] = await pool.query(query, params);
    ```

### 5. 其他要求
- **Node.js 16.20.2 兼容性**：
  - 使用兼容的依赖版本，如 `express@4.18.x`, `mysql2@2.3.x`, `sequelize@6.29.x`, `cors@2.8.x`.
  - 避免使用 Node.js 18+ 的新特性（如内置 `fetch`）。
- **代码规范**：
  - 遵循 ESLint（前端，推荐 `@vue/eslint-config-standard`）和 StandardJS（后端）。
  - 组件和函数命名清晰，遵循 camelCase 或 PascalCase。
- **错误处理**：
  - 前端：显示用户友好的错误提示（如 “无匹配数据”）。
  - 后端：返回明确的错误状态码和消息（如 400、500）。
- **性能优化**：
  - 前端：使用防抖（debounce，300ms）或节流（throttle）优化频繁的筛选请求。
  - 后端：为 MySQL 表添加索引（如 `INDEX idx_name (name)`），使用连接池管理数据库连接。
- **依赖管理**：
  - 示例 `package.json`：
    ```json
    {
      "dependencies": {
        "express": "^4.18.2",
        "mysql2": "^2.3.3",
        "sequelize": "^6.29.0",
        "cors": "^2.8.5",
        "dotenv": "^16.0.3"
      },
      "engines": {
        "node": "16.20.2"
      }
    }
    ```

### 6. MySQL 表结构
- **示例表结构**：
  ```sql
  CREATE TABLE data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    category VARCHAR(100),
    date DATETIME,
    INDEX idx_name (name),
    INDEX idx_category (category)
  );
  ```

## 示例代码

### 前端（Vue 组件）
```vue
<template>
  <div>
    <input type="text" placeholder="搜索名称" @input="updateFilter('name', $event.target.value)" />
    <select @change="updateFilter('category', $event.target.value)">
      <option value="">全部分类</option>
      <option value="category1">分类1</option>
    </select>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const filters = reactive({
  name: '',
  category: ''
});
const dataList = ref([]);

async function fetchData() {
  const query = new URLSearchParams(filters).toString();
  const response = await fetch(`/api/data?${query}`);
  const result = await response.json();
  if (result.status === 'success') {
    dataList.value = result.data;
  }
}

function updateFilter(key, value) {
  filters[key] = value;
  fetchData();
}
</script>
```

### 后端（Node.js 16.20.2 + Express + MySQL）
```javascript
const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');
const app = express();

const pool = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: 'project_db',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

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

app.get('/api/data', async (req, res) => {
  try {
    const { name, category } = req.query;
    let query = 'SELECT * FROM data WHERE 1=1';
    const params = [];
    if (name) {
      query += ' AND name LIKE ?';
      params.push(`%${name}%`);
    }
    if (category) {
      query += ' AND category = ?';
      params.push(category);
    }
    const [rows] = await pool.query(query, params);
    res.json({ status: 'success', data: rows, message: '' });
  } catch (error) {
    res.status(500).json({ status: 'error', data: [], message: error.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));
```

### MySQL 表结构
```sql
CREATE TABLE data (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  category VARCHAR(100),
  date DATETIME,
  INDEX idx_name (name),
  INDEX idx_category (category)
);
```