FREERTOS+LWIP+IAP实现TCP、HTTP、网页访问并固件升级、更新配置 (三)lwip实现httpd服务并在web访问

article/2025/8/14 22:48:29

前言

在前两篇文章中配置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文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欢迎使用LWIP</title><style>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;}</style>
</head>
<body><div class="container"><div class="logo">LWIP</div><h1>欢迎使用LWIP</h1><p>轻量级IP协议栈 (Lightweight IP)</p><div class="features"><div class="feature"><span class="feature-icon">✓</span><span>专为嵌入式系统设计的TCP/IP协议栈</span></div><div class="feature"><span class="feature-icon">✓</span><span>资源占用小,适合内存受限设备</span></div><div class="feature"><span class="feature-icon">✓</span><span>支持IPv4和IPv6协议</span></div><div class="feature"><span class="feature-icon">✓</span><span>模块化设计,可裁剪功能</span></div></div><a href="https://savannah.nongnu.org/projects/lwip/" class="btn" target="_blank">访问LWIP官网</a></div>
</body>
</html>

然后创建一个文件夹,把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卡读取网页文件并显示


http://www.hkcw.cn/article/WWhJjTATST.shtml

相关文章

lighthouse(灯塔)前端性能测试工具

前端性能测试工具之lighthouse灯塔 介绍下载链接使用方法前端性能指标解读 介绍 Lighthouse 是一个开源的自动化工具&#xff0c;用来测试前端页面性能&#xff0c;反馈页面问题以提升页面体验。可以联合谷歌浏览器&#xff0c;作为插件导入&#xff0c;开启后可测试页面性能 …

Ai智能体四:互动式 AI 聊天助手:前端实现

在现代 web 应用中,集成智能对话功能已经成为提升用户体验的重要手段之一。本文将介绍如何通过 Vue 3 和 Element Plus 构建一个高效的 AI 聊天助手界面,并详细讲解其实现原理和功能。 1. 整体架构 该聊天界面分为 左侧边栏 和 右侧内容区域,实现了清晰的布局结构,左侧边…

Spring Boot 3.x 引入springdoc-openapi (内置Swagger UI、webmvc-api)

接触的原因 因开发自己的项目时&#xff0c;写接口文档很繁琐&#xff0c;查到后端都在用swagger等接口工具来记录接口文档&#xff0c;于是学习了一下&#xff0c;本文记录个人配置过程&#xff0c;有问题欢迎指正交流&#x1f601; Swagger&#xff1a; Swagger是一种Rest AP…

OpenWebUI配置异常的外部模型导致页面无法打开

一、使用Ollama关闭OpenAI OpenWebUI自带OpenAI的API设置&#xff0c;且默认是打开的&#xff0c;默认情况下&#xff0c;启动后&#xff0c;会不断的去连https://api.openai.com/v1&#xff0c;但是无法连上&#xff0c;会报错&#xff0c;但是不会影响页面&#xff0c;能正常…

Postman(Apifox)调用WebServicer接口

postman调用WebServicer接口 前言 Postman使用方法Apifox使用方法参数与配置请求代码(当然一般开发会给一个样例)步骤 前言 之前都是使用SoapUI测试WebServicer接口,由于工作所需,需要使用Postman测试工具 Postman使用方法 可以直接在请求里写全部的wsdl地址 ,参数会自动带进…

DeepSeek本地化部署实践:Xinference框架+OpenWebUI实现DeepSeek-r1推理跑在国产GPU之上

近日&#xff0c;我部门从供应商那儿借来一台高算力服务器&#xff0c;用来尝试本地化部署DeepSeek。该服务器型号为ASUS ESC8000A-E11&#xff0c;具体配置如下&#xff1a; CPU&#xff1a;AMD EPYC 7702&#xff08;64核&#xff09;* 2 GPU&#xff1a;&#xff08;天数智…

Android WebRTC集成及JNI性能优化实战指南

本文还有配套的精品资源&#xff0c;点击获取 简介&#xff1a;WebRTC是一个开源项目&#xff0c;旨在实现浏览器间无需插件的实时通信&#xff0c;包括音频、视频通话及数据共享。在Android平台上&#xff0c;其实施涉及使用JNI接口进行Java与C/C代码的交互。本压缩包内容预…

【前端】超链接标签(a标签)之href属性、target属性

文章目录 一、a标签1、href属性&#xff08;1&#xff09;跳转至网络链接页面&#xff08;2&#xff09;跳转至其它工程页面&#xff08;3&#xff09;跳转至本界面 2、target属性 二、感谢观看&#xff01; 一、a标签 a标签即超链接标签&#xff0c;根据名字我们就能知道它是…

【前端开发】一文带你快速入门JavaScript(下)Web 前端必备程序语言 | 条件语句与循环结构

