nodeJS搭建前端服务环境（适配开发工具eclipse及sublime Text）

前提：项目使用eclipse下载，后期进行更新提交等操作，使用tomcat服务器，chrome查看页面效果；使用sublimeText进行前端开发，在这个工具上的编辑了代码，需要先进入eclipse对应页面点击一下才会进行页面代码刷新（refresh）,没法直接在chrome看到效果，操作比较麻烦。

 

解决：安装好node环境，自行百度；在eclipse对应工作区间项目文件夹下新建一份http.js文件以及mime.js（我选在了跟页面同一级别的位置），

如图

http.js的内容如下：

 

 var http = require("http");
 var fs=require('fs');
 var mime=require('./mime').types;
 var path=require('path');
 var root="D:/devtools/eclipse/worplace/citypreferrd_client/src/main/webapp/pages/";
var server=http.createServer(function(req, res) {
	var url=req.url;
    var file = root+url;
    console.log(file);
    var ext=path.extname(file);
    ext=ext?ext.slice(1):'unknown';
     fs.readFile(file,'binary',function(err,data){
        if(err){
            res.writeHeader(404,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
            res.end();
        }else{
            var contentType=mime[ext] || "text/plain";
            res.writeHeader(200,{
                'content-type' : contentType+';charset="utf-8"'
            });
            res.write(data, "binary");//将index.html显示在客户端
            res.end();


        }
    })
}).listen(8088);
console.log("HTTP server is listening at port 8088.");	var url=req.url;
    var file = root+url;
    console.log(file);
    var ext=path.extname(file);
    ext=ext?ext.slice(1):'unknown';
     fs.readFile(file,'binary',function(err,data){
        if(err){
            res.writeHeader(404,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
            res.end();
        }else{
            var contentType=mime[ext] || "text/plain";
            res.writeHeader(200,{
                'content-type' : contentType+';charset="utf-8"'
            });
            res.write(data, "binary");//将index.html显示在客户端
            res.end();


        }
    })
}).listen(8088);
console.log("HTTP server is listening at port 8088.");

root:选用http.js所在的位置(特别留意:要改成你自己项目的路径,现在里面用的是我的)；

 

8088：使用的端口，注意不要使用已经被占用的端口

 

 

 

 

mime.js的内容如下：

exports.types = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml",
    "woff": "application/x-woff",
    "woff2": "application/x-woff2",
    "tff": "application/x-font-truetype",
    "otf": "application/x-font-opentype",
    "eot": "application/vnd.ms-fontobject"
};

 

 

接着，运行环境。在当前文件夹空白区域按住shift+鼠标右键，选择【在此处打开命令窗口】，输入node 文件名；【留意：把文件直接拖进来就会自动生成文件路径加名字】

控制台输出

("HTTP server is listening at port 8088.");

 

表示正常启动了，报错了话试试修改端口号，记住http.js文件中需要修改两个地方*（两处使用了端口号）

 

启动成功，浏览器输入127.0.0.1:8088就可以看到提示了（8088是你设置的端口号），可以看下上面我的文件夹的图片，如果这里我写成127.0.0.1:8088/index.html就能直接访问index.html这个页面。

 

通过这种方式在sublimeText上面编辑的代码，浏览器一刷新就能看到效果，省去了eclipse上点击的一个步骤，eclipse就单纯执行提交更新操作，也可以不用启动tomcat服务。

 

 

小白请指教，高手求指点