第八章 小程序后端开发

8.1 比目后端云简介

1.注册Bmob 账号

进入Bmob官网后，单击右上角的“注册” 按钮，在跳转页面填入姓名、邮箱，并设置密码，确认后邮箱激活Bmob账户，即可完成。

2.创建应用

 3.配置小程序密钥

进入后台，选择应用项目，单击“设置” -->“应用密钥” 即可查看如下图。

 4.下载及安装Bmob SDK

下载安装完毕后，解压下载后的SDK，把bmob.js 和underscore.js 放置小程序的utils 目录中，则在其他需要使用的页面添加以下代码：

var Bmob = require('../../utils/bmob.js');

同时，在小程序中的app.js 中加入下面两行代码进行全局初始化：

var Bmob = require('./utils/bmob');
Bmob.initialize("你的AppID","你的 REST API Key");

8.2 数据的增、删、改、查

为了便于在Bmob中实现数据的增加、删除、修改、查询，我们在新建的应用中新增“test” 表。

1.添加记录

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
  add:function(){
    var Test =Bmob.Object.extend("test");
    var test =new Test();
    test.set("title","WXML");
    test.set("content","Weixin Markup Language 微信标记语言");
    test.save(null,{
      success:function(result){
        console.log("添加成功,objectId:" + "result.id");
      },
      error:function(result,error){
        console.log('添加失败');
      }
    });
  },
})

 .wxml

<button type="primary" bind:tap="add">添加记录</button>

效果图

查看Bmob 如图

 2.获取记录

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
    data:{
   },
   query:function(){
  var Test = Bmob.Object.extend("test");
  var query = new Bmob.Query(Test);
  query.get("731734a725",{
    success:function(result){
      console.log("该记录标题为" + result.get("title"));
      console.log("该记录的内容为" + result.get("content"));
    },
    error:function(result,error){
      console.log("查询失败");
    }
  });
  },
  })

.wxml

<button type="primary" bind:tap="query">获取记录</button>

效果图

3.修改记录

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
modi:function(){
  var Test = Bmob.Object.extend("test");
  var query = new Bmob.Query(Test);
  query.get("731734a725",{
    success:function(result){
      result.set('title',"WXSS");
      result.set('content',"WenXin Style Sheets");
      result.save();
      console.log("修改成功")
      console.log("该记录标题修改为" + result.get("title"));
      console.log("该记录内容修改为" + result.get("content"));
    },
    error:function(object,error){
      console.log("修改失败")
    }
  });
},
})

.wxml

<button type="primary" bind:tap="modi">修改记录</button>

效果图

3.1删除一行记录

示例代码

.js

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
del:function( ){
  var Test = Bmob.Object.extend("test"); 
  var query = new Bmob.Query(Test);
  query.get("731734a725",{
  success:function(object){
  //The object was retrieved successfully.
   object.destroy({
  success:function(deleteObject){
     console.log("删除记录成功");
    },
  error:function(error){
     console.log("删除记录失败");
  }
});
},
  error:function(object,error){
  console.log("修改失败")
  },
});
},
})

.wxml

<button type="primary" bind:tap="del">删除一行记录</button>

效果图

 

4.获取所有数据记录

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
queryall:function(){
  var Test = Bmob.Object.extend("test");
  var query = new Bmob.Query(Test);
  query.find({
    success:function(results){
          console.log("共查询到" + results.length + "条记录");
          for(var i=0;i<results.length;i++){
            var object = results[i];
            console.log(object.id + '-' + object.get('title') + '-' +object.get('content'));
          }
        },
    error:function(error){
      console.log("查询失败:" +error.code +"" +error.message);
    }
  });
},
})

.wxml

<button type="primary" bind:tap="queryall">获取所有数据记录</button>

效果图

5.条件查询 

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
wherequery:function(){
  var Test = Bmob.Object.extend("test");
  var query = new Bmob.Query(Test);
  query.equalTo("title","WXML");
  query.find({
    success:function(results){
          console.log("共查询到" + results.length + "条记录");
          for(var i=0;i<results.length;i++){
            var object = results[i];
            console.log(object.id + '-' + object.get('title'));
          }
        },
    error:function(error){
      console.log("查询失败:" +error.code +"" +error.message);
    }
  });
},
})

效果图

6.分页查询

使用limit 方法限制查询结果的数据条数来进行分页。默认情况下，limit的值为10，最大值有效设置值为1000

query.limit(10);

 同时，skip 方法可以做到跳过查询的前多少条数据来实现分页查询的功能。skip 的默认值为10。

query.skip(10);

t8.3 上传图片

1.上传一张图片并显示

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
    upimage:function(){
     var that = this;
     wx.chooseImage({
       count:1,
       sizeType:['compressed'],
       sourceType:['album','camera'],
       success:function(res){
         var tempFilePaths = res.tempFilePaths;
         if(tempFilePaths.length>0){
           var newDate = new Date();
           var newDateStr = newDate.toLocaleDateString();
           var tempFilePath=[tempFilePaths[0]];
           var extension = /\.([^.]*)$/.exec( tempFilePath[0]);
           if(extension){
             extension = extension[1].toLowerCase();
           } 
           var name = newDateStr + "." +extension;
           var file = new Bmob.File(name,tempFilePaths);
           file.save().then(function(res){
             console.log(res.url());
             var url = res.url();
             that.setData({
               url:url
             })
             
           },function(error){
             console.log(error);
           })
         }
       }
     })
   }
})

效果图

2.上传多张图片并显示

示例代码

.js

var Bmob = require('../../utils/bmob');
Page({
  data:{
  },
  uppic:function(){
    var that = this;
    wx.chooseImage({
    count:9,
    sizeType:['compressed'],
    sourceType:['album','camera'],
    success:function(res){
      wx.showNavigationBarLoading()
      that.setData({
        loading:false
      })
      var urlArr=new Array();
   
   
      var tempFilePaths = res.tempFilePaths;
      console.log(tempFilePaths)
      var imgLength=tempFilePaths.length;
      if(imgLength>0){
        var newDate=new Date();
        var newDateStr=newDate.toLocaleDateString();//获取当前日期文件
   
        var j=0;
        for(var i=0;i<imgLength;i++){
          var tempFilePath=[tempFilePaths[i]];
          var extension =/\.([^.]*)$/.exec(tempFilePath[0]);
        
        if(extension){
          extension=extension[1].toLowerCase();
   
        }
        var name=newDateStr+"."+extension;
        var file=new Bmob.File(name,tempFilePath);
        file.save().then(function(res){
          wx.hideNavigationBarLoading()
          var url=res.url();
          console.log("第"+i+"张Url"+url);
          that.setData({
            url:url
          })
          urlArr.push({"url":url});
          that.setData({
            list:urlArr
          })
          console.log(res.list)
          j++;
          console.log(j.imgLength);
        },function(error){
          console.log(error);
        })
      }
    }
  }
  });
  }
  })

效果图