HTTP 请求服务端数据

client端

1、引入HttpClientModule模板

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 编写客户端程序

product TS

import { Component, OnInit } from '@angular/core';
import {Subscription} from 'rxjs';
import {HttpClient} from '@angular/common/http';

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

  dataSource: Subscription;

  products: any;

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    this.http.get('/api/products').subscribe((data) => this.products = data);
    // this.http.request('get', '/api/products' );
  }
}

3.product HTML

<div>
  商品信息
</div>
<ul>
  <li *ngFor="let item of products">
    {{item.title}}
  </li>
</ul>

服务器端

准备数据

import * as express from 'express';

const app = express();
const server = app.listen(8000,"localhost",()=>{
    console.log("服务已启动!!!");
});

app.get('/',(req, res) => {
    res.send("Hello Express!!");
});

app.get('/api/products', (req, res) => {
    res.json(products);
});

app.get('/api/product/:id', (req, res) => {
    //res.json(req.params);
    res.json(products.find((product) => (product.id.toString() == req.params.id)));
});

export  class Product {
    constructor(
        public id: number,
        public title: string,
        public price: number,
        public rating: number,
        public desc: string,
        public categories: Array<string>
    ) {
    }
}
const products: Product[] = [
    new Product(1, '大碗茶1', 1.99, 1.1, '这是一个值得买的藏品1', ['瓷器1', '明清代1']),
    new Product(2, '大碗茶2', 2.99, 2.2, '这是一个值得买的藏品2', ['瓷器3', '明清代2']),
    new Product(3, '大碗茶3', 3.99, 3.3, '这是一个值得买的藏品3', ['瓷器2']),
    new Product(4, '大碗茶4', 4.99, 4.4, '这是一个值得买的藏品4', ['瓷器1', '明清代1']),
    new Product(5, '大碗茶5', 5.99, 5.5, '这是一个值得买的藏品5', ['瓷器2']),
    new Product(6, '大碗茶6', 6.99, 6.6, '这是一个值得买的藏品6', ['瓷器3', '明清代3'])
];

client端配置提交的服务器路径

1、新建配置文件proxy.conf.json,告诉访问服务的目标地址以及前缀

{
  "/api": {
    "target": "http://localhost:8000"
  }
}

2.把该配置添加到启动服务中

package.json中“start”参数，改为如下：

"start": "ng serve --proxy-config proxy.conf.json",