要在Vue 3、TypeScript和Element Plus中使用Node.js对接MySQL实现表格数据展示，你需要执行以下步骤：
- 安装必要的库：
npm install express mysql2 axios
- 设置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);
});
});
};
- 创建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}`);
});
- 在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的表格组件将会展示这些数据。