前言

在前两篇文章中配置freeRTOS和，并实现了TCP、UDP的通信协议，现在终于轮到重头戏lwip的httpd服务，LWIP官方例程中是有很多自带的网页的，但是远远不够满足实际项目的使用需求，因此我也是踩了很多坑，从前端网页制作，到网络通信的实现，到后端数据处理，从头开始学起，也是学习到了很多没接触过的东西，本章将搭建LWIP的HTTP服务使得浏览器可以访问WEB。

一、CUBEMX的配置

在LWIP中打开HTTP服务

二、代码部分

生成后的代码编译时会发现报错，没有找到fsdata_custom.c这个文件，跟随定义过去会发现这样的两行代码：

#if defined(HTTPD_USE_CUSTOM_FSDATA) && (HTTPD_USE_CUSTOM_FSDATA != 0)#define HTTPD_FSDATA_FILE \"fsdata_custom.c\"#else#define HTTPD_FSDATA_FILE \"fsdata.c\"#endif

这两个.C文件其实就是HTML文件转换后LWIP能读懂的二进制文件，然后LWIP通过读取这些文件数据将其加载到WEB上给用户访问，在官方例程上有一个\"makefsdata.exe\"的应用程序，它的作用是把HTML文件转换成为c文件，下载连接如下：通过网盘分享的文件：makefsdata.exe
链接: https://pan.baidu.com/s/1c2qkdLx5GSY6xF4HRd1wjQ?pwd=w23e 提取码: w23e

此时我们先制作一个HTML文件：

     body { font-family: \'Arial\', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #333; } .container { text-align: center; background-color: white; padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 600px; } h1 { color: #2c3e50; margin-bottom: 20px; } .logo { font-size: 24px; font-weight: bold; color: #3498db; margin-bottom: 30px; } .features { text-align: left; margin: 30px 0; } .feature { margin-bottom: 15px; display: flex; align-items: center; } .feature-icon { color: #27ae60; margin-right: 10px; font-weight: bold; } .btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; text-decoration: none; display: inline-block; margin-top: 20px; } .btn:hover { background-color: #2980b9; }  
 
LWIP
 
欢迎使用LWIP
 
轻量级IP协议栈 (Lightweight IP)
 
 
 ✓ 专为嵌入式系统设计的TCP/IP协议栈 
 
 ✓ 资源占用小，适合内存受限设备 
 
 ✓ 支持IPv4和IPv6协议 
 
 ✓ 模块化设计，可裁剪功能 
 
 访问LWIP官网 

然后创建一个文件夹，把html文件和makefsdata.exe放在里面，接着打开命令提示符，输入以下命令：

就会得到一个fsdata.c文件，将其放入工程文件的CORE/SCR下，注意不能将fsdata.c放进keil工程下，然后注释掉这几行代码，然后将httpd.c中 #define HTTP_IS_DYNAMIC_FILE(hs) 0 修改成#define HTTP_IS_DYNAMIC_FILE(hs) 1，这点很坑，当时找了半天没找到问题在哪里，在

freertos的任务里加上httpd_init();就可以进行编译烧录了。

/* HTTPD_USE_CUSTOM_FSDATA: Compatibility with deprecated lwIP option *///#if defined(HTTPD_USE_CUSTOM_FSDATA) && (HTTPD_USE_CUSTOM_FSDATA != 0)//#define HTTPD_FSDATA_FILE \"fsdata_custom.c\"//#else#define HTTPD_FSDATA_FILE \"fsdata.c\"//

三、效果展示

在网页上输入LWIP的IP地址就可以访问WEB了

四、方案优化

由于文件是存储进单片机的FLSH的，如果有大量的网页文件就会导致FLSH的内存不够使用，此时就需要搭建FATFS文件系统，把网页文件存储进入SD卡或者外置FLASH如W25Q128中，本次的项目对网页数量需求较小，因此并没有用到这部分，如有需要可以参考这篇文章：lwip-2.1.3自带的httpd网页服务器使用教程（一）从SD卡读取网页文件并显示

麦克风网