nxxmdata/backend/高级软件开发工程师提示词(前端vue-nodejs).md

软件开发工程师提示词（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 请求代码：

    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 连接池）：

    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 模型）：

    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）处理筛选条件。
  • 统一响应格式：

    {
      "status": "success",
      "data": [],
      "message": ""
    }
    

  • 示例 API 路由（使用 mysql2）：

    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 文件：

    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。
• 响应格式：
  • 成功响应：

    {
      "status": "success",
      "data": [/* 数据数组 */],
      "message": ""
    }
    

  • 错误响应：

    {
      "status": "error",
      "data": [],
      "message": "错误描述"
    }
    

4. 筛选条件管理

• 前端：
  • 定义 filters 对象：

    import { reactive } from 'vue';
    const filters = reactive({
      name: '',
      category: '',
      dateRange: ''
    });
    

  • 手动更新 filters：

    function updateFilter(key, value) {
      filters[key] = value;
      fetchData(filters); // 触发 API 请求
    }
    

  • 在 UI 中绑定事件（如 @input, @change）调用 updateFilter。
• 后端：
  • 解析查询参数或请求 body，转换为 MySQL 查询条件。
  • 示例 MySQL 查询：

    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：

    {
      "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 表结构

• 示例表结构：

  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 组件）

<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）

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 表结构

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)
);