vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

要在Vue 3、TypeScript和Element Plus中使用Node.js对接MySQL实现表格数据展示，你需要执行以下步骤：

1. 安装必要的库：

npm install express mysql2 axios

2. 设置MySQL连接：

在db.js中：

import mysql from 'mysql2';
 
const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'yourusername',
  password: 'yourpassword',
  database: 'yourdatabase',
});
 
export const query = (sql, values) => {
  return new Promise((resolve, reject) => {
    pool.query(sql, values, (error, results, fields) => {
      if (error) return reject(error);
      resolve(results);
    });
  });
};

3. 创建Express服务器并对接MySQL：

在server.js中：

import express from 'express';
import { query } from './db';
 
const app = express();
const port = 3000;
 
app.get('/data', async (req, res) => {
  try {
    const [rows] = await query('SELECT * FROM your_table');
    res.json(rows);
  } catch (error) {
    res.status(500).send(error.message);
  }
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

4. 在Vue 3组件中使用axios获取数据：

在你的Vue组件中：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="column1" label="Column 1"></el-table-column>
    <el-table-column prop="column2" label="Column 2"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import axios from 'axios';
 
export default defineComponent({
  name: 'YourComponent',
  setup() {
    const tableData = ref([]);
 
    onMounted(async () => {
      try {
        const response = await axios.get('http://localhost:3000/data');
        tableData.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });
 
    return { tableData };
  },
});
</script>

确保你的MySQL数据库、表和服务器正在运行，并且已经正确配置了端口和认证信息。这样，当你访问Vue组件时，它会从Express服务器获取数据，然后Element Plus的表格组件将会展示这些数据。