【物联网项目】前端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.dataif (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 mqttnpm install uuid

二、具体使用步骤

1.配置连接参数

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

mqtt.js内容：

export const MQTT_IP = '192.168.9.128:8083/mqtt'//mqtt地址端口, 使用emqx时一定要加mqttconst 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页面：

    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())                })            }        }    }

⛳uniapp使用echarts图表

一、安装环境

uniapp终端输入指令

pnpm add echarts-or-npm install echarts

二、具体使用步骤

HTML

 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);        });    },