&#x1f4af; 欢迎光临清流君的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落 &#x1f4af; &#x1f525; 个人主页:【清流君】&#x1f525; &#x1f4da; 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 &#x1f4da; &#x1f31f;始终保持好奇心&…

教你在.Net8.0的WinForm中使用WebView2,实现C#和JavaScript的实时双向互操作

1. 前言 随着 Web 技术的发展&#xff0c;使用网页内容&#xff08;HTML、JavaScript、CSS 等&#xff09;作为桌面应用程序的一部分变得越来越常见。在 C# WinForm 中&#xff0c;Microsoft 提供的 WebView2 控件让我们可以轻松地嵌入 Chromium 浏览器&#xff0c;并实现 C# …

【多线程初阶】synchronized锁

文章目录 &#x1f305;synchronized关键字&#x1f30a; synchronized 的互斥&#x1f30a; synchronized 的变种写法&#x1f3c4;‍♂️synchronized 修饰代码块 :明确指定锁哪个对象&#x1f3c4;‍♂️synchronized 修饰方法 &#x1f30a; synchronized 的可重入性&#…

使用 Cython 编译将.py文件加密成.so文件

文章目录 1. .so文件的核心意义和优势2. 使用 Cython 编译&#xff0c;将.py文件加密成.so文件 最近在学习在服务器上如何部署Python模型&#xff0c;不学不知道&#xff0c;一学吓一跳&#xff0c;要学好多啊&#xff0c;最近看到什么就记录一下什么吧。 1. .so文件的核心意义…

环赛里木湖公路自行车赛开赛 速度与激情点燃丝路热土

5月31日上午10时,中国新疆第十七届环赛里木湖(国际)公路自行车赛在精河县鸣枪开赛。首段比赛全长83.1公里,以速度与激情点燃了“中国枸杞之乡”精河县的丝路热土。骑手们从精河县出发,沿精阿高速疾驰,穿越艾比湖湿地和甘家湖梭梭林国家级自然保护区。开赛后仅10分钟,在顺…

南京大学通报施工方偷窃物品 施工单位被罚2000元

5月29日,南京大学基本建设处发布了一份关于对南京诚善科技有限公司执行合同违约金的通报。通报指出,南京大学三校区公共区域饮水机采购及安装项目的施工单位南京诚善科技有限公司的一名员工于5月13日在学校宿舍楼内偷窃学生物品。根据施工合同相关规定并经处办公会研究确认,…

java 反射 枚举与lambda表达式

目录 一.反射 1.概念&#xff1a;在运⾏时检查、访问和修改类、接⼝、字段和⽅法的机制 2.Class类 3.反射相关的类型 4.各类型对应的方法 ​编辑 5.代码示例 (1).class类方法 (2).Field类方法 (3).Constructor类方法 (4).Method类方法 6.总结 二.枚举 1.概念&#x…

【AI大模型】Ollama部署本地大模型DeepSeek-R1,交互界面Open-WebUI,RagFlow构建私有知识库

文章目录 DeepSeek介绍公司背景核心技术产品与服务应用场景优势与特点访问与体验各个DeepSeek-R系列模型的硬件需求和适用场景 Ollama主要特点优势应用场景安装和使用配置环境变量总结 安装open-webui下载和安装docker desktop配置镜像源安装open-webui运行和使用 RagFlow介绍主…

DeepSeek:全栈开发者视角下的AI革命者

无论是想要学习人工智能当做主业营收&#xff0c;还是像我一样作为开发工程师但依然要了解这个颠覆开发的时代宠儿&#xff0c;都有必要了解、学习一下人工智能。 近期发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;入行门槛低&#x…

什么是贝叶斯优化(Bayesian Optimization)?

贝叶斯最优化&#xff08;Bayesian Optimization&#xff09;是一种用于函数全局最优化的策略&#xff0c;特别适用于那些计算代价昂贵的黑箱函数&#xff08;如机器学习模型的超参数调优&#xff09;。其核心思想是通过构建一个代理模型&#xff08;通常是高斯过程或随机森林&…

Spring AI+DeepSeek快速构建AI智能机器人

引言 在AI技术蓬勃发展的当下&#xff0c;Spring生态推出了Spring AI项目&#xff0c;为Java开发者提供了便捷的AI集成方案。本文将演示如何用Spring AIDeepSeek V3 快速搭建一个具备自然语言处理能力的智能对话机器人。 一、环境准备 JDK 17 Maven/Gradle构建工具 DeepSe…

【大模型科普】大模型:人工智能的前沿(一文读懂大模型)

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能&#xff08;AI&#xff09;通过算法模拟人类智能&#xff0c;利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络&#xff08;如ChatGPT&…