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",