Angular 4与Node.js、MySQL连接及查询结果返回方法咨询

Hey there! No worries at all—let's break this down step by step, since you're just starting out with Angular 4, Node.js, and MySQL. I'll walk you through setting up a simple backend that talks to your database, then connect your Angular app to it to fetch and display query results.

First, make sure you have Node.js and MySQL installed on your machine. Then follow these steps:

1.1 Initialize a Node.js project & install dependencies #

Create a new folder for your backend, open a terminal there, and run:

npm init -y
npm install express mysql2 cors --save

• express: To create our API endpoints
• mysql2: A fast, reliable MySQL client for Node.js
• cors: To allow cross-origin requests from your Angular app (since frontend and backend run on different ports)

1.2 Create a database connection file #

Make a new file called db.js and add this code (replace placeholders with your MySQL credentials):

const mysql = require('mysql2');

const db = mysql.createConnection({
  host: 'localhost', // Typically localhost for local MySQL
  user: 'your_mysql_username', // e.g., root
  password: 'your_mysql_password',
  database: 'your_database_name' // Ensure this database exists in MySQL!
});

db.connect((err) => {
  if (err) {
    console.error('Error connecting to MySQL:', err);
    return;
  }
  console.log('Connected to MySQL database successfully!');
});

module.exports = db;

1.3 Create the API server file #

Make a server.js file to set up an endpoint that fetches data from MySQL:

const express = require('express');
const cors = require('cors');
const db = require('./db');

const app = express();
const port = 3000;

// Enable CORS for all frontend requests
app.use(cors());

// Parse incoming JSON data
app.use(express.json());

// Example endpoint: Fetch all entries from a "users" table
app.get('/api/users', (req, res) => {
  const query = 'SELECT * FROM users'; // Replace with your table/query
  db.query(query, (err, results) => {
    if (err) {
      console.error('Error fetching data:', err);
      res.status(500).json({ error: 'Failed to fetch data' });
      return;
    }
    res.json(results); // Send query results as JSON to frontend
  });
});

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

1.4 Test the backend #

Ensure your MySQL server is running, then start the Node.js server:

node server.js

Visit http://localhost:3000/api/users in your browser—you should see your database data as JSON if everything works.

Assuming you have an Angular 4 project set up (if not, run ng new angular-mysql-app and follow prompts), let's add code to fetch data:

2.1 Import HttpClientModule #

Angular 4 uses HttpClient (available in v4.3+) for HTTP requests. Open src/app/app.module.ts and add:

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

@NgModule({
  imports: [
    // ... other imports like BrowserModule
    HttpClientModule // Add this line
  ],
  // ... rest of the module code
})
export class AppModule { }

2.2 Create a data service #

A service will handle HTTP calls to your backend. Generate one with Angular CLI:

ng generate service data

Open src/app/data.service.ts and update it:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:3000/api/users'; // Match your backend endpoint

  constructor(private http: HttpClient) { }

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

2.3 Use the service in a component #

Let's use the service in AppComponent (or any component you prefer). Open src/app/app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[] = [];
  errorMessage = '';

  constructor(private dataService: DataService) { }

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

  fetchUsers(): void {
    this.dataService.getUsers().subscribe(
      (data) => {
        this.users = data;
      },
      (error) => {
        this.errorMessage = 'Failed to load users';
        console.error('Error fetching users:', error);
      }
    );
  }
}

2.4 Display the data in the template #

Update src/app/app.component.html to show fetched data:

<h1>MySQL Data from Node.js Backend</h1>

<div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>

<ul *ngIf="users.length > 0">
  <li *ngFor="let user of users">
    ID: {{ user.id }} | Name: {{ user.name }} | Email: {{ user.email }}
    <!-- Replace with your actual table column names -->
  </li>
</ul>

<p *ngIf="users.length === 0 && !errorMessage">Loading users...</p>

2.5 Test the full setup #

1. Keep your Node.js server running (node server.js in the backend folder)
2. Start your Angular app:

ng serve --open

Your browser will open to http://localhost:4200, and you'll see your MySQL data displayed!

Quick Troubleshooting Tips #

• Double-check MySQL credentials in db.js—wrong username/password is a common pitfall
• Ensure your MySQL server is running (test with mysql -u your_username -p in terminal)
• Verify the table you're querying exists in your database
• Check browser console (F12) for frontend errors, and terminal for backend errors

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