如何通过Angular、NodeJS与Sequelize提取指定HTML表格数据存入MySQL

1. Angular 前端（HTML解析 + 数据提取） #

无需安装额外第三方解析库，直接用浏览器原生DOMParser解析HTML字符串，不会污染当前页面DOM结构，搭配Angular内置HttpClient向后端发请求即可。

1.1 模板代码（xxx.component.html） #

<textarea
  rows="20"
  placeholder="粘贴HTML源代码"
  [(ngModel)]="htmlContent"
  style="width: 100%; margin-bottom: 12px;"
></textarea>
<button (click)="onSubmit()" style="padding: 8px 16px;">提取并保存数据</button>

1.2 组件逻辑代码（xxx.component.ts） #

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-html-parse',
  templateUrl: './xxx.component.html'
})
export class HtmlParseComponent {
  htmlContent = '';
  constructor(private http: HttpClient) {}

  onSubmit() {
    // 1. 解析HTML字符串为DOM对象
    const parser = new DOMParser();
    const doc = parser.parseFromString(this.htmlContent, 'text/html');
    const targetTable = doc.getElementById('table_2');
    if (!targetTable) {
      alert('未找到ID为table_2的表格，请检查输入内容');
      return;
    }

    // 2. 提取表格行数据，清洗多余字符
    const rowList = targetTable.querySelectorAll('tbody tr');
    const tableData = Array.from(rowList).map(row => {
      const cells = row.querySelectorAll('td');
      return {
        no: cells[0].textContent?.replace(/ |\./g, '').trim() || '',
        player: cells[1].textContent?.trim() || '',
        result: parseInt(cells[2].textContent?.trim() || '0', 10)
      }
    });

    // 3. 调用后端接口提交数据
    this.http.post('http://localhost:3000/api/table-data/save', { data: tableData }).subscribe({
      next: () => alert('数据保存成功'),
      error: (err) => alert('保存失败：' + err.message)
    })
  }
}

2. NodeJS 后端（API接口 + Sequelize入库） #

2.1 安装依赖 #

npm install express cors sequelize mysql2

2.2 数据库配置 + 模型定义（db.js） #

const { Sequelize, DataTypes } = require('sequelize');
// 替换为你自己的MySQL连接信息
const sequelize = new Sequelize('你的数据库名', '数据库账号', '数据库密码', {
  host: '127.0.0.1',
  dialect: 'mysql'
});

// 定义对应表结构的模型
const PlayerResult = sequelize.define('PlayerResult', {
  no: {
    type: DataTypes.INTEGER,
    allowNull: false
  },
  player: {
    type: DataTypes.STRING(100),
    allowNull: false
  },
  result: {
    type: DataTypes.BIGINT,
    allowNull: false
  }
}, {
  tableName: 'player_results',
  timestamps: false // 不需要自动生成创建、更新时间字段就设为false
});

// 同步模型到数据库，生产环境不要加force:true
sequelize.sync({ force: false }).then(() => console.log('数据库模型同步完成'));

module.exports = { PlayerResult };

2.3 接口服务代码（app.js） #

const express = require('express');
const cors = require('cors');
const { PlayerResult } = require('./db');
const app = express();

// 中间件配置
app.use(cors());
app.use(express.json({ limit: '10mb' }));

// 数据保存接口
app.post('/api/table-data/save', async (req, res) => {
  try {
    const { data } = req.body;
    // 批量插入数据
    await PlayerResult.bulkCreate(data);
    res.json({ code: 200, msg: '保存成功' });
  } catch (err) {
    res.status(500).json({ code: 500, msg: '保存失败', error: err.message });
  }
});

// 启动服务
app.listen(3000, () => console.log('服务运行在端口3000'));

注意事项 #

• 生产环境建议关闭CORS中间件，用Nginx反向代理处理跨域
• 可根据业务需要在前后端增加数据格式校验逻辑，避免非法数据入库
• 如果表格结构不固定，可动态生成Sequelize模型字段，不需要写死结构

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