project-base关于通信协议

本文介绍了一个具体的前后端交互案例,包括如何在Ionic框架中设置接口通信、定义HTTP请求方法及参数,以及如何从HTML表单中获取用户输入并将其发送到后端进行保存。

//获取文本框的值(nz-input)—-关键

    let keyName=this.validateForm.controls.field_name.value;
        let keyType=this.validateForm.controls.field_type.value;

project-base关于接口通信:
(1)在\src\services\@loaders的protocols.ts中,设置import {BaseLoader} from “./@base.loader”;

export class ProtocolsLoader extends BaseLoader {
  load() {
    this.http.load([
      {
        url: "http://192.168.1.86:8030/",    //后台给的接口地址
        debugUrl: "http://192.168.1.86:8030/",
        protocols: [
          {
            name: "test",  //自定义的通信name
            method: "post",
            endpoint: "codeeditor/field/",  //后台给的接口
            params: {}
          }
        ]
      }
    ]);
  }
}

(2)新建provides,命令行语句是:ionic g ;然后选择providers,自定义名字:test1

在新建的test1.ts中调用方法:

保存字段到数据库

    tableKeySave(name: string, genre: string, table: number) {
        // console.log(data);
        return this.http.execute("test", {    //使用protocols.ts中定义的通信name(test)
            name: name,
            genre: genre,
            table: table
        });
    }

(3)功能页面的table-detail.ts获取table-detail.html页面的文本框的输入值,并通过按钮tableKeySave()触发事件,进行保存到数据库:
tableKeySave(){
//获取文本框的值

     let keyName=this.validateForm.controls.field_name.value;
     let keyType=this.validateForm.controls.field_type.value;
     let forginkey=this.validateForm.controls.field_forginkey.value.id;//**表外键的id,**
        console.log(keyName);

        this.runtime.services.test2.tableKeySave(keyName,keyType,5).subscribe(resp=>{

            console.log('tableKeySave',resp);

        },err=>{
            console.log('您的输入有误,请重新输入!',err);
        })

    }

note:
1.使用字段要声明:
data; //声明
this.data=resp.results; //通讯获取到的数据

2.判断一个方法是否被调用:console.log();
3.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值