微信小程序增、删、改、查操作实例详解

1.以收货地址的增删改查为例

2.文件目录

js文件是逻辑控制，主要是它发送请求和接收数据，
json用于此页面局部配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html

<text class="consignee-tit">收货人信息

姓名

电话

地址

送货时间

<view class="receipt-address-tit">收货地址信息

<view class="clearfix">收货地址{{item.address}}1km

<view class="address-info">收货人{{item.name}}

<view class="address-time">收货人电话{{item.mobile}}

<view data-deleteid="{{item.id}}" bindtap="deleteClick">删除

<view data-editid="{{item.id}}" bindtap="editClick">编辑

<button class="btn_login" formType="submit">保存

前端页面主要展示一个表单和已有收货人信息

1.其中几个关键点需要理解

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username”PHP可以用$_POST[‘username']来接收。

c.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

，这个按钮就是用来开启提交事件的。

至于循环，拆开解

d.小程序给我们一个封装好的方法onLoad: function()，当页面加载的时候，调用这个方法。

Page({

data:{},onLoad: function() {

var that = this;

//收货地址首页

wx.request({

//缺少用户唯一标识，现在的在服务器的控制器里有一个假id = 2

url: 'https://shop.yunapply.com/home/shipping/index',method: 'GET',data: {},header: {

 'Accept': 'application/json'

},success: function(res) {

that.setData({

  "addressInfo": res.data.info,})

console.log(res.data.info);

},fail:function(){

   wx.showToast({

    title: '服务器网络<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>!',icon: 'loading',duration: 1500

   })

  }

})

}

})

查

收货地址的首页，用于拉取当前用户已有的收货地址

不知道为什么要这样做，可能是为了避免this冲突或者语意不明确，将当前的对象，赋值给变量that

wx.request({})发起https请求

url: 'https://shop.com/home/shipping/index',所需要请求的网址接口

method: 'GET',请求的方式，默认是GET，当时POST的时候，必须声明

data: {},发送的请求的数据

header: {},发送的头信息，

GET方式的头信息为：'Accept': 'application/json'

POST方式的头信息为："Content-Type": "application/x-www-form-urlencoded"

success:function()请求成功调用的方法

Fail:function() 请求失败调用的方法

that.setData({

  "addressInfo": res.data.info,})

res为调用成功以后服务器端返回的数据，

that.setData({"addressInfo": res.data.info,}) 添加数据到当前页面的data对象，键名为addressInfo,键值是返回的数据，我需要的是res的data对象的info对象的所有信息

   wx.showToast({

    title: '服务器网络<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>!',duration: 1500

   })

  }

网络请求失败调用的方法

showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading和success这两个状态。duration是弹出框在屏幕上显示的时间。

a.url是你请求的网址，比如以前在前端，POST表单中action=‘index.PHP'，这里的index.PHP是相对路径，而小程序请求的网址必须是网络绝对路径。

方法

c.将得到的值添加到data里

看HOME模块下的Shipping控制下的index方法

getAddress($use_id); if ($res == false){ $this->error('暂无收货地址','',true); }else{ $this->success($res,true); }

}

查看Shipping模型中的getAddress()方法

where(array('user_id'=>$id))->select(); if ($address_list == false){ return false; } return $address_list; }

这样就根据用户是否有地址还返回相应的JSON数据

本例子的JSON数据是

请求成功以后就将JSON添加到data{}中，并设置键值为addressInfo

那么接下来就是将这些信息展示在前端页面上

<view class="clearfix">收货地址{{item.address}}1km

<view class="address-info">收货人{{item.name}}

<view class="address-time">收货人电话{{item.mobile}}

<view data-deleteid="{{item.id}}" bindtap="deleteClick">删除

<view data-editid="{{item.id}}" bindtap="editClick">编辑

控制属性wx:for绑定一个数组，就是JS中的addressInfo这个数组，默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。可以根据{{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}获取到当前数据的地址、收货人、电话和该条信息的id

循环之后就可以按照格式展示所有地址信息了，相当于TP模板中的foreach

删

在前台模板的循环数据里可以看到这样一条标签

bindtap属性是微信在模板页中绑定点击事件，deleteClick为触发时间的方法名

在index.js中，删除代码如下：

删除地址

deleteClick:function(event){

var id = event.currentTarget.dataset.deleteid;

wx.request({

url: 'https://shop.yunapply.com/home/shipping/delAddress?id='+id,success: function(res){

if(res.data.status == 0){

 wx.showToast({

  title: res.data.info,duration: 1500

 })

}else{

 wx.showToast({

  title: res.data.info,icon: 'success',duration: 1000

 })

 //<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>之后应该有一个刷新<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>，等和其他<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>刷新<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>一起做

}

},duration: 1500

   })

  }

})

}

点击前端删除按钮的时候，触发deleteClick事件，可以传入一个参数，代表事件对象。

event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值

然后通过GET方式传入url，在服务器端删除功能如下

