创建项目
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
- ){}
- }
作者:戴子
来源:https://blog.csdn.net/dailuwen/article/details/79375980
如果给你带来帮助,欢迎微信或支付宝扫一扫,赞一下。


实际测试报httpClient, httphander等错,使用HttpClientModule解决
@NgModule({
imports: [BrowserModule, HttpClientModule, ...],
})