首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 13, 2017

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

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

2.文件目录

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

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

<view class="consignee">

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

<view class="consignee-main">

<view class="flex flex-align-center flex-pack-justify">

<text>姓名</text>

<input class="flex-1" name="name" type="number" maxlength="11" placeholder="请输入收货人姓名" />

</view>

<view class="flex flex-align-center flex-pack-justify">

<text>电话</text>

<input class="flex-1" name="mobile" type="number" maxlength="11" placeholder="请输入手机号" />

</view>

<view class="flex flex-align-center flex-pack-justify">

<text>地址</text>

<input class="flex-1" name="address" type="text" maxlength="11" placeholder="请输入地址" />

</view>

</view>

</view>

<view class="delivery-time flex flex-align-center flex-pack-justify">

<text>送货时间</text>

<picker mode="date"></picker>

</view>

<view class="receipt-address">

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

<view wx:for="{{addressInfo}}" wx:key="unique">

<view class="receipt-address-list clearfix">

<image src="../../images/address-icon.png"></image>

<view class="address-list-main">

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

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

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

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

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

</view>

</view>

</view>

</view>

<view class="receipt-true">

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

</view>

</form>

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

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表单中都要有一个提交按钮，

<button formType="submit">注册</button>，这个按钮就是用来开启提交事件的。

至于循环，拆开解

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

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

<view wx:for="{{addressInfo}}" wx:key="unique">

<view class="receipt-address-list clearfix">

<image src="../../images/address-icon.png"></image>

<view class="address-list-main">

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

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

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

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

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

</view>

</view>

</view>

控制属性 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值就可以提示删除成功与否

增、改

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

首先查看前台表单

<form bindsubmit="addSubmit">

<view class="consignee">

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

<view class="consignee-main">

<input name="id" type="hidden" value="{{addressEdit.id}}" />

<view class="flex flex-align-center flex-pack-justify">

<text>姓名</text>

<input class="flex-1" name="name" type="number" value="{{addressEdit.name}}" maxlength="11" placeholder="请输入收货人姓名" />

</view>

<view class="flex flex-align-center flex-pack-justify">

<text>电话</text>

<input class="flex-1" name="mobile" type="number" value="{{addressEdit.mobile}}" maxlength="11" placeholder="请输入手机号" />

</view>

<view class="flex flex-align-center flex-pack-justify">

<text>地址</text>

<input class="flex-1" name="address" type="text" value="{{addressEdit.address}}" maxlength="-1" placeholder="请输入地址" />

</view>

</view>

</view>

<view wx:for="{{addressInfo}}" wx:key="unique">

<view class="receipt-address-list clearfix">

<image src="../../images/address-icon.png"></image>

<view class="address-list-main">

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

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

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

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

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

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

</view>

</form>

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表单中都要有一个提交按钮，

<button formType="submit">注册</button>，这个按钮就是用来开启提交事件的。

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;  就是获取当前事件对象的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);
        }
      }
    }
  }
}

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

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
VUE实现日历组件功能
Mar 13 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 #Javascript
Vue数据驱动模拟实现5
Jan 13 #Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 #Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 #Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 #Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 #Javascript
js实现淡入淡出轮播切换功能
Jan 13 #Javascript
香港购物网站(84) 巴西购物网站(71) 爱尔兰购物网站(30) 加拿大购物网站(185) 新加坡购物网站(41) 美国购物网站(1542) 韩国购物网站(27) 中国购物网站(172) 西班牙购物网站(115) 英国购物网站(954)
You might like
关于拼配咖啡，你要知道
2021/03/03 咖啡文化
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python学习笔记（一）(基础入门之环境搭建)
2014/06/05 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python中必要的名词解释
2019/11/20 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
HTML5 input元素类型：email及url介绍
2013/08/13 HTML / CSS
什么是规则表达式
2012/05/03 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
自主招生自荐信指南
2014/02/04 职场文书
大学信息公开实施方案
2014/03/09 职场文书
旅游文化节策划方案
2014/06/06 职场文书
个人委托书
2014/07/31 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers