Javascript 提供HTML+js的ESP8266

我尝试在esp8266访问点上托管一个HTML文件。我可以正确地显示.html文件。不幸的是，当访问html页面时，我的浏览器无法显示javascript内容。奇怪的是，当我在我的机器上本地工作时，它工作得非常好。当我访问esp8266上的页面时，我收到错误消息

未找到：dygraph.min.js

显然，浏览器找不到javascript源代码。我想知道为什么。我尝试过几种命名和引用的方法，但直到现在我还不走运

我使用ESP8266草图数据上传工具将文件上传到SPIFFS。在html文件中，我将js引用为

以前有人经历过类似的事情吗？整个代码可在此处找到：

我期待着您的意见

---

谢谢你，祝你好运

通读您的代码，想象一下对web服务器的请求

编写代码是为了处理对两个URL的请求：/and/temp.csv-就是这样

访问/temp.csv时，将提供index.html的内容。当浏览器解释该文件时，它将尝试从ESP加载/dygraph.min.js。您没有该文件的处理程序。因此，负载失败

您需要为它添加一个处理程序，然后为该文件提供服务。因此，您需要添加一行，如：

server.on("/dygraph.min.js", handleJS);

并定义函数void handleJS，该函数实现handleFile的功能

您需要对/dygraph.css执行相同的操作；你也没有它的处理程序

我会这样做：

void handleHTML() {
  handleFile("index.html");
}

void handleJS() {
  handleFile("dygraph.min.js");
}

void handleCSS() {
  handleFile("dygraph.css");
}

void handleFile(char *filename) {
  File f = SPIFFS.open(filename, "r");
  // the rest of your handleFile() code here
}

在您的设置中：

分别：

你的URL到文件的映射混乱了。我上面分享的代码与您现在的代码是一致的，但通常您希望/提供index.html；您可以让它提供一段HTML

通常/temp.csv将提供逗号分隔的值文件。我看到你有一个，在回购协议中，你有代码向其中添加数据；你只是没有提供它。现在您已经拥有了服务index.html。一旦您开始成功加载Javascript，您就会遇到问题

你需要把它们整理出来，让它正常工作

此外，在循环中，您应该移动server.handleClient；成为循环中的第一件事。按照您编写的方式，您只需检查是否有web请求，是否需要再次读取温度读数。您应该始终检查是否存在web请求，否则会不必要地降低web服务的速度

最后一件事，完全独立于web服务器代码，在剩下的代码正常工作之前，我不会担心这一点：您的代码大约每5秒写入一次SPIFFS。SPIFFS存储在ESP8266的闪存中。ESP8266板使用便宜的闪存，不会持续很长时间-它在10000到100000个写入周期后就会磨损-这有点复杂；它被分为多个页面，页面中的各个单元格都会磨损，但您必须同时写入整个页面

很难说它的寿命是什么；这取决于涉及的特定ESP8266板和闪存芯片。10000次写入周期意味着板上的闪存可能在50000秒后开始出现故障—1000000次写入周期将导致500000次写入—如果您继续在同一位置写入。这取决于flash中同一位置的写入频率。如果这对您来说是个问题，您可能希望增加写入之间的延迟，或者对数据执行其他操作

除非经常删除CSV文件并重新开始，否则您可能不会遇到这种情况，因为您正在附加到一个文件—您仍然会多次重写相同的闪存块，但不会重写10000次。所以这可能是一个长期的问题，也可能不是

有关这些问题的更多信息，请访问

---

祝你好运

通读您的代码，想象一下对web服务器的请求

编写代码是为了处理对两个URL的请求：/and/temp.csv-就是这样

访问/temp.csv时，将提供index.html的内容。当浏览器解释该文件时，它将尝试从ESP加载/dygraph.min.js。您没有该文件的处理程序。因此，负载失败

您需要为它添加一个处理程序，然后为该文件提供服务。因此，您需要添加一行，如：

server.on("/dygraph.min.js", handleJS);

并定义函数void handleJS，该函数实现handleFile的功能

您需要对/dygraph.css执行相同的操作；你也没有它的处理程序

我会这样做：

void handleHTML() {
  handleFile("index.html");
}

void handleJS() {
  handleFile("dygraph.min.js");
}

void handleCSS() {
  handleFile("dygraph.css");
}

void handleFile(char *filename) {
  File f = SPIFFS.open(filename, "r");
  // the rest of your handleFile() code here
}

在您的设置中：

分别：

你的URL到文件的映射混乱了。我上面分享的代码与您现在的代码是一致的，但通常您希望/提供index.html；您可以让它提供一段HTML

通常/temp.csv将提供逗号分隔的值文件。我看到你有一个，在回购协议中，你有代码向其中添加数据；你只是没有提供它。对不对 你有服务index.html。一旦您开始成功加载Javascript，您就会遇到问题

你需要把它们整理出来，让它正常工作

此外，在循环中，您应该移动server.handleClient；成为循环中的第一件事。按照您编写的方式，您只需检查是否有web请求，是否需要再次读取温度读数。您应该始终检查是否存在web请求，否则会不必要地降低web服务的速度

最后一件事，完全独立于web服务器代码，在剩下的代码正常工作之前，我不会担心这一点：您的代码大约每5秒写入一次SPIFFS。SPIFFS存储在ESP8266的闪存中。ESP8266板使用便宜的闪存，不会持续很长时间-它在10000到100000个写入周期后就会磨损-这有点复杂；它被分为多个页面，页面中的各个单元格都会磨损，但您必须同时写入整个页面

很难说它的寿命是什么；这取决于涉及的特定ESP8266板和闪存芯片。10000次写入周期意味着板上的闪存可能在50000秒后开始出现故障—1000000次写入周期将导致500000次写入—如果您继续在同一位置写入。这取决于flash中同一位置的写入频率。如果这对您来说是个问题，您可能希望增加写入之间的延迟，或者对数据执行其他操作

除非经常删除CSV文件并重新开始，否则您可能不会遇到这种情况，因为您正在附加到一个文件—您仍然会多次重写相同的闪存块，但不会重写10000次。所以这可能是一个长期的问题，也可能不是

有关这些问题的更多信息，请访问

---

祝你好运

当您直接从esp8266请求JavaScript文件时，它会正确加载？当您直接从esp8266请求JavaScript文件时，它会正确加载？感谢您对该问题的完整讨论！特别是为了查看我的回购协议和评论，我将尝试改进我的代码。server.on不接受无效的返回值，谢谢您对这个问题的完整讨论！特别是为了查看我的回购协议和评论，我将尝试改进我的代码。server.on不接受无效返回值作为第二个参数