微信小程序操作数据库

1、数据库操作

1.1 wx.request()接口

  wx.request()是腾讯公司封装好的一个request请求的函数，类似于其他程序语言的自带函数，开发者只需把这些内置函数复制过来使用即可，无需注意函数底层代码实现部分。该接口的属性如下所示。

wx.request({
          
   
  url: example.php, //仅为示例，并非真实的接口地址
  data: {
          
   
    x: ,
    y: 
  },
  header: {
          
   
    content-type: application/json // 默认值
  },
  success (res) {
          
   
    console.log(res.data)
  }
})

1.1.1 接口地址url

  url是提供JSON格式数据的接口地址，一般是开发者专门开发的或第三方服务商提供的接口地址。例如快递查询和天气预报等功能在网络上都有相应JSON接口的调用地址，其中一些接口是商业收费的。

1.1.2 请求参数data

  当小程序前端对url发起HTTPS请求时，实际上跟在浏览器打开一个网址是一个道理，在浏览器打开网址http://127.0.0.1:8080/mini/detail?id=5，实际上是向这个域名所在的服务器发送了一个HTTPS请求，在这个请求里面使用了参数id=5,这里的id=5是在请求url时需要传递过去的参数。

url:http://127.0.0.1:8080/mini/detail,
data:{
          
   
	id:5
}

等价于

url:http://127.0.0.1:8080/mini/detail?id=5

1.1.3 请求方法和请求头header

  wx.request()本质上时HTTP请求，header是请求的消息头，method是请求的方法。

示例代码如下：

method:GET,
header:{
          
   
	content-type:application/json
}

method:POST,
header:{
          
   
	content-type:application/x-www-form-urlencoded
}

  method取值’GET’或者’POST’(还有PUT和DELETE等)。

  需要说明的是，前端最终发送给服务器的数据是String类型，如果传入的data不是String类型，会被转换成String类型。转换规则如下：

对于GET方法的数据，会将数据转换成query string。 对于POST方法且header[content-type]为application/json的数据,会对数据进行JSON序列化。 对于POST方法且header[content-type]为application/x-www-form-urlencoded的数据，会将数据转换成quert string。

1.1.4 success函数

  当一个HTTPS请求成功时，小程序会自动触发这个返回成功信息的函数，这个函数是腾讯公司封装好的函数，无须开发者自己编写。开发者获取的JSON数组在res.data中。

1.2 基于数据库的新闻列表页案例

pages/list/list.wxml代码如下： <view class="body"> <!--文章列表模板 begin--> <template name="itmes"> <navigator url="../../pages/detail/detail?id={ {id}}" hover-class="navigator-hover"> <view class="imgs"><image src="{ {img}}" class="in-img" background-size="cover" model="scaleToFill"></image></view> <view class="infos"> <view class="title">{ {title}}</view> <view class="date">{ {cTime}}</view> </view> </navigator> </template> <!--文章列表模板 end--> <!--循环输出列表 begin--> <view wx:for="{ {shuzu}}" class="list"> <template is="itmes" data="{ {...item}}" /> </view> </view> pages/list/list.js Page({ /** * 页面的初始数据** */ data: { id1:1, shuzu: [] }, /** * 生命周期函数--监听页面加载*** */ onLoad: function (options) { var that=this wx.request({ url: http://127.0.0.1:8001/wenzhang/selectList, //仅为示例，并非真实的接口地址 data: { }, header: { content-type: application/json // 默认值 }, success(res) { console.log(res) that.setData({ shuzu:res.data }) } }) }, dian:function(e) { var a= e.target.id console.log(a) wx.navigateTo({ url:"/pages/detail/detail?id="+a, }) }, /*** 用户点击右上角分享*/ onShareAppMessage: function () { } }) pages/list/list.wxss .body{ height: 100%; display: flex; flex-direction: column; padding: 20rpx; } navigator { overflow: hidden;} .list { margin-bottom: 20rpx;height: 200rpx;position: relative;} .imgs { float: left;} .imgs image { display: block; width: 200rpx;height: 200rpx;} .infos { float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;} .title { font-size: 20px;} .date { font-size: 16px;color: #aaa; position: absolute;bottom: 0;} .loadMore { text-align: center;margin: 30px;color: #aaa;font-size: 16px} page{ background-color: #d1d3d4; }

程序运行结果

1.3 项目后端结构

后端SpringBoot搭建的，引入了mysql、mybatisplus、swagger、lombok等依赖。

数据库表结构：

主要的接口就两个：

也可以在swagger中测试下：