1.利用node+express搭建后台：

import * as express from 'express'const app = express();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.99, 3.5, '这是第1个商品的第一次尝试', ['电子', '文字']),new Product(2, '第二个', 2.99, 4.5, '这是第2个商品的第一次尝试', ['电子']),new Product(3, '第三个', 3.99, 2.5, '这是第3个商品的第一次尝试', ['电子', '文字']),new Product(4, '第四个', 4.99, 1.5, '这是第4个商品的第一次尝试', ['文字']),new Product(5, '第五个', 5.99, 4.5, '这是第5个商品的第一次尝试', ['电子', '文字']),new Product(6, '第六个', 6.99, 3.5, '这是第6个商品的第一次尝试', ['图书']),
];app.get('/', (req, res) => {res.send('hello express!!!@@@');
});app.get('/products', (req, res) => {res.json(products);
})app.get('/product/:id', (req, res) => {res.json(products.find((product) => product.id === Number(req.params.id)));
})const server = app.listen(8000, 'localhost', () => {console.log('服务器已经确定,地址是 : http://localhost:8000');
})

2.前端开始进行相应的配置：

1. 在根目录创建proxy.config.json文件，http://localhost:8000为后端接口的地址。

{"/api": {"target": "http://localhost:8000","secure": false,"pathRewrite": {"^/api": ""}},"/": {"target": "http://localhost:8000"}
}

2. 在angular.json中添加一行配置：
   “proxyConfig”:“proxy.config.json”
   

3. 接着配置package.json:
   修改start的命令为ng serve --proxy-config proxy.config.json
   

4. 在app.moudles引入HttpClientModule
   

5. 在自己创建的component中的componentName.ts引入HttpClient,如下所示：

import { Component, OnInit } from '@angular/core';
import { Observable, from } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';@Component({selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {dataSource: Observable<any>;products: Array<any> = [];constructor(private http: HttpClient) {const url = '/api';this.dataSource = this.http.get('/api/products' ).pipe(map((res => res)));}ngOnInit() {this.dataSource.subscribe((data) => {this.products = data;});}}

6.在componentName.html中引用ts中的数据：

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

6.启动后端服务器和前端项目后，得到的页面为：