uni APP

2024-07-11 13:34| 来源: 网络整理| 查看: 265

uni APP--uni.request请求数据和渲染页面简介具体步骤1，先写一个button按钮2，写get请求3，后端写好api接口程序4，把数据打印到工作台上初步代码数据请求+页面渲染1，加载调用请求函数请求api2，在data里面写一个空数组itemList: []，接收api里面返回的数据3，api请求成功之后，将请求过来的数据赋值给上一步在data(）定义的数组itemList 里面，4，写 view界面，对数据进行循环遍历，渲染在view界面上。ok,完成参考程序界面显示

简介

前端通过request向后端数据库请求数据，通过get获取到后端数据库数据。打印到console()上。获取到数据后，再渲染到页面，数据库中的数据就渲染到页面上了。

具体步骤 1，先写一个button按钮

@click一个点击事件

2，写get请求

写请求方法,文档：https://uniapp.dcloud.io/api/request/request 找到示例代码

uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); this.text = 'request success'; } }); 3，后端写好api接口程序

HTTP响应程序，准备服务器接口：http://8.136.186.93:5001/device/device1data 数据库包含好程序

4，把数据打印到工作台上

数据请求成功后，打印到工作台上

success: (res) => { console.log(res.data); this.text = 'request success'; } 初步代码按键 export default { data() { return { } }, onLoad() { }, methods: { getlist(){ uni.request({ url: 'http://8.136.186.93:5001/device/device1data', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); this.text = 'request success'; } }); } } }

点击按钮，控制台显示信息

在这里插入图片描述

数据请求+页面渲染 1，加载调用请求函数请求api onLoad() { this.getList(); }, 2，在data里面写一个空数组itemList: []，接收api里面返回的数据 data() { return { itemList: [] } }, 3，api请求成功之后，将请求过来的数据赋值给上一步在data(）定义的数组itemList 里面， success: (res) => { console.log(res.data); this.itemList =res.data.data; console.log(this.itemList) } 4，写 view界面，对数据进行循环遍历，渲染在view界面上。

itemList获得从后台request的数据。inclination，weight是数据库中数据的表头。

{{item.inclination}} {{item.weight}} ok,完成参考程序 {{item.inclination}} {{item.weight}} export default { data() { return { itemList: [] } }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: 'http://8.136.186.93:5001/device/device1data', success: (res) => { console.log(res.data); this.itemList =res.data.data; console.log(this.itemList) } }); } } } 界面显示

在这里插入图片描述

【本文地址】

uni APP

uni APP

今日新闻

推荐新闻