微信小程序 增、删、改、查操作实例详解
1.以收货地址的增删改查为例
2.文件目录
<text class="consignee-tit">收货人信息
<view class="consignee-main">
<view class="flex flex-align-center flex-pack-justify">
<view class="flex flex-align-center flex-pack-justify">
<view class="flex flex-align-center flex-pack-justify">
<view class="delivery-time flex flex-align-center flex-pack-justify">
<picker mode="date">
<view class="receipt-address">
<view class="receipt-address-tit">收货地址信息
<view wx:for="{{addressInfo}}" wx:key="unique">
<view class="receipt-address-list clearfix">
<image src="../../images/address-icon.png">
<view class="address-list-main">
<view class="clearfix">
<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">编辑
<view class="receipt-true">
<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(),当页面加载的时候,调用这个方法。
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="/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"
that.setData({
"addressInfo": res.data.info,})
},
res为调用成功以后服务器端返回的数据,
that.setData({"addressInfo": res.data.info,}) 添加数据到当前页面的data对象,键名为addressInfo,键值是返回的数据,我需要的是res的data对象的info对象的所有信息
wx.showToast({
title: '服务器网络<a href="/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方法
}
查看Shipping模型中的getAddress()方法
这样就根据用户是否有地址还返回相应的JSON数据
本例子的JSON数据是
请求成功以后就将JSON添加到data{}中,并设置键值为addressInfo
那么接下来就是将这些信息展示在前端页面上
<image src="../../images/address-icon.png">
<view class="address-list-main">
<view class="clearfix">
<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为触发时间的方法名
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="/tag/shanchu/" target="_blank" class="keywords">删除</a>之后应该有一个刷新<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>,等和其他<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>刷新<a href="/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>一起做
}
},duration: 1500
})
}
})
}
点击前端删除按钮的时候,触发deleteClick事件,可以传入一个参数,代表事件对象。
event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值
增、改
之前觉得增加和修改会和表单提交一样简单,但是做了一些还是觉得不一样,好好在写一遍。
首先查看前台表单
<text class="consignee-tit">收货人信息
<view class="consignee-main">
<view class="flex flex-align-center flex-pack-justify">
<view class="flex flex-align-center flex-pack-justify">
<view class="flex flex-align-center flex-pack-justify">
<view wx:for="{{addressInfo}}" wx:key="unique">
<view class="receipt-address-list clearfix">
<image src="../../images/address-icon.png">
<view class="address-list-main">
<view class="clearfix">
<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">编辑 <view class="receipt-true">
<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 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
也就是说将这条数据取出来,没什么好说的。
"addressEdit": res.data.info,})
}</pre>
这里请求成功以后,调用小程序setData方法,将服务器端返回的信息放到addressEdit[]中,然后在前端页面调用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}将数据展示出来,这就是修改时候的操作。
接下来是提交表单的操作
Js代码如下
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请求差不多,找几个不一样的
"Content-Type": "application/x-www-form-urlencoded"
},
由于POST和GET传送数据的方式不一样,POST的header必须是
GET的header可以是'Accept': 'application/json'
这里是需要POST到服务器端的数据
Save方法代码
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!