STM32F407_LAN8720_LWIP--HTTP服务器，HTML的IP输入文本框

简介

最近根据做了一个网络音箱，根据经理要求要在音箱中做个可配置设备参数的网站服务器。于是国庆期间别人到处浪，老夫只能在家干。经过这几天的学习，什么JavaScript，css，HTML5都做了稍微的了解，虽然后原来也做个这样的服务器，但是难看到要死。了解前端的三个技术的基本技术和用法后自己写了一个配置面，比较简单，但还是有一些用法挺有意思，因此记录一下。如果有需要的看官可以在文章末尾链接下载

硬件平台

正点原子：STM32F407探索者开发板
使用硬件描述：STM32F407ZGT6，LAN8720，SPIFLASH(W25Q128)
使用到的组件：LWIP，Fatfs，
说明：W25Q128+Fatfs用于保存设备信息（项目要求有很多信息要保存，本文demo只是用来保存设备参数信息）

网页页面展示

以上为最终的结果。

网页的编写

先用notepad工具编写好网页，然后再将页面内容复制到代码中，对于一些特定符号需要用’'符号标识。具体入结果入下图。

一些比较有意思的用法

由于服务器功能比较简单，因此在STM32程序中自己编写了一个页面申请规则，然后将页面的以及http请求名称进行注册既可。
代码入下：

/*
 *	页面注册结构体，用于服务器功能所以页面使用
 */
typedef struct Webpage_Reg{
	const char *Name;				//	浏览器申请页面的名称
	const char *page;				//	页面的html数据
	uint8_t type;					//	页面类型
}Webpage_Reg;

static const struct Webpage_Reg Wevpage[] ={		//	向http服务器功能注册页面
	{"/index.html",index,PTYPE_HTML},				//	页面，实际页面html数据，页面类型
	{"/style.css",style,PTYPE_CSS},
	{"/parameter.html",parameter,PTYPE_HTML},
	{"/loginset.html",loginset,PTYPE_HTML},
	{"/setStyle.css",setStyle,PTYPE_CSS},
	{"/useFunJs.js",useFunJs,PTYPE_HTML},
	{NULL,NULL,0}
};

在HTML中利用正则表达式然后text只能输入IP地址格式的文本。同时在提交时IP地址类型的文本框有格式不对时会在文本末尾提示错误。如图：

以上功能的一些关键代码

JavaScript代码

function ipKeyPress(obj){		//		设置IP地址框只允许输入IP地址类型的HTML
	var old = obj.value;
	obj.value=obj.value.replace(/[^\d|.]/g,'');
	var re1=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
	var re2=/^(\d+)\.(\d+)\.(\d+)\.$/;
	var re3=/^(\d+)\.(\d+)\.(\d+)$/;
	var re4=/^(\d+)\.(\d+)\.$/;
	var re5=/^(\d+)\.(\d+)$/;
	var re6=/^(\d+)\.$/;
	var re7=/^(\d+)$/;
	var old = obj.getAttribute("defdat");
	if(re1.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255||RegExp.$3>255||RegExp.$4>255)obj.value = old;
	}else if(re2.test(obj.value)||re3.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255||RegExp.$3>255)obj.value = old;
	}else if(re4.test(obj.value)||re5.test(obj.value)){if(RegExp.$1>255||RegExp.$2>255)obj.value = old;
	}else if(re6.test(obj.value)||re7.test(obj.value)){if(RegExp.$1>255)obj.value = old;
	}else if(obj.value!=""){obj.value = old;}
	if(re1.test($('txtIp').value)){$('IpError').innerText = '';}
	if(re1.test($('txtSub').value)){$('subError').innerText = '';}
	if(re1.test($('txtGw').value)){$('gwError').innerText = '';}
};
function check_parameter(){			//	提交表单时检测输入IP地址框是否正确
	var flag = true;
	var re1=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
	if(re1.test($('txtIp').value)==false){$('IpError').innerText = '错误!';flag=false;}
	if(re1.test($('txtSub').value)==false){$('subError').innerText = '错误!';flag=false;}
	if(re1.test($('txtGw').value)==false){$('gwError').innerText = '错误!';flag=false;}
	return flag;
}

HTML代码

<form id='from1' method='POST' action='DevConfig.cgi' enctype='multipart/form-data' onsubmit="return check_parameter()">
	<p style="text-indent:140px;">
		<label for='txtName'>&nbsp设备名称：</label>
		<input type='text' id='txtName' name='Name' size='32'/>
	</p>
	<p style="margin:5px 300px;"><label><input type="checkbox" id="CheckboxDHCP" onclick="CheckboxChange()"/>DHCP功能 </label></p>
	<p style="text-indent:140px;">
		<label for='txtMac' style="height:18px;">MAC地址：</label>
		<input type='text' id='txtMac' name='mac' size='16' disabled='disabled'/>
	</p>
	<p style="text-indent:169px; aline-top:5px;">
		<label for='txtIp'>IP地址：</label>
		<input type='text' id='txtIp' name='ip' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
		<label class="Elable" id = "IpError"></label>
	</p>
	<p style="text-indent:147px;">
		<label for='txtSub'>子网掩码：</label>
		<input type='text' id='txtSub' name='sub' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
		<label class="Elable" id = "subError"></label>
	</p>
	<p style="text-indent:147px;">
		<label for='txtGw'>默认网关：</label>
		<input type='text' id='txtGw' name='gw' size='16' data="" onkeyup="ipKeyPress(this)" onkeypress="TextKeyPress(this)"/>
		<label class="Elable" id = "gwError"></label>
	</p>
	<p>&nbsp </p>
	<p>
		<label>通讯模式选择：</label>
		<label><input name="cast" id="UnicastRadio" type="radio"  size='16'/>单播模式</label>
		<label>&nbsp&nbsp</label>
		<label><input name="cast" id="MulticastRadio" type="radio"  size='16'/>组播模式</label>
	</p>
	<p style="margin:10px 350px;"><input class = "button" type='submit' value='保存' /></p>
</form>

此文到此结束，由于涉及的技术不高但是却比较广。因此没办法写太多，对于做前端设计者而言，太过简单，而对于纯单片机设计者而言，可以让前端设计完后再进行页面移植。谁让我这么啥都一个人干呢。
对于有需要的朋友可以在下面的连接下载整个demo代码。
https://download.csdn.net/download/weixin_41558887/11862747