Angular6如何从Express+PostgreSQL后端路由获取数据至前端组件？

嘿，你已经把前后端的基础架构都搭好了，接下来就差把后端的数据拉到Angular前端展示啦！下面是Angular 6里最规范也最实用的实现方案，一步步来：

Angular的设计理念是分离关注点，数据请求逻辑应该放在专门的服务里，而不是直接写在组件中，这样既方便复用，也更容易维护和测试。

先用Angular CLI生成一个处理人员数据的服务：

ng generate service services/people
# 简写版：ng g s services/people

然后在生成的src/app/services/people.service.ts中编写请求逻辑，记得先定义对应后端数据结构的TypeScript接口，保证类型安全：

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

// 定义Person接口，和后端返回的数据结构对应
export interface Person {
  id?: number;
  name: string;
  age: number;
  // 可以根据你的数据库模型添加其他字段
}

@Injectable({
  providedIn: 'root' // Angular 6+的自动注册方式，无需手动在模块中声明
})
export class PeopleService {
  private apiUrl = 'http://localhost:3000/people'; // 后端接口地址

  constructor(private http: HttpClient) { }

  // 获取人员列表的方法，返回Observable流
  getPeople(): Observable<Person[]> {
    return this.http.get<Person[]>(this.apiUrl);
  }
}

最后别忘了在app.module.ts中导入HttpClientModule，否则无法使用Angular的HTTP客户端：

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

@NgModule({
  imports: [
    // ...其他已导入的模块
    HttpClientModule
  ],
  // ...其他配置
})
export class AppModule { }

现在回到你的People组件，注入刚才创建的服务，在组件初始化时调用获取数据的方法，并把数据存储到组件变量中：

src/app/people/people.component.ts：

import { Component, OnInit } from '@angular/core';
import { PeopleService, Person } from '../services/people.service';

@Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
})
export class PeopleComponent implements OnInit {
  peopleList: Person[] = []; // 存储后端返回的人员数据
  errorMessage: string = ''; // 用来展示请求错误信息

  constructor(private peopleService: PeopleService) { }

  ngOnInit(): void {
    // 组件初始化时发起请求
    this.peopleService.getPeople()
      .subscribe({
        next: (people) => {
          this.peopleList = people;
        },
        error: (err) => {
          this.errorMessage = '获取数据失败：' + err.message;
          console.error('请求出错:', err);
        }
      });
  }
}

最后在组件的HTML模板里，用Angular的*ngFor指令循环渲染表格，同时处理加载、空数据和错误的状态：

src/app/people/people.component.html：

<!-- 错误提示 -->
<div *ngIf="errorMessage" class="alert alert-danger">{{ errorMessage }}</div>

<!-- 人员表格 -->
<table class="table table-striped" *ngIf="peopleList.length > 0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of peopleList">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
    </tr>
  </tbody>
</table>

<!-- 加载状态提示 -->
<div *ngIf="peopleList.length === 0 && !errorMessage">加载中...</div>

因为前端跑在localhost:4200，后端在localhost:3000，浏览器会触发跨域限制，所以必须在后端Express中配置CORS：

1. 先在Express项目中安装cors包：

npm install cors

2. 在服务器入口文件（比如app.js或server.ts）中启用CORS：

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

// 允许来自前端4200端口的请求
app.use(cors({
  origin: 'http://localhost:4200'
}));

// ...其他中间件和路由配置

• 解耦逻辑：数据请求和组件展示分离，代码更清晰，后续修改请求逻辑不用动组件。
• 类型安全：用TypeScript接口定义数据结构，开发时能获得代码提示，避免类型错误。
• 错误处理：完善的错误捕获机制，给用户友好提示的同时方便开发者调试。
• 可复用性：PeopleService可以在其他组件中直接复用，不用重复写请求代码。

内容的提问来源于stack exchange，提问作者mick.lynch