做公司网站页面seo网站营销推广公司

---

前言

在现代的前端开发中，使用 Vue3 搭配 Element Plus 进行组件化开发已经成为一种常见的实践。最近，我在一个项目中需要根据数据库表结构动态生成表格代码，这让我经历了一次从 MySQL 到 SQL Server 的旅程，并学习了如何使用 ejs 模版引擎来生成代码。在这篇博客中，我将介绍如何使用 mysql2/promise 和 mssql 库连接数据库，以及如何利用 ejs 动态生成代码。

项目背景

我们需要在 Vue3 项目中封装一个 <my-table> 组件，该组件的表格列（tableColumns）需要根据数据库表结构动态生成。为了实现这一点，我搭建了一个 Node.js 服务，通过查询数据库表结构来生成表格代码。

使用的技术栈

• Vue3：使用 setup 语法和 Element Plus 组件库。
• Node.js：用于连接数据库并生成代码。
• mysql2/promise 和 mssql：用于连接 MySQL 和 SQL Server 数据库。
• ejs：用于动态生成模板代码。

步骤一：设置 Node.js 项目

首先，创建一个新的 Node.js 项目并安装所需的库：

mkdir dynamic-table-generator
cd dynamic-table-generator
npm init -y
npm install express ejs mssql

步骤二：连接 SQL Server 数据库

由于我们的数据库是 SQL Server，我们使用 mssql 库来进行连接：

// db.js
const sql = require('mssql');const config = {user: 'your_username',password: 'your_password',server: 'your_server',database: 'your_database',options: {encrypt: true, // 使用 SSL 连接enableArithAbort: true}
};const connectToDatabase = async () => {try {await sql.connect(config);console.log('Connected to the database!');} catch (err) {console.error('Database connection failed: ', err);}
};module.exports = {connectToDatabase,sql
};

步骤三：查询数据库表结构

我们需要查询数据库以获取表的结构信息：

// getTableStructure.js
const { sql } = require('./db');const getTableStructure = async (tableName) => {try {const result = await sql.query`SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = ${tableName}`;return result.recordset;} catch (err) {console.error('Error fetching table structure: ', err);}
};module.exports = getTableStructure;

步骤四：生成模板代码

使用 ejs 动态生成 Vue3 表格代码：

注意 其中用<%- %> 代替 <%= %> 来保留 tsx中的<> 尖括号。

// generateTemplate.js
const ejs = require('ejs');
const fs = require('fs');const generateTemplate = (columns) => {const template = `
<template><my-table :columns="tableColumns"></my-table>
</template><script setup>
import { reactive } from 'vue';const tableColumns = reactive([<% columns.forEach(column => { %>{prop: '<%= column.COLUMN_NAME %>',label: '<%= column.COLUMN_NAME %>',minWidth: 120,align: 'center',render(param: { row: any; index: number }) {const { row, index } = param;<% if (column.COLUMN_NAME.endsWith('Time') || column.COLUMN_NAME.endsWith('Date')) { %>return <>{formatDateTime(row.<%= column.COLUMN_NAME %>)}</>;<% } else { %>return <>{row.<%= column.COLUMN_NAME %>}</>;<% } %>}},<% }) %>
]);
</script>`;const result = ejs.render(template, { columns });fs.writeFileSync('output.vue', result);
};module.exports = generateTemplate;

步骤五：整合所有功能

搭建一个 Express 服务，处理生成代码的请求：

// server.js
const express = require('express');
const { connectToDatabase } = require('./db');
const getTableStructure = require('./getTableStructure');
const generateTemplate = require('./generateTemplate');const app = express();
const PORT = 3000;app.get('/generate-template', async (req, res) => {const tableName = req.query.table;const columns = await getTableStructure(tableName);generateTemplate(columns);res.send('Template generated successfully!');
});connectToDatabase().then(() => {app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);});
});

总结

通过以上步骤，我们成功地搭建了一个 Node.js 服务，能够根据 SQL Server 数据库中的表结构动态生成 Vue3 表格代码。我们使用 mssql 库连接数据库，ejs 模板引擎生成代码，并结合 Vue3 和 Element Plus 实现了组件化开发。希望这篇博客能帮助到那些需要动态生成代码的开发者们。