[转]Angular4 数据请求 POST、GET

本文转自：https://blog.csdn.net/dailuwen/article/details/79375980

 

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dailuwen/article/details/79375980
创建项目
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
){}
}

---------------------
作者：戴子
来源：CSDN
原文：https://blog.csdn.net/dailuwen/article/details/79375980
版权声明：本文为博主原创文章，转载请附上博文链接！