NodeJS向EJS传递MySQL数组数据失败，求解决方案

嘿，作为刚接触Stack Overflow的新手，完全理解你想做好规范的心情——母语非英语根本不是问题，咱们专注解决你的图表需求就好！

第一步：补全服务端app.js的完整流程 #

你提到已经获取了全量数据data对象，我帮你把整个流程补全，包括MySQL连接、查询、错误处理和模板渲染：

var express = require('express');
var mysql = require('mysql2'); // 记得先安装mysql2包：npm install mysql2
var app = express();

// 设置EJS为模板引擎
app.set('view engine', 'ejs');

// 配置MySQL连接
const db = mysql.createConnection({
  host: 'localhost', // 替换成你的数据库地址
  user: 'your_db_username', // 替换成数据库用户名
  password: 'your_db_password', // 替换成数据库密码
  database: 'your_target_db' // 替换成目标数据库名
});

// 连接数据库
db.connect((err) => {
  if (err) {
    console.error('数据库连接失败:', err);
    return;
  }
  console.log('已成功连接MySQL数据库');
});

// 路由：获取全量数据并渲染图表页面
app.get('/chart', (req, res) => {
  // 替换成你的实际查询语句，根据表结构调整
  const sql = 'SELECT * FROM your_table_name';
  
  db.query(sql, (err, results) => {
    if (err) {
      console.error('查询数据失败:', err);
      return res.status(500).send('数据查询出错');
    }
    
    // 这里results就是你提到的全量数据，可按需转换格式（比如处理日期、数值类型）
    const chartData = results;
    
    // 渲染EJS模板，把数据传递给前端
    res.render('chart', { chartData: chartData });
  });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在http://localhost:${PORT}`);
});

第二步：在EJS模板中接收并使用数据 #

假设你的EJS模板文件是views/chart.ejs，这里以常用的Chart.js为例，展示如何用传递过来的chartData生成图表：

<!DOCTYPE html>
<html>
<head>
  <title>MySQL数据图表展示</title>
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="600" height="300"></canvas>

  <script>
    // 从EJS获取数据，转换成JavaScript可识别的对象
    const chartData = <%- JSON.stringify(chartData) %>;
    
    // 提取图表所需的标签和数据（根据你的表字段调整）
    const labels = chartData.map(item => item.record_date); // 假设表中有日期字段record_date
    const values = chartData.map(item => item.stat_value); // 假设表中有数值字段stat_value
    
    // 初始化图表
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'line', // 可换成bar、pie等你需要的图表类型
      data: {
        labels: labels,
        datasets: [{
          label: '数据趋势',
          data: values,
          borderColor: 'rgb(75, 192, 192)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          tension: 0.1
        }]
      }
    });
  </script>
</body>
</html>

关键注意事项 #

• 安装依赖：别忘了执行npm install express ejs mysql2来安装所有需要的包
• 数据格式适配：如果MySQL返回的日期是字符串或特殊格式，可能需要在服务端或前端转换成图表能识别的格式
• 错误处理：保留代码里的错误处理逻辑，方便调试和避免服务器崩溃
• 生产环境提示：不要把数据库密码硬编码在代码里，用环境变量（比如process.env.DB_PASSWORD）管理敏感信息

要是你的表结构或者图表类型有特殊需求，随时补充细节就行！

内容的提问来源于stack exchange，提问作者Eric Ahn