Angular项目如何从MySQL数据库获取数据并展示至仪表盘

Alright, let's break this down step by step to get your MySQL data showing up in your Angular dashboard. You've already got the database connection started, so we'll build on that smoothly.

First off, your existing connection code is missing the specific database you want to interact with—let's add that. Then we'll create a reusable function to fetch the data your dashboard needs.

var mysql = require('mysql');
var con = mysql.createConnection({
  host: "myhost",
  user: "myusername",
  password: "mypassword",
  database: "your_target_database" // Replace with your actual database name
});

con.connect(function(err){
  if (err) throw err;
  console.log("Connected to MySQL!");
});

// Function to fetch dashboard-specific data
function getDashboardData(callback) {
  // Replace this query with your actual table/columns for the dashboard
  const query = 'SELECT id, metric_name, current_value FROM dashboard_metrics';
  
  con.query(query, function(err, results) {
    if (err) {
      callback(err, null);
      return;
    }
    callback(null, results);
    // Note: For frequent requests, use a connection pool instead of closing connections here
    // con.end();
  });
}

// Export the function to use in your API routes
module.exports = { getDashboardData };

Since you have a server.ts, we'll use Express to create a simple API that your Angular app can call to get data. First install Express if you haven't: npm install express

Update your server.ts (or create a separate API file and import it):

const express = require('express');
const app = express();
const port = 3000; // Pick a port that doesn't conflict with Angular's default 4200
const db = require('./your-db-connection-file'); // Import the file above

// Enable CORS to let Angular (running on 4200) access this API
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:4200");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

// API route to serve dashboard data
app.get('/api/dashboard', (req, res) => {
  db.getDashboardData((err, data) => {
    if (err) {
      res.status(500).send('Failed to fetch dashboard data');
      return;
    }
    res.json(data);
  });
});

app.listen(port, () => {
  console.log(`Backend server running on http://localhost:${port}`);
});

Now let's wire up the Angular side to pull data from the API and render it in your dashboard.

First, set up HttpClientModule #

In your app.module.ts, import and add HttpClientModule to enable API calls:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // Your other modules...
    HttpClientModule
  ]
})
export class AppModule { }

Create a service to handle API requests #

Generate a service (e.g., dashboard.service.ts) to encapsulate the API call logic:

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

// Define a type for your dashboard data (replace with your actual fields)
export interface DashboardMetric {
  id: number;
  metric_name: string;
  current_value: number;
}

@Injectable({
  providedIn: 'root'
})
export class DashboardService {
  private apiUrl = 'http://localhost:3000/api/dashboard';

  constructor(private http: HttpClient) { }

  getDashboardMetrics(): Observable<DashboardMetric[]> {
    return this.http.get<DashboardMetric[]>(this.apiUrl);
  }
}

Use the service in your dashboard component #

In your dashboard component (e.g., dashboard.component.ts):

import { Component, OnInit } from '@angular/core';
import { DashboardService, DashboardMetric } from './dashboard.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  metrics: DashboardMetric[] = [];
  isLoading = false;

  constructor(private dashboardService: DashboardService) { }

  ngOnInit(): void {
    this.loadMetrics();
  }

  loadMetrics(): void {
    this.isLoading = true;
    this.dashboardService.getDashboardMetrics().subscribe(
      data => {
        this.metrics = data;
        this.isLoading = false;
      },
      error => {
        console.error('Error loading metrics:', error);
        this.isLoading = false;
      }
    );
  }
}

Render the data in your component template #

Update dashboard.component.html to display the data (adjust the layout to match your dashboard design):

<div class="dashboard">
  <h1>My Dashboard</h1>
  
  <div *ngIf="isLoading" class="loading">Loading data...</div>
  
  <div class="metric-cards" *ngIf="!isLoading">
    <div class="card" *ngFor="let metric of metrics">
      <h3>{{ metric.metric_name }}</h3>
      <p class="value">{{ metric.current_value }}</p>
    </div>
  </div>
</div>

• Use Connection Pools: For production apps, replace createConnection() with createPool() to reuse database connections and improve performance.
• Error Handling: Add user-friendly error messages in the Angular UI instead of just logging to the console.
• Type Safety: Stick with the DashboardMetric interface we created—avoid using any to make your code more maintainable.

内容的提问来源于stack exchange，提问作者Beyza Çavuşoğlu