微信小程序中的异步请求连接mysql数据库微信小程序外接数据库

转载

imking 2024-07-01 00:30:40

文章标签 微信小程序云开发参数传递数据传输后台 文章分类 MySQL 数据库

微信小程序数据传输

数据传输流的种类

云开发数据传输
其他后台数据传输
当前页面数据传输
页面之间数据引用
页面之间数据传输
全局变量数据传输
不同数据传输之间的对比

数据传输流的种类

两个月前微信小程序提供云开发服务，为微信小程序开发者提供极大的便利，和省去了后台开发的工作量，使开发者得到了后台和数据的支撑，可以将精力集中在内容开发上。以下就介绍下小程序的几种后台数据传输形式。

云开发数据传输

初始化
首先，我们创建一个云数据库，环境名称为：BOOKS，环境ID为：BOOKS-ks911s
在一个小程序页面调用云数据库时要首先初始化，

//index.js
    //获取应用实例
    var app = getApp();
    wx.cloud.init({env:'BOOKS-ks911s'})
    const db = wx.cloud.database({env:'BOOKS-ks911s'})[此处ENV可以不屑]
    Page({
         data:{
            content:[],
            info:[],
            detail:[],
            num:0,
            params:false
         }，
         ......
    })

数据获取
然后我们创建一个云数据库，名为todolist，表格形式如下：

第一张表
    "_id":abc1
    "_openid":user-open-id（这里为了简化用了这个名称，注释如果这个_openid不是你的_openid，那么很多操作可能无法进行，一定要保证_openid是自己微信对应的那个）
    "bookinfo":xxx
    "infodetail":yyy
    "infonum":3
    "inforeading": true            
第二张表
    "_id":abc2
    "_openid":user-open-id（这里为了简化用了这个名称，注释如果这个_openid不是你的_openid，那么很多操作可能无法进行，一定要保证_openid是自己微信对应的那个）
    "bookinfo":aqx
    "infodetail":pod
    "infonum":3
    "inforeading": false

（注释这两张表的_openid是一模一样的_openid，不然调用数据可能失败）
然后我们要获取一个ID记录的所有数据(注释这个ID为数据库中的_id)

db.collection('todolist').doc('abc1').get({
          success:function(res){
          //res.data 包含该记录的数据
          console.log(res.data)
          }
       })

然后我们要获取一个ID记录的bookinfo数据(注释这个ID为数据库中的_id)

db.collection('todolist').doc('abc').get({
          success:function(res){
          //res.data 包含该记录的数据
          console.log(res.data[0].bookinfo)
          }
       })

如果我们要获取一个infonum为3的表的所有记录：

db.collection('todolist').where({
         infonum:3})
     .get({    
         success:function(res){
             console.log(res.data)
         }
      })

如果我们要获取一个infonum为3的所有表中的第二张：

db.collection('todolist').where({
         infonum:3})
     .get({    
         success:function(res){
             console.log(res.data[1])
         }
      })

如果我们要获取一个infonum为3的所有表中的第二张的infodetail：

db.collection('todolist').where({
         infonum:3})
     .get({    
         success:function(res){
             console.log(res.data[1].infodetail)
         }
      })

数据操作

插入数据

在todolist中插入一个新的数据库
            db.collection('todolist').add({
                data: {
                             // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
                      bookdescript: "helloworld",
                      readingtime: new Date("2018-10-29"),
                      booktags: [
                           "hello",
                           "books"
                          ],
                     // 为待办事项添加一个地理位置（113°E，23°N）
                   location: new db.Geo.Point(113, 23),
                   done: false
                   },
                   success: function(res) {
                  // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
                  console.log(res)
                  }
              })[1]

更新数据

db.collection('todolist').where({bookinfo:'aqx'}).update({
                data: {
                            infodetail:"helloworld",
                   },
                   success: function(res) {
                  // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
                  console.log(res)
                  }
              })[2]

删除数据

db.collection('todolist').doc('abc1').remove({
                  success: function(res){
                     console.log(res.data)
                  }
             })[3]

传输和整理格式

将数据库todolist的第一张表的数据传入Page Data中的content,info,detail

onload: function(options){  
      db.collection('todolist').where({
          infonum:3})
      .get({
          success:function(res){
             that.setData({
                 content:res.data[0],
                 info:res.data[0].bookinfo,
                 detail:res.data[0].infodetail（注：注意这里的格式，要具体到表格中的单项数据，res.data[i].what）          
             })
          }
       })
      }

其他后台数据传输

初始化

我们沿用上页面的Page Data初始化数据

数据获取

wx.request({
  url: 'site(资源地址)',
  method:'POST',
  data:'info(需要传递的参数)',
  header:{
      'content-type':'application/x-www-form-urlencoded',
      'Accept':'application/json'
  },
  success:function(res){
       console.log(res.data)
    }
  });

数据操作
上传数据

upload:function(){
       var that = this
          for(var i=0; i < that.data.content.length;i++){
              wx.uploadFile({
                  url:'site(资源地址)'',
                  filePath: that.data.info[i],
                  name: 'content',
                  success: function(res){
                     console.log(res)
                  }
              })
  }    
},

删除数据

delete:function(options){
      wx.request({
        url:'site(资源地址)',(等价于site(资源地址)?num=2&id=aabb),
        data:{
           page:'2',
           id:'aabb'
         },
         header:{
             'content-type':'application/x-www-form-urlencoded',
             'Accept':'application/json'
         },
         method: 'DELETE',
         success:function(res){
             console.log(res.data)
          }
     })
  },

传输和整理格式
我们将获取的信息传输上我们的PAGE,DATA页面

