使用NodeJS将SQL数据发布到Angular View

npm init

npm install express mysql cors

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');

const connection = mysql.createConnection({
  host: '数据库主机地址',
  user: '数据库用户名',
  password: '数据库密码',
  database: '数据库名称'
});

connection.connect((err) => {
  if (err) {
    console.error('数据库连接失败：', err);
  } else {
    console.log('数据库连接成功');
  }
});

const app = express();

app.use(cors());
app.use(express.json());

app.get('/data', (req, res) => {
  const sql = 'SELECT * FROM 表名';

  connection.query(sql, (err, results) => {
    if (err) {
      console.error('查询数据失败：', err);
      res.status(500).send('查询数据失败');
    } else {
      res.json(results);
    }
  });
});

const port = 3000;

app.listen(port, () => {
  console.log(`服务器已启动，监听端口 ${port}`);
});

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://服务器地址:3000/data';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get<any[]>(this.apiUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `
    <ul>
      <li *ngFor="let item of data">{{ item.name }}</li>
    </ul>
  `
})
export class DataComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data) => {
        this.data = data;
      },
      (error) => {
        console.error('获取数据失败：', error);
      }
    );
  }
}