如何通过Angular 9、Node、Express和MySQL使用select将数据发布到后端

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:3000/api'; // 后端API的URL

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

npm install express mysql

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

const app = express();

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_mysql_username',
  password: 'your_mysql_password',
  database: 'your_database_name'
});

app.get('/api/data', (req, res) => {
  const query = 'SELECT * FROM your_table_name'; // 替换为实际的表名
  connection.query(query, (error, results) => {
    if (error) {
      console.error(error);
      res.status(500).json({ error: 'Failed to retrieve data from database' });
    } else {
      res.json(results);
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

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

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe(
      (response: any[]) => {
        this.data = response;
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

<ul>
  <li *ngFor="let item of data">{{ item.name }}</li>
</ul>