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

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="\
\
\
webserver\
%s\
\
\ 
\
%s\
%s\
%s\
\
";

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

style设计:

//style
static char *html_style="";

导航设计:

//导航
static char *html_navigation="
\
\

嵌入式设备

\
\ \ \ \ \ \
\
";

4个body设计:

//index的body
static char *html_index_body="
\ \ \ \
\
\ \ \ \
\
\ \ \ \
"; //info的body static char *html_info_body="
\

信息开发中

\
"; //para的body static char *html_para_body="
\

参数开发中

\
"; //debug的body static char *html_debug_body="
\

调试开发中

\
"; //OTA的body static char *html_ota_body="
\

只能选择OTA文件

\

\ \ 70% \

\
\
\ \ \
\
\
\
";

我们有了数据后,需要把数据通过模板构建成一个完整的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);
						
					}

效果:点击不同的导航进入不同的页面从0使用TCP手撸http服务器六_第1张图片

源码:

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

你可能感兴趣的:(html,前端)