前言
在一个demo中，看到用STM32的tcp/ip通讯做的http服务器，返给浏览器网页的素材，使浏览器显示出网页，并在网页中，用JS显示动态数据的实现。
查了下，这个web_server网页素材的原型是用easyui做的，在PC机做前期测试时，用的是nodejs.
整理了一下，搭了开发环境，用nodejs启动测试用的自己的js实现, 自己的js再向浏览器返回html文件和其他素材。
实验的目的
可以先在PC端验证easyui网页的效果，然后再放到stm32系统上和浏览器联调。
浏览器要选chrome.
工程下载点
实验
实验效果
实验的easyui素材代码，从easyui的demo片段中直接摘录的。
做这个开发环境的目的，也是为了熟悉, 学习，验证easyui的用法。
工程文件预览
安装NodeJs
下载EasyUi
http://www.jeasyui.net/download
下载EasyUI for jQuery, 下载完成后，不用安装，直接解压在自己的工程里面。
用NodeJs启动自己的Js实现
web_server_for_test.cmd
自己写个bat脚本, 用nodejs加载模拟服务的js文件
node web_server_for_test.js
pause
web_server_for_test.js的实现
首个js实现主要负责启动http监听端口i
判断来的url get请求, 如果没给具体的文件，说明是首页，就返回给浏览器index.htm。
如果浏览器有具体的url文件请求，说明是index,htm中包含的子url文件。
写http头，读文件，在http头的后面附加上文件内容，返回给浏览器。
如果不想搭理浏览器，直接返回.
如果想中断http服务，break, 跳出http.createServer循环。
console.log(">> node web_server_for_test.js");
var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs");
http.createServer(
function (req, res) {
console.log(">> function (req, res)");
var postData = "";
var file_name = url.parse(req.url).pathname;
req.setEncoding('utf-8');
if (file_name==""||file_name=="/") {
file_name="/index.htm";
}
var pathname=__dirname+file_name;
console.log("pathname = " + pathname);
if (req.method == "GET" || req.method == "get") {
fs.exists(pathname,
function(exists){
if(exists){
switch(path.extname(pathname)){
case ".htm":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".html":
res.writeHead(200, {"Content-Type": "text/html"});
break;
case ".TXT":
res.writeHead(200, {"Content-Type": "application/json","Pragma": "no-cache","Cache-Control": "no-cache, no-store, max-age=0","Expires":"1L"});
break;
case ".js":
res.writeHead(200, {"Content-Type": "text/javascript","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
case ".css":
res.writeHead(200, {"Content-Type": "text/css","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
case ".gif":
res.writeHead(200, {"Content-Type": "image/gif","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
case ".jpg":
res.writeHead(200, {"Content-Type": "image/jpeg","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
case ".png":
res.writeHead(200, {"Content-Type": "image/png","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
case ".mp3":
res.writeHead(200, {"Content-Type": "audio/mpeg","Content-Length":40124,"Content-Range":"bytes 0-40123/40124","Cache-control": "max-age=315360000000","Expires":"Thu, 15 Apr 2100 20:00:00 GMT"});
break;
default:
res.writeHead(200, {"Content-Type": "application/octet-stream"});
}
fs.readFile(pathname,
function (err,data){
res.end(data);
}
);
} else {
res.writeHead(200, {"Content-Type": "text/html"});
res.end("[" + pathname + "] not exist");
return;
}
});
} else if (req.method == "POST" || req.method == "post") {
} else {
res.writeHead(200, {"Content-Type": "text/html"});
res.end("cmd don't support");
return;
}
}
).listen(9876);
console.log("<< node web_server_for_test.js");
用EasyUi实现网页
index.htm中，在head中包含了easyui的js实现，这样才能有好看的效果。
因为easyui的例子代码中，显示的效果都靠easyui库的js实现。我们也是搬easyui的例子代码来改的。
easyui的教程和demo如下，demo中有各种元素的使用例子。
http://www.jeasyui.net
http://www.jeasyui.net/demo/380.html
将官方的例子片段，放到index.htm的body中，就可以验证效果了。
如果效果不合适，马上改，重新刷下网页就能看到效果。
nodejs服务器不用停, 因为是直接读文件返回给浏览器的。
nodejs服务器监听时，自己定义端口。
这个例子从浏览器访问 ： 输入 127.0.0.1:9876
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div id="tt" class="easyui-tabs" style="width:400px;height:100px;">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>
<script type="text/javascript">
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
</script>
</body>
</html>