lwip-2.1.3自带的httpd网页服务器使用教程（一）从SD卡读取网页文件并显示
概述
本教程使用的单片机是STM32F103ZE，有线网口芯片为ENC28J60。
本教程里面的网页由于需要兼容Windows XP系统的IE8浏览器，所以采用HTML 4.01编写，不使用任何前端框架。笔者使用的网页设计软件是Adobe Dreamweaver CS3。
开发板PCB文件是公开的，大家可以拿去打印出来，焊好器件后，就可以直接跑本教程提供的所有示例程序。
示例程序和PCB板的下载地址为：https://pan.baidu.com/s/1vT5Le1qauh5uTNfu8xKXzQ（提取码：k6tz）
lwip-2.1.3在STM32F103ZE+ENC28J60有线网卡上无操作系统移植（使用STM32 HAL库）_lwip stm32f103_巨大八爪鱼的博客-CSDN博客一、概述以太网芯片简介ENC28J60是一款10Mbps速率的以太网MAC+PHY芯片，和单片机的通信接口为SPI，SPI最高时钟频率为20MHz。ENC28J60支持半双工和全双工模式，但是不支持自动协商。在支持自动协商的网络环境中，ENC28J60默认的工作模式是半双工模式。另外，STM32本身有一个ETH外设，这个外设采用的接口是MII或RMII，不是SPI，所以不能连接ENC28J60芯片，这次我们用不到这个ETH外设。STM32本身的ETH外设相当于MAC，通常要外接一个PHY芯片（_lwip stm32f103https://blog.csdn.net/ZLK1214/article/details/121419417
makefsdata程序的使用
默认情况下，lwip httpd服务器使用的网页文件来源于lwip-2.1.3/apps/http/fsdata.c。
fsdata.c是由lwip自带的makefsdata程序将lwip-2.1.3/apps/http/fs里面的所有文件打包后得到的。
lwip只提供了makefsdata程序的C语言源代码，如果想要在Windows系统上运行，需要用Visual Studio编译代码，生成exe文件，放到http目录下（也就是有fs文件夹的目录下），双击即可使用。编译的方法请参考下面这篇文章。
（本文例程里面已经放好了编译好的makefsdata程序，可直接使用，不用再自己重新编译）
在Visual Studio 2012下编译lwip-2.1.3 httpd的makefsdata_makefsdata.exe_巨大八爪鱼的博客-CSDN博客步骤一 建立空白工程新建一个工程，项目名称起名为makefsdata。因为mkfsdata是一个控制台程序，所以我们要选择Win32 Console Application。这里很重要，必须要勾选“Empty Project”选项，建立空项目：建好的解决方案目录是C:\Users\Octopus\Desktop\makefsdata，工程目录是C:\Users\Octopus\Desktop\makefsdata\makefsdata。步骤二 解压lwip-2.1.3的部分头文件和_makefsdata.exehttps://blog.csdn.net/ZLK1214/article/details/122490482双击运行makefsdata程序后，程序自动将fs文件夹下的所有内容打包成一个fsdata.c文件。每次修改完fs文件夹里面的网页文件和图片后，只需要重新运行makefsdata程序，就能打包生成新的fsdata.c文件。
STM32的Keil工程里面只需要添加fs.c和httpd.c这两个C文件，不能把fsdata.c添加到Keil工程里面去。这是因为fs.c里面用#include指令包含了fsdata.c文件。
#define HTTPD_FSDATA_FILE "fsdata.c" // httpd_opts.h
#include HTTPD_FSDATA_FILE // fs.cfsdata.c也可以改成其他自己喜欢的名字，把扩展名改成.h都行，改名后要把新的文件名定义到lwipopts.h中（注意不是改fs.c或者httpd_opts.h）。新命名的文件同样不能添加到Keil工程中。
#define HTTPD_FSDATA_FILE "fsdata_custom.h"fsdata.c里面以C语言数组的形式保存了fs文件夹下的所有文件，包括html文件和图片文件，以及其他类型的文件。zip、rar压缩包，还有exe文件都可以放进去，用户用浏览器访问这些非网页文件的时候，浏览器不会直接显示这些文件的内容，而是启动下载工具，把文件下载下来，让用户选择一个电脑上的文件夹保存。
当用户通过浏览器访问一个不存在的网页时，lwip会自动重定向到404.html错误页面。
Keil工程编译并烧写到STM32单片机后，最终这些网页内容是保存到STM32单片机的Flash中的。STM32单片机的Flash容量是有限的，只有几百KB~几MB，能存放的网页文件非常有限。如果网页个数非常多，非常大，Flash放不下的话，就得想其他的办法。
动态加载SD卡上的网页文件（一次性加载）
（本节例程名称：webpages_from_sdcard）
既然STM32本身的Flash放不下网页文件，那我们可以外接一个SPI Flash（如W25Q128）或者一张SD卡来保存网页文件。如果用SD卡的话，能保存的网页文件就非常多了，保存一个几百兆的压缩包供用户下载都不是问题。
存储器可以使用FAT、FAT32或者exFAT文件系统，以文件的形式存储网页文件。STM32通过FatFS读取存储器中存储的文件。
笔者是把所有的网页文件放到SD卡的www目录下，如下图所示。（例程里面运行了一个ftp服务器，可以在线访问SD卡中的文件，还可以在线往SD卡里面上传文件）
要想让lwip的httpd服务器从SPI Flash或SD卡上动态加载网页文件并显示的话，需要在lwipopts.h中定义下面两个宏。
// 配置HTTPD
#define LWIP_HTTPD_CUSTOM_FILES 1
#define LWIP_HTTPD_DYNAMIC_HEADERS 1然后我们需要自己实现下面两个接口函数。
int fs_open_custom(struct fs_file *file, const char *name);
void fs_close_custom(struct fs_file *file);fs_open_custom函数的功能是读取指定的网页文件的内容。函数返回1表示文件读取成功，返回0表示文件读取失败。
fs_close_custom函数的功能是释放fs_open_custom函数里面分配的内存块，关闭已打开的文件。
我们新建一个webpages_test.c文件，在里面实现这两个函数。
#include
#include
#include
#include
int fs_open_custom(struct fs_file *file, const char *name)
{
char path[260];
int i, size;
int ret = 0;
void *mem;
FIL *fp;
FRESULT fr;
UINT br;
// name为要访问的网页URL, 是相对路径, 将其转换成绝对路径
snprintf(path, sizeof(path), "C:\\www%s", name);
for (i = 0; path[i] != '\0'; i++)
{
if (path[i] == '/')
path[i] = '\\';
}
if (path[i - 1] == '\\' && sizeof(path) - i >= 10 + 1)
strcat(path, "index.html");
fp = mem_malloc(sizeof(FIL));
if (fp != NULL)
{
fr = f_open(fp, path, FA_READ); // 打开文件
if (fr == FR_OK)
{
size = f_size(fp); // 获取文件大小
mem = mem_malloc(size);
if (mem != NULL)
{
f_read(fp, mem, size, &br); // 一次性读完整个文件
file->data = mem; // 要显示的网页内容
file->pextension = mem; // http连接关闭时要在fs_close_custom()函数中释放的内存块
file->len = size; // 要显示的网页内容的长度
file->index = size; // 要显示的网页内容的长度
printf("%s(0x%p): %s\n", __func__, file->pextension, path);
ret = 1;
}
f_close(fp); // 关闭文件
}
mem_free(fp);
}
// 函数返回1表示网页文件存在, 返回0表示网页文件不存在
// 网页文件不存在时httpd会去加载lwip-2.1.3/apps/http/makefsdata里面的默认网页
return ret;
}
void fs_close_custom(struct fs_file *file)
{
printf("%s(0x%p)\n", __func__, file->pextension);
if (file->pextension != NULL)
{
mem_free(file->pextension);
file->pextension = NULL;
}
}
fs_open_custom函数的name参数的值跟浏览器里面访问的网址有关。如果浏览器访问的网址是http://stm32f103ze/entertainment.html，那么name="/entertainment.html"。
在上面的程序中，将name与“C:\www”字符串拼接（C语言中字符串里面的反斜杠要双写），再把所有的正斜杠替换成反斜杠，就得到了“C:\www\entertainment.html”这个路径，打开的是SD卡www文件夹下的entertainment.html文件。如果浏览器访问的是一个文件夹，则自动在后面追加index.html，实际访问的是这个文件夹下的index.html文件。
把文件路径保存到path字符数组中，用FatFs的f_open函数以只读的方式打开网页文件，再用f_size函数获取网页文件的大小（size）。
用lwip的mem_malloc函数分配size大小的内存，接着用f_read函数把整个文件的内容一次性读取到新分配的这块内存里面。
把保存有网页内容的内存块指针mem赋给file->data，网页的大小赋给file->len和file->index这两个成员，lwip的httpd服务器就能显示SD卡上的网页了。
mem内存块会在fs_open_custom函数执行完毕后由lwip使用，所以mem内存块不能在fs_open_custom函数里面释放，那在哪里释放呢？fs_close_custom函数就是用来完成这个任务的。
我们把mem内存块的地址赋给file->pextension成员，lwip不会使用file->pextension这个成员变量，变量的值可以随便定义。
lwip发送完全部网页内容后就会调用fs_close_custom函数，在这个函数中用file->pextension访问刚才的mem内存块，用mem_free函数回收内存。
如果访问了sd卡上不存在的网页，则fs_open_custom函数返回0，lwip会去makefsdata的fs文件夹里面寻找，如果还是没找到，则会显示makefsdata的404.html错误页面。
串口打印：
STM32F103ZE ENC28J60
SystemCoreClock=72000000
LSE is ON!
MAC address: 00:12:34:56:78:90
ENC28J60 ID: 0x0083 0x1400
IPv6 link-local address: FE80::212:34FF:FE56:7890
SD init OK! frequency=24MHz
SDCard type: SDHC/SDXC
SDCard version: V2
SDCard block number: 121634816
SDCard block size: 512
SDCard capacity: 59392MB
Disk is mounted!
Link is up!
[Send] len=350
[Recv] len=60, next=70
[Recv] len=590, next=670
[Send] len=350
[Recv] len=590, next=1270
[Send] len=42
[Send] len=42
[Send] len=86
[Send] len=78
[Send] len=62
[Send] len=42
[Send] len=86
[Send] len=42
DHCP supplied address!
IP address: 192.168.1.102
Subnet mask: 255.255.255.0
Default gateway: 192.168.1.1
DNS Server: 192.168.1.1
[Send] len=42
[Send] len=42
[Recv] len=60, next=1340
[Send] len=72
[Recv] len=136, next=1486
[Send] len=90
[Send] len=86
[Recv] len=90, next=1586
Time from network: 2023-07-13 13:06:57
RTC is not updated
[Send] len=42
[Recv] len=60, next=1656
[Send] len=42
[Send] len=42
[Send] len=70
[Recv] len=142, next=1808
[Send] len=86
[Recv] len=86, next=1904
[Recv] len=92, next=2006
[Send] len=42
[Recv] len=60, next=2076
[Send] len=104
[Recv] len=62, next=2148
[Send] len=62
[Recv] len=60, next=2218
[Recv] len=332, next=2560
fs_open_custom(0x60000468): C:\www\index.html
[Send] len=1514
[Send] len=147
[Recv] len=60, next=2630
fs_close_custom(0x60000468)
[Send] len=1514
[Send] len=1298
[Recv] len=62, next=2702
[Send] len=62
[Recv] len=60, next=2772
[Recv] len=60, next=2842
[Send] len=54
[Recv] len=60, next=2912
[Recv] len=392, next=3314
fs_open_custom(0x600003d4): C:\www\resources\mm_lodging_image.jpg
[Send] len=1514
[Send] len=148
[Recv] len=60, next=3384
[Send] len=1514
[Send] len=1514
[Recv] len=60, next=3454
fs_close_custom(0x600003d4)
[Send] len=1514
[Send] len=135
[Recv] len=60, next=3524
[Recv] len=60, next=3594
[Send] len=54
[Send] len=78
IPv6 address 1: 2409:8A62:3EA:6110:212:34FF:FE56:7890
DNS Server: FE80::1
[Send] len=86
[Recv] len=60, next=3664
[Recv] len=86, next=3760
[Send] len=86
[Recv] len=60, next=3830
[Recv] len=60, next=3900
这种方法是把整个网页文件一次性读取到单片机的SRAM内存中，再由lwip httpd通过网络发送给浏览器显示。
要是网页文件很大，SRAM一次性放不下，那就只有换一种分多次读取的方法了。
动态加载SD卡上的网页文件（分多次读取）
（本节例程名称：webpages_from_sdcard_discontinuously）
如果想要多次读取同一个网页文件，可以在lwipopts.h中定义LWIP_HTTPD_DYNAMIC_FILE_READ=1，然后实现int fs_read_custom(struct fs_file *file, char *buffer, int count)函数。
// 配置HTTPD
#define LWIP_HTTPD_CUSTOM_FILES 1
#define LWIP_HTTPD_DYNAMIC_FILE_READ 1
#define LWIP_HTTPD_DYNAMIC_HEADERS 1#include
#include
#include
#include
struct file_content
{
FIL fil;
char buffer[2500];
int pos;
};
int fs_open_custom(struct fs_file *file, const char *name)
{
char path[260];
int i, ret = 0;
struct file_content *content;
FRESULT fr;
// name为要访问的网页URL, 是相对路径, 将其转换成绝对路径
snprintf(path, sizeof(path), "C:\\www%s", name);
for (i = 0; path[i] != '\0'; i++)
{
if (path[i] == '/')
path[i] = '\\';
}
if (path[i - 1] == '\\' && sizeof(path) - i >= 10 + 1)
strcat(path, "index.html");
content = mem_malloc(sizeof(struct file_content));
if (content != NULL)
{
content->pos = 0;
fr = f_open(&content->fil, path, FA_READ); // 打开文件
if (fr == FR_OK)
{
// 网页文件存在
file->len = sizeof(content->buffer); // 指定fs_read_custom()函数的count参数的最大值(不能设置为0)
file->pextension = content; // 保存分配的内存指针, http连接关闭时才释放
printf("%s(0x%p): %s\n", __func__, content, path);
ret = 1;
}
else
{
// 网页文件不存在
mem_free(content);
content = NULL;
}
}
// 函数返回1表示网页文件存在, 返回0表示网页文件不存在
// 网页文件不存在时httpd会去加载lwip-2.1.3/apps/http/makefsdata里面的默认网页
return ret;
}
void fs_close_custom(struct fs_file *file)
{
struct file_content *content = file->pextension;
printf("%s(0x%p)\n", __func__, content);
if (content != NULL)
{
f_close(&content->fil); // 关闭文件
mem_free(content); // 释放内存
file->pextension = NULL;
}
}
int fs_read_custom(struct fs_file *file, char *buffer, int count)
{
struct file_content *content = file->pextension;
UINT br;
// count为要读取的字节数, br为实际读取到的字节数
f_read(&content->fil, buffer, count, &br);
if (br == 0)
{
// 文件读取完毕
printf("%s(0x%p): end of file\n", __func__, content);
return FS_READ_EOF;
}
printf("%s(0x%p): %d~%d\n", __func__, content, content->pos, content->pos + br - 1);
content->pos += br;
return br;
}
网页访问效果和之前的程序一样，只不过串口打印有区别。在串口中可以看到，一个文件可以分多次读取。
在fs_open_custom函数中，只需要打开文件，把f_open返回的FIL对象保存到file->pextension里面就行，不需要读取文件内容，也不需要获取文件的总大小。file->len成员要赋值，这个值指定的是后面fs_read_custom()函数的count参数的最大值，不允许设置为0。
fs_read_custom函数用于分多次读取文件的内容。参数buffer是保存文件内容的缓冲区，count是缓冲区的大小。函数的返回值是本次实际读取到的文件内容的长度，返回值应该大于0，且小于或等于count。若文件已经读取完毕了，没有更多文件内容了，则应该保持buffer缓冲区的内容不变，函数返回FS_READ_EOF。lwip收到FS_READ_EOF这个返回值后，就会调用fs_close_custom函数关闭文件，在fs_close_custom函数中应该用f_close函数关闭文件，还要把FIL对象占用的内存释放掉。
当LWIP_HTTPD_DYNAMIC_FILE_READ=1时，一次性读取文件的程序和分多次读取文件的程序可以在同一个项目里面共存。为了防止编译报错，一次性读取文件的程序需要实现一个空的fs_read_custom函数，函数直接返回FS_READ_EOF就行。程序实际运行中，lwip httpd并不会调用fs_read_custom函数，只调用fs_open_custom和fs_close_custom函数。
一次性读取文件的程序和分多次读取文件的程序的区别：
| file->data | file->pextension | file->len | file->index | fs_read_custom函数 | |
|---|---|---|---|---|---|
| 一次性读取文件 | 完整的文件内容 | 程序自定义 | 文件的总大小 | 文件的总大小 | 不需要实现，即使实现了也不会被调用 |
| 分多次读取文件 | NULL | 程序自定义 | fs_read_custom函数每次最多读取多少字节的内容 | 无需赋值 | 需要实现 |