表单输入保存上传到接口/修改/删除...

表单输入,调用接口,把所输入的数据保存到接口

在调用接口时,只调用就可以了,无需写成功结果,把调用的结果进行return,在保存按钮方法下面进行调用,写成功结果 具体看下图

小提示:在写按钮时若按钮调用接口方法了,可以写个uni.showLoading 防止重复点击 记得使用uni.hideLoading()隐藏 loading 提示框

如果接口数据传回来只有一条,是个对象形式,在return下面定义时方法名时不要定义[ ],要定义为{ },并且无需在v-for循环,直接使用,使用和v-for循环一样,都是{{ }},但是在上方无需v-for循环

表单输入保存上传到接口/修改/删除..._第1张图片

在写方法时记得先写判断条件 判断框内可不可以为空 如果是空 return 返回

表单输入保存上传到接口/修改/删除..._第2张图片
表单输入保存上传到接口/修改/删除..._第3张图片
表单输入保存上传到接口/修改/删除..._第4张图片

具体代码如下:






表单输入保存上传到接口/修改/删除..._第5张图片

可修改选项状态不可以写死,要向上面所述一样 是要向接口上传数据

表单输入保存上传到接口/修改/删除..._第6张图片

有两个接口,一个是获取列表信息接口,一个是修改信息接口,当获取信息接口调用成功后,把获取到的数据赋值给v-for循环的列表名 修改信息接口调用成功后直接return

表单输入保存上传到接口/修改/删除..._第7张图片

获取列表信息接口写在onLoad下面,修改信息接口要在保存按钮方法名下发进行调用

表单输入保存上传到接口/修改/删除..._第8张图片

具体详细代码如下:






表单输入保存上传到接口/修改/删除..._第9张图片

解绑或删除,重要操作要记得添加模态提示框(uni.showModal),在调用解绑接口前要先写模态提示框,当模态提示框点击确定后成功再进行调用解绑接口,在调用解绑接口成功后再重新调用列表接口即可

表单输入保存上传到接口/修改/删除..._第10张图片

切记:点击传参时,所传的参数位置在接收时是不可改变的

表单输入保存上传到接口/修改/删除..._第11张图片


你可能感兴趣的:(接口的封装和调用,前端,vue.js)