AngularJS与SQL的集成使用实践指南

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL
);

ng new angularjs-sql-integration
cd angularjs-sql-integration

import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@NgModule({
  imports: [HttpClient],
  providers: [HttpClient]
})
export class DbModule { }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class DbService {
  private apiUrl = 'http://localhost:3000/api';
  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get(`${this.apiUrl}/users`);
  }
  addUser(username: string, password: string, email: string) {
    return this.http.post(`${this.apiUrl}/users`, { username, password, email });
  }
  // 其他数据库操作方法...
}

import { Component, OnInit } from '@angular/core';
import { DbService } from '../db.service';
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  users: any[] = [];
  constructor(private dbService: DbService) { }
  ngOnInit() {
    this.dbService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class UsersService {
  private apiUrl = 'http://localhost:3000/api';
  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get(`${this.apiUrl}/users`);
  }
  addUser(username: string, password: string, email: string) {
    return this.http.post(`${this.apiUrl}/users`, { username, password, email });
  }
  // 其他API接口方法...
}

ng serve