Express 前端起一个后端服务 实现低代码生成自定义模板页面

Express 是一个基于 Node.js 的 轻量级 Web 服务框架

让你快速启动一个本地 HTTP 服务（比如 POST/GET 接口），响应浏览器或其他前端发来的请求。

①下载wxpress

npm install express

下不了就-D -W

 根目录下就是src同目录，创建一个js 或者cjs的node脚本文件

crud-generator-server.cjs

②执行脚本：node crud-generator-server.cjs

F:\vue3\ZRKJvue3\zrkj-aigov-city-web>node crud-generator-server.cjs
✅ CRUD 页面生成服务已启动：http://localhost:3001

// crud-generator-server.js
const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();

app.use(express.json());

app.post('/generate-page', (req, res) => {
  const { tableName } = req.body;

  if (!tableName) {
    return res.status(400).json({ message: 'Missing tableName' });
  }

  const targetDir = path.resolve(__dirname, 'src/views/systemTools/addPages');
  const filePath = path.join(targetDir, `${tableName}.vue`);

  if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true });

  const template = `



  `;

  fs.writeFileSync(filePath, template.trim(), 'utf-8');
  res.json({ message: `${tableName}.vue 页面已生成` });
});

app.listen(3001, () => {
  console.log('✅ CRUD 页面生成服务已启动：http://localhost:3001');
});

③跨域后端cors这里自己起的太麻烦了就proxy代理替换一下

在config.ts文件里面

      proxy: {

          '/generate-page': {
         target: 'http://localhost:3001',
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/generate-page/, '/generate-page'),
  },



}

④生成页面 一个页面按钮点击方法用fetch

// 生成页面
const pageCreate = async () => {
  try {
    const res = await fetch('/generate-page', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tableName: 'DemoTable3' }),
    });
    if (!res.ok) {
      throw new Error(`请求失败，状态码：${res.status}`);
    }
    createMessage.success('页面生成成功！');
  } catch (error) {
    console.error(error);
    createMessage.error('页面生成失败，请稍后重试');
  }
};

效果出来然后需要自己去对应文件路径配置路由

⑤最终页面效果

还有很多方面需要完善只是简单的实现了一下。