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

网友投稿 356 2023-06-18


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

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

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

2.文件目录

js文件是逻辑控制,主要是它发送请求和接收数据,

json 用于此页面局部 配置并且覆盖全局app.json配置,

wxss用于页面的样式设置,

wxml就是页面,相当于html

收货人信息

姓名

电话

地址

送货时间

收货地址信息

收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

删除

编辑

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

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

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.小程序给我们一个封装好的方法onLoad: function(),当页面加载的时候,调用这个方法。

var app = getApp()

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: '服务器网络错误!',

icon: 'loading',

duration: 1500

})

}

})

}

})

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

var that = this;

不知道为什么要这样做,可能是为了避免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()  请求失败调用的方法

success: function(res) {

that.setData({

"addressInfo": res.data.info,

})

},

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

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

fail:function(){

wx.showToast({

title: '服务器网络错误!',

icon: 'loading',

duration: 1500

})

}

网络请求失败调用的方法

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

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

b.'https://shop.yunapply.com/home/shipping/index',以GET方式请求HOME模块下的Shipping控制下的index方法

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

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

public function index()

{

//$id 为用户名id 等以后可以通过token获取或者session(id)什么的

$use_id = 2;

$res = D('Shipping')->getAddress($use_id);

if ($res == false){

$this->error('暂无收货地址','',true);

}else{

$this->success($res,'',true);

}

}

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

/**

* 获取收货地址信息

* @param $id 当前用户id

* @return 属于用户的所有地址

*/

public function getAddress($id)

{

$address_list = $this->where(array('user_id'=>$id))->select();

if ($address_list == false){

return false;

}

return $address_list;

}

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

本例子的JSON数据是

{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"",

"city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27"

,"modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}

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

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

收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

删除

编辑

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

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

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

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

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,

data: {},

method: 'GET',

success: function(res){

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

wx.showToast({

title: res.data.info,

icon: 'loading',

duration: 1500

})

}else{

wx.showToast({

title: res.data.info,

icon: 'success',

duration: 1000

})

//删除之后应该有一个刷新页面的效果,等和其他页面刷新跳转一起做

}

},

fail:function(){

wx.showToast({

title: '服务器网络错误!',

icon: 'loading',

duration: 1500

})

}

})

}

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

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

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

public function delAddress($id)

{

$res = D('Shipping')->where(array('id'=>$id))->delete();

if ($res){

$this->success('删除成功','',true);

}else{

$this->error('删除失败','',true);

}

}

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

增、改

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

首先查看前台表单

收货人信息

姓名

电话

地址

收货地址{{item.address}}1km

收货人{{item.name}}

收货人电话{{item.mobile}}

删除

编辑

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如下:

editClick:function(event){

var that = this;

var id = event.currentTarget.dataset.editid;

wx.request({

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

data: {},

method: 'GET',

success: function(res){

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

wx.showToast({

title: res.data.info,

icon: 'loading',

duration: 1500

})

}else{

that.setData({

"addressEdit": res.data.info,

})

}

},

fail:function(){

wx.showToast({

title: '服务器网络错误!',

icon: 'loading',

duration: 1500

})

}

})

},

为了更好理解,贴个图

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

var id = event.currentTarget.dataset.editid;  就http://是获取当前事件对象的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

public function edit($id)

{

$res = D('Shipping')->find($id);

$this->success($res,'',true);

}

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

that.setData({

"addressEdit": res.data.info,

})

}

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

接下来是提交表单的操作

Js代码如下

addSubmit:function(e){

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

wx.showToast({

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

icon: 'loading',

duration: 1500

})

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

wx.showToast({

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

icon: 'loading',

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,

icon: 'loading',

duration: 1500

})

}else{

wx.showToast({

title: res.data.info,

icon: 'success',

duration: 1000

})

setTimeout(function(){

wx.navigateTo({

url:'../address/index'

})

},1000)

}

},

fail:function(){

wx.showToast({

title: '服务器网络错误!',

icon: 'loading',

duration: 1500

})

}

})

}

}

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

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

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

调用服务器端的save方法

header: {

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

},

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

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

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

data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},

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

Save方法代码

public function save()

{

//$user_id

$user_id = 2;

if (IS_POST){

$shipping = D('Shipping');

if (!$shipping->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);

}

}

}

}

}

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序 使用canvas制作K线实例详解
下一篇:java中流的使用
相关文章

 发表评论

暂时没有评论,来抢沙发吧~