ESP8266-Arduino网络编程实例-Web服务器（从LittleFS加载页面文件）

Web服务器（从LittleFS加载页面文件）

本次实例将演示如何使用LittleFS储存和读取复杂的Web页面文件。

1、硬件准备

ESP8266 NodeMCU开发板一块
数据线一条

2、软件准备

Arduino IDE或VSCode + PlatformIO

在前面的文章中，对如何搭建ESP8266开发环境做了详细的介绍，请参考：

ESP8266 NodeMCU的引脚介绍在前面的文章中做了详细的介绍，请参考：

ESP8266-Arduino编程实例-认识ESP8266

3、代码实现

1）Web页面代码（index.html）

<!DOCTYPE html>
<html>
<head>
    <title>ESP IOT DASHBOARD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="echarts.min.js" type="text/javascript"></script>
</head>
<body>
	<h1>echarts demo</h1>
	<div id="main" style="width: 1024px;height:480px;"></div>
    <script type="text/javascript">
 var chartDom = document.getElementById('main');
 var myChart = echarts.init(chartDom);
 var option;

 option = {
 color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
 title: {
 text: 'Gradient Stacked Area Chart'
 },
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 type: 'cross',
 label: {
 backgroundColor: '#6a7985'
 }
 }
 },
 legend: {
 data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
 },
 toolbox: {
 feature: {
 saveAsImage: {}
 }
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 xAxis: [
 {
 type: 'category',
 boundaryGap: false,
 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 }
 ],
 yAxis: [
 {
 type: 'value'
 }
 ],
 series: [
 {
 name: 'Line 1',
 type: 'line',
 stack: 'Total',
 smooth: true,
 lineStyle: {
 width: 0
 },
 showSymbol: false,
 areaStyle: {
 opacity: 0.8,
 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 {
 offset: 0,
 color: 'rgb(128, 255, 165)'
 },
 {
 offset: 1,
 color: 'rgb(1, 191, 236)'
 }
 ])
 },
 emphasis: {
 focus: 'series'
 },
 data: [140, 232, 101, 264, 90, 340, 250]
 },
 {
 name: 'Line 2',
 type: 'line',
 stack: 'Total',
 smooth: true,
 lineStyle: {
 width: 0
 },
 showSymbol: false,
 areaStyle: {
 opacity: 0.8,
 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 {
 offset: 0,
 color: 'rgb(0, 221, 255)'
 },
 {
 offset: 1,
 color: 'rgb(77, 119, 255)'
 }
 ])
 },
 emphasis: {
 focus: 'series'
 },
 data: [120, 282, 111, 234, 220, 340, 310]
 },
 {
 name: 'Line 3',
 type: 'line',
 stack: 'Total',
 smooth: true,
 lineStyle: {
 width: 0
 },
 showSymbol: false,
 areaStyle: {
 opacity: 0.8,
 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 {
 offset: 0,
 color: 'rgb(55, 162, 255)'
 },
 {
 offset: 1,
 color: 'rgb(116, 21, 219)'
 }
 ])
 },
 emphasis: {
 focus: 'series'
 },
 data: [320, 132, 201, 334, 190, 130, 220]
 },
 {
 name: 'Line 4',
 type: 'line',
 stack: 'Total',
 smooth: true,
 lineStyle: {
 width: 0
 },
 showSymbol: false,
 areaStyle: {
 opacity: 0.8,
 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 {
 offset: 0,
 color: 'rgb(255, 0, 135)'
 },
 {
 offset: 1,
 color: 'rgb(135, 0, 157)'
 }
 ])
 },
 emphasis: {
 focus: 'series'
 },
 data: [220, 402, 231, 134, 190, 230, 120]
 },
 {
 name: 'Line 5',
 type: 'line',
 stack: 'Total',
 smooth: true,
 lineStyle: {
 width: 0
 },
 showSymbol: false,
 label: {
 show: true,
 position: 'top'
 },
 areaStyle: {
 opacity: 0.8,
 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 {
 offset: 0,
 color: 'rgb(255, 191, 0)'
 },
 {
 offset: 1,
 color: 'rgb(224, 62, 76)'
 }
 ])
 },
 emphasis: {
 focus: 'series'
 },
 data: [220, 302, 181, 234, 210, 290, 150]
 }
 ]
 };

 option && myChart.setOption(option);
 </script>
</body>
</html>

echarts库下载地址：https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js

2）ESP8266驱动代码

驱动使用到如下开源库：

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "LittleFS.h"
#include <Arduino_JSON.h>

// Replace with your network credentials
const char* ssid = "*****";
const char* ssid_pwd = "******";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Initialize LittleFS
void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else{
   Serial.println("LittleFS mounted successfully");
  }
}

// Initialize WiFi
void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, ssid_pwd);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void setup() {
  Serial.begin(115200);

  initFS();
  initWiFi();

  // Web Server Root URL
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/index.html", "text/html");
  });
  
  server.serveStatic("/", LittleFS, "/");

  // Start server
  server.begin();
}

void loop() {
}

运行结果如下：

文章来源: https://iotsmart.blog.csdn.net/article/details/127356745