【物联网项目】前端uniapp连接后端、硬件，使用Echarts

📖前言

在大二结束的暑假，自己一直都在准备湖南省的物联网技能赛。比赛要求是在三个小时内快速搭建物联网项目题，需包含PC端和APP端，因此我们选择了使用uniapp来搭建项目。经过暑假两个月的学习和训练，自己在物联网项目上有了进一步的了解。不仅学会了前端应该如何与后端、硬件连接，也进一步学习了如何使用uniapp。现将在此期间在网络上搜罗到了资料，总结分享在这里。

🤺作者简介：前端新人小白

🏡博客首页：我的学习笔记

🧗‍♀️近期目标：深入学习三剑客

目录

⛳前端连接后端

具体使用步骤

1.创建一个utils文件夹，在里面创建request.js文件

2.在utils文件下创建api.js文件

3.vue页面使用

⛳前端连接硬件

一、安装环境

二、具体使用步骤

1.配置连接参数

2.vue页面引用mqtt

⛳uniapp使用echarts图表

一、安装环境

二、具体使用步骤

 结尾

---

⛳前端连接后端

具体使用步骤

1.创建一个utils文件夹，在里面创建request.js文件

request.js内容

// 服务器地址
const BASE_URL = '/api' // 代理的api或者后端地址
 
// 请求,参数{url:'', data:{}, method:'POST'}
export const request = (options) => {
	return new Promise((resolve, reject) => {
		console.log(options.url);
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			// header:{token: uni.getStorage('user') ? uni.getStorage('user').token : ''},
            // 后端需要的请求头
			header: {
				Authorization: uni.getStorageSync('token') ?
					`Bearer ${uni.getStorageSync('token')}` : '',
				Client: 'APP'
			},
			data: options.data || {},
			success: res => {
				const data = res.data
				if (data.code === 401) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				resolve(data)
			},
			fail: error => {
				uni.showToast({
					icon: 'error',
					title: '操作错误'
				})
				reject(error)
			}
		})
	})
}

2.在utils文件下创建api.js文件

api.js内容

import { request } from '@/utils/request.js'
 
/**
 * 接口
 * @param data  请求数据
 * @@return
 */
export const add = data => {
	return request({
		url: '接口',
		method: '请求方法',
		data 
	})
}

3.vue页面使用

import { getList } from '@/api/getList.js'
 
// 然后直接使用
methods: {
	/**获取数据*/
	init(){
		getList(this.paramas).then(res => {
			console.log(res)
		})
	},
}

⛳前端连接硬件

uniapp使用MQTT协议连接emqx，进而给硬件发送消息

一、安装环境

在uniapp项目终端分别运行安装mqtt和uuid的命令行

uuid生成的唯一标识码用于生成mqtt中的clientId，防止clientId与他人重复，导致mqtt连接失败。

npm install mqtt
npm install uuid

二、具体使用步骤

1.配置连接参数

在utils文件下新建mqtt.js文件

mqtt.js内容：

export const MQTT_IP = '192.168.9.128:8083/mqtt'//mqtt地址端口, 使用emqx时一定要加mqtt
const MQTT_USERNAME = 'public'//mqtt用户名
const MQTT_PASSWORD = 'public'//密码

export const MQTT_OPTIONS = {
    connectTimeout: 5000,
    clientId: '',
    username: MQTT_USERNAME,
    password: MQTT_PASSWORD,
    clean: false
}

2.vue页面引用mqtt

vue页面：

<script>
    import { v4 } from 'uuid';
    import {
        MQTT_IP,
        MQTT_OPTIONS
    } from '@/utils/mqtt.js';
    var mqtt = require('mqtt/dist/mqtt.js')
    var client
    export default {
        mounted() {this.connect() //连接
        },
        methods: {
            connect() {
                MQTT_OPTIONS.clientId = v4()
                var that = this
                // #ifdef H5
                client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                // #ifdef MP-WEIXIN||APP-PLUS
                client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                client.on('connect', function() {
                    console.log('连接成功')
					client.publish('填写要发布主题', '填写要发布的内容', {
							qos: 1
						})
                    client.subscribe('填写要订阅主题', function(err) {
                        if (!err) {
                            console.log('订阅成功')
                        }
                    })
                }).on('reconnect', function(error) {
                    console.log('正在重连...')
                }).on('error', function(error) {
                    console.log('连接失败...', error)
                }).on('end', function() {
                    console.log('连接断开')
                }).on('message', function(topic, message) {
                    console.log('接收推送信息：', message.toString())
                })
            }
        }
    }
</script>

⛳uniapp使用echarts图表

一、安装环境

uniapp终端输入指令

pnpm add echarts
-or-
npm install echarts

二、具体使用步骤

HTML

<view><l-echart ref="chart" ></l-echart></view>

 script

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    },
                    confine: true
                },
                legend: {
                    data: ['热度', '正面', '负面']
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 15,
                    top: 40,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                series: [
                    {
                        name: '热度',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: [300, 270, 340, 344, 300, 320, 310],
                    },
                    {
                        name: '正面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: [120, 102, 141, 174, 190, 250, 220]
                    },
                    {
                        name: '负面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'left'
                            }
                        },
                        data: [-20, -32, -21, -34, -90, -130, -110]
                    }
                ]
            },
        };
    },
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    // 在页面mounted里调用，有时候mounted 组件也未必渲染完成
    mounted() {

        this.$refs.chart.init(echarts, chart => {
            chart.setOption(this.option);
        });
    },
</script>