where(array('id'=>$id))->delete(); if ($res){ $this->success('删除成功',true); }else{ $this->error('删除失败',true); } }

根据返回的JSON值就可以提示删除成功与否

增、改

之前觉得增加和修改会和表单提交一样简单，但是做了一些还是觉得不一样，好好在写一遍。

首先查看前台表单

<text class="consignee-tit">收货人信息

姓名

电话

地址

<view class="clearfix">收货地址{{item.address}}1km

<view class="address-info">收货人{{item.name}}

<view class="address-time">收货人电话{{item.mobile}}

<view data-deleteid="{{item.id}}" bindtap="deleteClick">删除

<button class="btn_login" formType="submit">保存

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

bindsubmit=”formSubmit”这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username”PHP可以用$_POST[‘username']来接收。

c.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

，这个按钮就是用来开启提交事件的。

d.由于添加地址和编辑地址都是在一个页面的，所以我需要在每个表单中，加一个默认值变量，当点击修改的时候，默认值就显示在输入框中。

e.表单中有一个编辑，绑定了事件editClick，当点击这个按钮的时候，就会进入编辑模式

添加和修改的放在一个函数里面，但是修改数据的显示是另外一个函数

先说修改，点点击编辑的时候，触发editClick事件

JS如下：

var that = this;

var id = event.currentTarget.dataset.editid;

wx.request({

url: 'https://shop.yunapply.com/home/shipping/edit?id='+id,duration: 1500

 })

}else{

 that.setData({

   "addressEdit": res.data.info,})

}

},duration: 1500

   })

  }

})

为了更好理解，贴个图

最下面有一个保存按钮，当点击编辑的时候，触发editClick:function(event),这个event是当前触发事件的对象，

var id = event.currentTarget.dataset.editid; 就是获取当前事件对象的dataset中的editid的值，这里id是当前地址的id

url: 'https://shop.com/home/shipping/edit?id='+id

Wx.request 的url，将id值放在url上，作为GET参数，传递到服务器。

data: {},是需要额外传递的数据

method: 'GET',是数据传递方式默认是“GET”，保持大写

data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

这里的data就是POST给服务器端的数据以{name:value}的形式传送

success:function()是请求状态成功触发是事件，也就是200的时候，注意，请求成功不是操作成功，请求只是这个程序到服务器端这条线的通的。

fail:function()就是网络请求不成功，触发的事件。

这里的一段代码是和PHP后端程序有关系的，具体流程是这样的，

1.GET通过数据到https://shop.com/home/Shipping/edit这个接口，用过THINKPHP的就会知道是HOME模块下的Shipping控制下的edit方法

2.后端PHP 代码如下：

控制器ShippingController.class.PHP

find($id); $this->success($res,true); }

也就是说将这条数据取出来，没什么好说的。

   "addressEdit": res.data.info,})

}</pre>

这里请求成功以后，调用小程序setData方法，将服务器端返回的信息放到addressEdit[]中，然后在前端页面调用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}将数据展示出来，这就是修改时候的操作。

接下来是提交表单的操作

Js代码如下

if(e.detail.value.mobile.length==0||e.detail.value.name.length==0 ||e.detail.value.address.length==0){

wx.showToast({

title: '收货人所有信息不得为空!',duration: 1500

})

}else if(e.detail.value.mobile.length != 11){

wx.showToast({

title: '请输入11位手机号码!',duration: 1500

})

}else{

wx.request({

  url: 'https://shop.yunapply.com/home/shipping/save',header: { 

   "Content-Type": "application/x-www-form-urlencoded" 

  },method: "POST",data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},success: function(res) {

   if(res.data.status == 0){

     wx.showToast({

      title: res.data.info,duration: 1500

     })

   }else{

     wx.showToast({

      title: res.data.info,duration: 1000

     })

     setTimeout(function(){

      wx.navigateTo({

       url:'../address/index'

      })

     },1000)

   }

  },duration: 1500

   })

  }  

 })

}

在前端的FORM表单中，当点击formtype=“submit”这个按钮的时候，触发addSubmit事件，前面的if都是JS验证，防止用户不填写信息。

1.其他的request请求差不多，找几个不一样的

调用服务器端的save方法

"Content-Type": "application/x-www-form-urlencoded"

由于POST和GET传送数据的方式不一样，POST的header必须是

GET的header可以是'Accept': 'application/json'

这里是需要POST到服务器端的数据

Save方法 代码

create()){ $this->error($shipping->getError(),true); }else{ if (is_numeric($_POST['id'])){ if ($shipping->editAddress($_POST['id'])){ $this->success('地址修改成功',true); }else{ $this->error('地址修改失败',true); } }else{ if ($shipping->addAddress($user_id)){ $this->success('添加地址成功',true); }else{ $this->error('添加地址失败',true); } } } } }

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

原文链接：https://www.f2er.com/weapp/42542.html

微信小程序 增、删、改、查操作实例详解