inpu https cli tex label from 項目 調用 .post

本文轉自：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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

[轉]Angular4 數據請求 POST、GET