test easyui with nodejs

前言

在一個demo中，看到用STM32的tcp/ip通訊做的http伺服器，返給瀏覽器網頁的素材，使瀏覽器顯示出網頁，並在網頁中，用JS顯示動態資料的實現。

查了下，這個web_server網頁素材的原型是用easyui做的，在PC機做前期測試時，用的是nodejs.

整理了一下，搭了開發環境，用nodejs啟動測試用的自己的js實現, 自己的js再向瀏覽器返回html檔案和其他素材。

實驗的目的

可以先在PC端驗證easyui網頁的效果，然後再放到stm32系統上和瀏覽器聯調。
瀏覽器要選chrome.

工程下載點

test_esay_ui_with_nodejs.7z

實驗

實驗效果

實驗的easyui素材程式碼，從easyui的demo片段中直接摘錄的。
做這個開發環境的目的，也是為了熟悉, 學習，驗證easyui的用法。

工程檔案預覽

安裝NodeJs

http://nodejs.cn/download/

下載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>