Angular4 数据请求 POST、GET

创建项目

ng new OBJECT_NAME

创建一个名为 httpRequest  的服务

ng generate service httpRequest 

在app.module.ts 里面添加

providers : [HttpRequestService]

HttpRequestService.ts 文件

import { Injectable, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class HttpRequestService {

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json;application/x-www-form-urlencodeed; charset=utf-8'})
  };

  constructor(private httpClient : HttpClient) { }

  httpPost(reqUrl : string, reqBody, comp, flag) {
    //后台接收数据 需要 @RequestBody 标签
    this.httpClient.post(reqUrl, reqBody, this.httpOptions)
    .subscribe(
      val => {
        console.log('post请求成功', val);
        
        if(val['success']){
          comp.postOk(val, flag);
        }else{
          comp.postErr(val, flag);
        }
      },
      error => {
        console.log('post请求失败', error);
        comp.postErr(error, flag);
      }
    );
    
  }

  httpGet(reqUrl, comp, flag){
    this.httpClient.get(reqUrl, this.httpOptions)
    .subscribe(
      val => {
        console.log('get请求成功', val);
        
        if(val['success']){
          comp.getOk(val, flag);
        }else{
          comp.getErr(val, flag);
        }
        
      },
      error => {
        console.log('get请求失败', error);
        comp.getErr(error, flag);
      }
    );
  }

  show() : string {
    return '我是 HttpRequestService 调用我干嘛';
  }



}

创建一个名为 sku-from 的组件

ng g component sku-from

sku-form.component.html 文件

<div>
  sku-form works!
  <form #skuForm="ngForm" (ngSubmit)="onSubmit(skuForm)">
    <div class="form-group">
      <label for="name">货品代码</label>
      <input type="text" class="form-control" [(ngModel)]="skuInfo.sku" name="sku" required minlength="4" />
    </div>

    <div class="form-group">
      <label for="alterEgo">货品描述</label>
      <input type="text" class="form-control" [(ngModel)]="skuInfo.descr" name="descr" required />
    </div>
    <br/>
    <button type="button" nz-button [nzType]="'dashed'" (click)="newSku()">new sku</button>
    <button type="submit" nz-button [nzType]="'primary'">Submit</button>
  </form>
</div>

sku-form.component.ts文件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators }   from '@angular/forms';

import {HttpRequestService} from '../httpRequest.service'

import {Sku} from './../sku';

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

  private api_sku_save = 'http://localhost:8081/sino-web/bas/sku/saveDetails';
  private skuInfo : Sku = new Sku(1, '0000000000010', '红牛', new Date());
  private skuForm : FormGroup;
  
  reqsuccess : boolean;
  reqsuccessMsg : string;

  constructor(private httpRequestService : HttpRequestService) {
    this.createForm();
   }
  ngOnInit() { }

  createForm(){
    this.skuForm = new FormGroup({
      sku : new FormControl(this.skuInfo.sku, Validators.minLength(7)),
      descr : new FormControl(this.skuInfo.descr, Validators.required)
    });
  }
  newSku(){
    this.skuInfo = new Sku(null, '', '', null);
  }
  onSubmit(formData) {
/** 
         * valid:是否有效、 invalid:无效、dirty:脏\status:状态、errors:显示错误
         */
    if(formData.form.valid){
      this.httpRequestService.httpPost(this.api_sku_save, this.skuInfo, this, 'save');
    }

  }

  postOk (val, flag){
    this.reqsuccess = true;
    this.reqsuccessMsg = '';
  }
  postErr (val, flag){
    this.reqsuccess = false;
    this.reqsuccessMsg = val['msg'];
    console.log(val);
  }

  
}

创建一个名为 sku的类

ng g generate class Sku

sku.ts文件

export class Sku {

    constructor(
        public id : number,
        public sku : string,
        public descr : string,
        public createdAt : Date
    ){}
}