版权声明：本文为博主原创文章，未经博主允许不得转载。 javascript:void(0)
创建项目
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
){}
}
---------------------
作者：戴子
