从0使用TCP手撸http服务器六

HES_C

已于 2023-03-28 14:03:11 修改

阅读量305

点赞数

文章标签： html 前端

于 2023-03-28 13:39:11 首次发布

本文链接：https://blog.csdn.net/hes_c/article/details/129813945

版权

html模板设计：

上篇我们说到通过路由去返回不同的html页面，如果每一个页面都是一个数组的话，那么我们可能需要很多数组，里面很多内容都是一样的，这样子会浪费我们单片机很多flash，我们需要把共同的部分固定出来，每个页面不同的部分才定义一个数组。

要想设计html模板，我们的先了解html的结构，更加具体的可以百度查阅。我这边把一个html大致分成一下部分：
-模板文件

0-html标准格式
   1-style
   2-导航
   3-body
   4-js
对于一个页面，其实html标准格式是不需要变化的，style，导航，body，js可能需要变化，于是我们可以设计一个标准的匹配模板：里面的%s就代表着style，导航，body，js

//模板页面
static char *page_template="<!DOCTYPE html>\
<html>\
<head>\
<title>webserver</title>\
%s\
</head>\
<meta charset=\"utf-8\">\ 
<body>\
%s\
%s\
%s\
</body>\
</html>";

有了模板后，我们需要分别定义出style，导航，body，js ，JS还没用的，可以先不定义

style设计：

//style
static char *html_style="<style> \
.button {\
background-color: #4CAF50;\
border: none;\
color: white;\
padding: 15px 15px;\
text-align: center;\
text-decoration: none;\
display: inline-block;\
font-size: 16px;\
margin: 4px;\
border-radius: 12px;\
width:30%;\
height:200px;\
}\
.button1 {\
background-color: #AAA220;\
border: none;\
color: white;\
padding: 15px 15px;\
text-align: center;\
text-decoration: none;\
display: inline-block;\
font-size: 16px;\
margin: 4px;\
border-radius: 12px;\
width:18%;\
}\
progress {\
    width: 200px;\
	height:30px;\
}\
</style>";

导航设计：

//导航
static char *html_navigation="<div style='width:100%;height:1000px;'>\
<div style='background-color:#4CAFA0;text-align:center;height:150px;border-radius: 12px;'>\
<h1>嵌入式设备</h1>\
<div style='text-align: center;'>\
<button class='button1' onclick=\"window.location.href = '/'\">首页</button>\
<button class='button1' onclick=\"window.location.href = 'info'\">信息</button>\
<button class='button1' onclick=\"window.location.href = 'para'\">参数</button>\
<button class='button1' onclick=\"window.location.href = 'debug'\">调试</button>\
<button class='button1' onclick=\"window.location.href = 'ota'\">升级</button>\
</div>\
</div>";

4个body设计：

//index的body
static char *html_index_body="<div style='text-align: center;'>\
<button class='button'>功能1</button>\
<button class='button'>功能2</button>\
<button class='button'>功能3</button>\
</div>\
<div style='text-align: center;'>\
<button class='button'>功能4</button>\
<button class='button'>功能5</button>\
<button class='button'>功能6</button>\
</div>\
<div style='text-align: center;'>\
<button class='button'>功能7</button>\
<button class='button'>功能8</button>\
<button class='button'>功能9</button>\
</div>";
//info的body
static char *html_info_body="<div style='text-align:center;'>\
<p style='font-size: 26px;color:red;'>信息开发中</p>\
</div>";
//para的body
static char *html_para_body="<div style='text-align:center;'>\
<p style='font-size: 26px;color:red;'>参数开发中</p>\
</div>";
//debug的body
static char *html_debug_body="<div style='text-align:center;'>\
<p style='font-size: 26px;color:red;'>调试开发中</p>\
</div>";
//OTA的body
static char *html_ota_body="<div style='text-align:center;'>\
<p style='font-size: 26px;color:red;'>只能选择OTA文件</p>\
<p>\
<label style='font-size: 26px;' for='file'>完成度：</label>\
<progress max='100' value='70'> 70% </progress>\
</p>\
<form action='/otafile' method='post' enctype='multipart/form-data'>\
<div style='text-align:center;'>\
<input class='button1' style='text-align:center; background-color: #4CAF50;' type='file' accept='*' name='ota'>\
<input class='button1' style='text-align:center; background-color: #4CAF50;' type='submit' value='开始升级'>\
</div>\
</form>\
</div>\
</div>";

我们有了数据后，需要把数据通过模板构建成一个完整的html。先设计一个html文件缓存数组，这个数组代表着你能返回多大的页面。

static u8 html_file[4*1024]={0};

定义构建页面的函数，js部分没有定义，全部为空（""）

//生成index页面
static void create_index_page()
{
	memset(html_file,0,strlen((char*)html_file));
	sprintf((char*)html_file,page_template,html_style,html_navigation,html_index_body,"");
	
}
static void create_info_page()
{
	memset(html_file,0,strlen((char*)html_file));
	sprintf((char*)html_file,page_template,html_style,html_navigation,html_info_body,"");
	
}
static void create_para_page()
{
	memset(html_file,0,strlen((char*)html_file));
	sprintf((char*)html_file,page_template,html_style,html_navigation,html_para_body,"");
	
}
static void create_debug_page()
{
	memset(html_file,0,strlen((char*)html_file));
	sprintf((char*)html_file,page_template,html_style,html_navigation,html_debug_body,"");
	
}
//生成ota页面
static void create_ota_page()
{
	memset(html_file,0,strlen((char*)html_file));
	sprintf((char*)html_file,page_template,html_style,html_navigation,html_ota_body,"");
	
}

下面就是可以通过路由反馈不同页面的，和文章1一样的效果。

                    if(strcmp("/ota",route)==0)
					{

						create_ota_page();
						send_html(remote_sock,(char *)html_file);
					}
					if(strcmp("/",route)==0)
					{
						create_index_page();
						send_html(remote_sock,(char *)html_file);
						
					}
					if(strcmp("/info",route)==0)
					{
						create_info_page();
						send_html(remote_sock,(char *)html_file);
						
					}
					if(strcmp("/para",route)==0)
					{
						create_para_page();
						send_html(remote_sock,(char *)html_file);
						
					}
					if(strcmp("/debug",route)==0)
					{
						create_debug_page();
						send_html(remote_sock,(char *)html_file);
						
					}

效果：点击不同的导航进入不同的页面

源码：

https://download.csdn.net/download/HES_C/87620599

HES_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0使用TCP手撸http服务器六

上篇我们说到通过路由去返回不同的html页面，如果每一个页面都是一个数组的话，那么我们可能需要很多数组，里面很多内容都是一样的，这样子会浪费我们单片机很多flash，我们需要把共同的部分固定出来，每个页面不同的部分才定义一个数组。对于一个页面，其实html标准格式是不需要变化的，style，导航，body，js可能需要变化，于是我们可以设计一个标准的匹配模板：里面的%s就代表着style，导航，body，js。有了模板后，我们需要分别定义出style，导航，body，js ，JS还没用的，可以先不定义。
复制链接

扫一扫