【物联网小程序】零基础用uniapp快速开发实现MQTT设备中心附后台接口

效果

工具：HbuilderX uniapp版本+微信开发者工具
项目需求：实现MQTT设备的uniapp前台显示(后台用springboot开发)
代码地址：
后台接口地址：http://121.36.196.247:8082/swagger-ui.html
演示代码：http://121.36.196.247:8083/h5/#/

后台接口地址：http://121.36.196.247:8082/swagger-ui.html

主要代码

api.js

const BASE_URL = 'http://121.36.196.247:8082'
export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) => {
				resolve(res)
				if (res.statusCode == 200) {
					if (res.data.state != 0) {
						uni.showToast({
							title: '访问异常!请联系管理员'
						})
					} 
				} else {
					return uni.showToast({
						title: '网络正在繁忙。。。'
					})
				}

			},
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败'
				})
				reject(err)
			}
		})
	})
}

data.vue

<template>
	<view>
		<view class="content1"><text>设备Id：{
  {pointId}}</text></view>

		<view class="search-data-time">
			<view class=".search-data-time-right"><text>{
  {time}}</text></view>
		</view>
		<view class="index">
			<view class="new_box" style="margin-top: 20upx;">
				<view class="bbox">
					<view class="list-box">
						<view class="list-ed">

							<view class="list-left">

								<view class="list-name">
									增碳剂
								</view>

							</view>
							<view class="list-right">
								<text class="list-p2">{
  {dataList.smp_ID}}</text>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="new_box" style="margin-top: 20upx;">
				<view class="bbox">
					<view class="list-box">
						<view class="list-ed">

							<view class="list-left">

								<view class="list-name">
									金属添加剂
								</view>

							</view>
							<view class="list-right">
								<text class="lis