HttpClient网络数据获取

完善项目

auction/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

auction/proxy.conf.json

@@ -0,0 +1,5 @@
+{
+  "/api":{
+    "target":"http://localhost:8000"
+  }
+}

auction/src/app/app.component.html

@@ -10,4 +10,3 @@
   </div>
 </div>
 <app-footer></app-footer>
-

auction/src/app/app.module.ts

@@ -14,6 +14,9 @@ import {HomeComponent} from './home/home.component';
 import {RouterModule, Routes} from "@angular/router";
 import {ProductService} from "./shared/product.service";
 import { FilterPipe } from './pipe/filter.pipe';
+import { WebSocketComponent } from './web-socket/web-socket.component';
+import {WebSocketService} from "./shared/web-socket.service";
+import {HttpClientModule} from '@angular/common/http';
 
 const routeConfig: Routes = [
     {path: '', component: HomeComponent},
@@ -32,15 +35,17 @@ const routeConfig: Routes = [
         ProductDetailComponent,
         HomeComponent,
         FilterPipe,
+        WebSocketComponent,
     ],
     imports: [
         BrowserModule,
         FormsModule,
         RouterModule.forRoot(routeConfig),
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        HttpClientModule
     ],
 
-    providers: [ProductService],
+    providers: [ProductService,WebSocketService],
     bootstrap: [AppComponent],
 })
 export class AppModule {

auction/src/app/product-detail/product-detail.component.html

@@ -1,15 +1,15 @@
 <div class="thumbnail">
     <img src="http://placehold.it/820x230">
     <div>
-        <h4 class="pull-right">{{product.price}}元</h4>
-        <h4>{{product.title}}</h4>
-        <p>{{product.desc}}</p>
+        <h4 class="pull-right">{{product?.price}}元</h4>
+        <h4>{{product?.title}}</h4>
+        <p>{{product?.desc}}</p>
     </div>
 
     <div>
-        <p class="pull-right">评论：{{comments.length}}</p>
+        <p class="pull-right">评论：{{comments?.length}}</p>
         <p>
-            <app-stars [rating]="product.rating"></app-stars>
+            <app-stars [rating]="product?.rating"></app-stars>
         </p>
     </div>
 </div>

auction/src/app/product-detail/product-detail.component.ts

@@ -23,10 +23,14 @@ export class ProductDetailComponent implements OnInit {
     }
 
     ngOnInit() {
-        let productId: number = this.routeInfo.snapshot.params["productId"];
-
-        this.product = this.productService.getProduct(productId);
-        this.comments = this.productService.getCommentsForProductId(productId);
+        let productId: string = this.routeInfo.snapshot.params["productId"];
+        //使用手工订阅的方式
+        this.productService.getProduct(productId).subscribe(
+            product => this.product = product
+        );
+        this.productService.getCommentsForProductId(productId).subscribe(
+            coments => this.comments = coments
+        );
     }
 
     addComment(){

auction/src/app/product/product.component.html

@@ -1,13 +1,4 @@
-<div class="row">
-  <div class="col-sm-12">
-    <div class="form-group">
-      <input class="form-control" placeholder="请输入商品名称"
-      [formControl] ="titleFilter"
-      >
-    </div>
-  </div>
-</div>
-<div *ngFor="let product of products | filter:'title':keyword "  class="col-md-4 col-sm-4 col-lg-4">
+<div *ngFor="let product of products | async "  class="col-md-4 col-sm-4 col-lg-4">
   <div class="thumbnail">
     <!--//属性绑定-->
     <img [src]="imgUrl">

auction/src/app/product/product.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ProductService, Product} from "../shared/product.service";
-import {FormControl} from "@angular/forms";
 import 'rxjs/Rx'
+import {Observable} from "rxjs";
 
 @Component({
     selector: 'app-product',
@@ -10,23 +10,14 @@ import 'rxjs/Rx'
 })
 export class ProductComponent implements OnInit {
 
-    private products: Product[];
-    private keyword: string;
-    private titleFilter:FormControl = new FormControl();
+    private products:Observable<any>;
+
     private imgUrl = 'http://placehold.it/320x150';
 
-    constructor(private productService: ProductService) {
-        this.titleFilter.valueChanges
-            .debounceTime(500)
-            .subscribe(
-            value => this.keyword = value
-        );
-    }
+    constructor(private productService: ProductService) {}
 
     ngOnInit() {
-
         this.products = this.productService.getProducts();
-
     }
 
 }

auction/src/app/shared/product.service.ts

@@ -1,42 +1,34 @@
 import {Injectable} from '@angular/core';
+import {Observable} from "rxjs";
+import {HttpClient,HttpParams} from "@angular/common/http";
+import 'rxjs/Rx';
 
-@Injectable()
+@Injectable({
+    providedIn:'root'
+})
 export class ProductService {
 
-    private products: Product[] = [
-        new Product(1, '第一个商品', 1.99, 3.5, "这是第一商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"]),
-        new Product(2, '第二个商品', 2.99, 2.5, "这是第二商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["硬件设备", "其他"]),
-        new Product(3, '第三个商品', 3.99, 1.5, "这是第三商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备"]),
-        new Product(4, '第四个商品', 4.99, 2.0, "这是第四商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "其他"]),
-        new Product(5, '第五个商品', 5.99, 3.5, "这是第五商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"]),
-        new Product(6, '第六个商品', 6.99, 4.5, "这是第六商品，随便是到手京东卡是你的拉克丝等你拉屎的", ["电子产品", "硬件设备", "其他"])
-    ];
-
-    private comments: Comment[] = [
-        new Comment(1, 1, "2017-02-02 22:22:22", "张三", 3, "东西不错"),
-        new Comment(2, 2, "2017-03-02 23:22:22", "李四", 4, "东西挺不错"),
-        new Comment(3, 1, "2017-04-02 24:22:22", "王五", 2, "东西不错"),
-        new Comment(4, 1, "2017-05-02 25:22:22", "赵六", 1, "东西还不错"),
-        new Comment(5, 1, "2017-06-02 26:22:22", "哈哈", 3, "东西不错"),
-    ]
-
-    constructor() {
+    constructor(private http:HttpClient) {
     }
 
     getAllCategories():string[]{
         return ["电子产品", "硬件设备", "其他"];
     }
 
-    getProducts(): Product[] {
-        return this.products;
+    getProducts():any{
+        return this.http.get("/api/products");
     }
 
-    getProduct(id: number): Product {
-        return this.products.find((product) => product.id == id);
+
+    getProduct(id: string):any {
+
+        return this.http.get("/api/product/"+id);
     }
 
-    getCommentsForProductId(id: number): Comment[] {
-        return this.comments.filter((comment: Comment) => comment.productId == id);
+    getCommentsForProductId(id: string):any {
+        // const params = new HttpParams()
+            // .set('id', id+"/comments");
+        return this.http.get("/api/product/"+id+"/comments");
     }
 }
 

auction/src/app/shared/web-socket.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { WebSocketService } from './web-socket.service';
+
+describe('WebSocketService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [WebSocketService]
+    });
+  });
+
+  it('should be created', inject([WebSocketService], (service: WebSocketService) => {
+    expect(service).toBeTruthy();
+  }));
+});

