首页 » 99链接平台 » 小程序开发日记四 (前后端数据交互)(后端数据请求配置程序)

小程序开发日记四 (前后端数据交互)(后端数据请求配置程序)

雨夜梧桐 2024-12-07 03:57:37 0

扫一扫用手机浏览

文章目录 [+]

在生产环境中的小程序中对外请求只能通过https,且需要在小程序后台配置了该请求的域名。
开发环境(本地),我们可以通过配置小程序,取消该限制。

点击开发工具“详情”,“本地配置” ,将“不校验合法域名、web-view(业务域名),TlS版本以及HTTPS证书”勾选即可请求我们的服务(如下图)。
需要注意的是在生产环境中,必须按照微信官方的要求配置https.

二、通过前端请求后端拉取数据并展示

小程序开发日记四 (前后端数据交互)(后端数据请求配置程序) 99链接平台
(图片来自网络侵删)

我们日常生活中见到的网页数据都不会硬编码在前端代码上,需要实时拉取数据库中的数据。
操作数据库是需要密码的,将密码放在前端是一个十分危险的动作。
故前端请求后端,后端拥有数据库的操作权限,将数据从数据库获取,返回到前端(当然后端不仅仅获取数据库数据,还有业务逻辑的处理)。
本处我们就是在小程序中实现这个过程。

1.编写微信小程序的前端代码(index.wxml)

<view class="test_requests"> <view bindtap="click_fn"> <button> 请求后端 </button> <text>{{title}}</text> <text>{{time}}</text> </view> </view>

2, 编写动作函数(index.js)

Page({ // 定义点击事件 click_fn: function (params) { var self = this wx.request({url:"http://192.168.5.59:80/forTest", method: 'GET', header: { "content-type": "json" }, success: function (res) { console.log(res.data) console.log(res.data.d) self.setData({ title: res.data.d, time:res.data.f }) }, fail: function (error) { // fail console.log(error) } }) }})

我们自定义了一个函数叫click_fn 。
看到html代码,将其通过关键字bindtap绑定到了这个button 块上。

当我们点击这个块时,触发click_fn 函数,向后端服务“http://192.168.5.59:7998/lz/api/v1/alive”发送了一个GET 请求。
同时将后端返回的数据 通过setDate( ) 更新到我们的变量上,然后通过前端页面展示。
这样我们便完成了一次前端请求后端,获取到数据后重新展示到前端页面。

这里有点小坑,按照上文的经验。
使用 this.setData() 方法可以将数据进行更新到我们的变量中。
但是在这个我们自定义的函数click_fn 里是不能直接使用 this。
必须要声明一个变量来承接这个 this(这里有点想不明白,清楚的朋友可以讨论下)。

最后附上python编写的后端接口代码

from flask import jsonifyfromflask_restfulimportResourcefrom utils.response_data import successclass ForTest(Resource):defget(self): data = success(title='这是一个标题', time='假装这是时间') return jsonify(data)

标签:

相关文章

正式首发!(列车旅游铁路首发旅客)

7月9日13时17分,Y459次旅游列车从广元站驶出,开往伊宁站,标志着成都局集团公司首趟“大美新疆号”旅游列车正式开行。来自成都...

99链接平台 2024-12-21 阅读808 评论0