wx.request({
  url: 'site(资源地址)',
  method:'POST',
  data:'info(需要传递的参数)',
  header:{
      'content-type':'application/x-www-form-urlencoded',
      'Accept':'application/json'
  },
  success:function(res){
       console.log(res.data)
       that.setData({
             content:res.data.data[0],
             info:res.data.data[0].info,
             detail:res.data.data[0].detail,
             num:res.data.data[0].num,
             params;res.data.data[0].params
         })
  }
});

当前页面数据传输

初始化
沿用之前的Page，data页面：

Page({
  data:{
           content:{
                   option1:11,
                   option2:12
                },
           info:[],
           detail:[],
           num:0,
           params:false
          }，
          ......
      })

数据操作
添加数据

onLoad: function (options) {
  this.setData({
     content:{
        option1:17
      }
      info:["abc","bcd"]
   })
 console.log(this.data.content.option1)
 //显示结果为 17
 console.log(this.data.info[0])
 //显示结果为 abc
console.log(this.data.info)
//显示结果为 ["abc", "bcd"]
},

删除数据

del:function(e){
   
    var info = this.data.info;
    info.pop(this.data.info.length)
    this.setData({
      info:info
    })
 },

传输和整理格式

我们来整理以下三种传输模式

this.data.content.option1
  this.data.info[0]
  this.data.info
  var that=this
  that.data.content.option1
  that.data.info[0]
  that.data.info

页面之间数据引用

初始化

在page目录的同级目录建立一个data目录，创建一个data/books-content.js的文件

var bookinfos_local = 
  [{
     "info": "诗经选取",
     "detail":"第一章",
     "content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]
   },
   {
     "info": "道德经选取",
     "detail":"第二十一章",
     "content": ["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]
   }]
 module.exports = {
 getbooks:bookinfos_local}

数据获取

在其他的page目录下的页面调用时,例如：page/wenda/wenda.js,调用文档时首先声明

var app = getApp()
var bookinfo = require("../../data/books-content.js")

此时，在页面中执行以下语句，展示出的结果分别为：

console.log(bookinfo.getbooks)
            result:[{
                   "info": "诗经选取",
                   "detail":"第一章",
                   "content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]},
                   {
                  "info": "道德经选取",
                  "detail":"第二十一章",
                  "content": ["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]}]
                  
            console.log(bookinfo.getbooks.length)
            result:2 
            
            console.log(bookinfo.getbooks[0])
            result:{
                   "info": "诗经选取",
                   "detail":"第一章",
                   "content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]}
            
            console.log(bookinfo.getbooks[0].info)
            result:诗经选取
            
            console.log(bookinfo.getbooks[1].content)
            result:["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]
            
            console.log(bookinfo.getbooks[1].content[0])
            result:孔德之容，惟道是从

传输和整理格式

再在wenda.js中进行数据传输

Page:({
      data:{
         content:[],
         info:[],
         detail:[],
         num:0,
         params:false,
        },
      onLoad：function(options){
            var contents = [];
            var infos = [];
            var details = [];
            var that = this;
            for (var i = 0; i < bookinfo.getbooks.length;i++){
                  contents[i] = bookinfo.getbooks[i].content;
                  infos[i] = bookinfo.getbooks[i].info;
                  details[i] = bookinfo.getbooks[i].detail;
                 }
           that.setData({
               content:contents,
               info:infos,
               detail:details
            })
      }
    })

页面之间数据传输

初始化

这次我们对Page,Data页面做一个小小的改动

data: {
    Form: {
        content:[],
        info:[],
        detail:[],
        num:0,
        params:false 
     }
}

数据获取

将要序列化成一个JSON 字符串的值进行传输

let form =JSON.stringify(this.data.Form);
  wx.navigateTo({
        url: '/pages/home/articles-detail/index?form='+form,
  })

单个数据处理

wx.navigateTo({
        url: '/pages/home/articles-detail/index?form='+this.data.Form.content[0],
  })

多个数据处理

wx.navigateTo({
            url: '/pages/home/articles-detail/index?form1='+this.data.Form.content[0]+‘&form2=’+this.data.Form.content[1]+‘&form3=’+this.data.Form.content[2]+‘&form4=’+this.data.Form.content[3],
      })

传输和整理格式

进入下个页面进行数据传输和整理

整个JSON格式

onLoad: function (options) {
       let form = JSON.parse(options.form);
       console.log("options.form:"+options.form)
       this.setData({
         Form: form
       })
 },

单个数据

onLoad: function (options) {
       let form = options.form;
       console.log("options.form:"+options.form)
       this.setData({
         Form:{
         content:form}
       })
 },

全局变量数据传输

初始化
我们在app.js中设置需要的全局变量的参数

App({
         globalData:{
              "info": "诗经选取",
              "detail":"第一章",
              "content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]
          }
     })

传输和整理格式
传输进入Page页面：

var app = getApp()
 Page({
     data:{
         content:getApp().globalData.content,
         info:getApp().globalData.info,
         detail:getApp().globalData.detail
     }
 })[1]

不同数据传输之间的对比

我们来对比下云开发，外接后台，当前页面，页间引用，页间传输，全局变量中要调取一个bookinfo的方式的区别

云开发：

res.data[0].bookinfo

外接后台：

res.data.data[0].bookinfo

当前页面：

方式一：

this.data.bookinfo

方式二：

var that = this
 that.data.bookinfo

页间引用：

bookinfo.getbooks[0].bookinfo

页间传输：

onLoad:function(options){
            var str = options.bookinfo}

全局变量

getApp().globalData.bookinfo

第一次写数据传输的文章，不足和漏洞请多指教

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：spring cloud loadbalance spring cloud loadbalance重试

下一篇：maven该配置后要重启吗 maven需要配置吗

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