auction/src/app/shared/web-socket.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Observable} from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class WebSocketService {
+
+    ws: WebSocket;
+
+    constructor() {
+    }
+
+    createObservableSocket(url: string): Observable<any> {
+        this.ws = new WebSocket(url);
+        return new Observable(
+          observer =>{
+              //什么时候发生下一个元素
+              this.ws.onmessage = (event) => observer.next(event.data);
+              //什么时候抛一个异常
+              this.ws.onerror = (event) => observer.error(event);
+              //什么时候发出流结束的信号
+              this.ws.onclose = (event) => observer.complete();
+
+          }
+        );
+    }
+
+    sendMessage(message:string){
+        this.ws.send(message);
+    }
+}

auction/src/app/web-socket/web-socket.component.html

@@ -0,0 +1 @@
+<button (click)="sendMessageToserver()">点击发送webSocket消息</button>

auction/src/app/web-socket/web-socket.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WebSocketComponent } from './web-socket.component';
+
+describe('WebSocketComponent', () => {
+  let component: WebSocketComponent;
+  let fixture: ComponentFixture<WebSocketComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WebSocketComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WebSocketComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

auction/src/app/web-socket/web-socket.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import {WebSocketService} from "../shared/web-socket.service";
+
+@Component({
+  selector: 'app-web-socket',
+  templateUrl: './web-socket.component.html',
+  styleUrls: ['./web-socket.component.css']
+})
+export class WebSocketComponent implements OnInit {
+
+  constructor(private wsService:WebSocketService) { }
+
+  ngOnInit() {
+    this.wsService.createObservableSocket("ws://localhost:8085")
+        .subscribe(
+            data => console.log(data),
+            err => console.log(err),
+            () => console.log("流已经结束")
+        )
+  }
+
+  sendMessageToserver(){
+      this.wsService.sendMessage("Hello from client");
+  }
+
+}