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

来源:互联网 发布:淘宝运营合作 编辑:程序博客网 时间:2024/05/22 08:05

前提:项目使用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.");

root:选用http.js所在的位置;

8088:使用的端口,注意不要使用已经被占用的端口


接着,运行环境。在当前文件夹空白区域按住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服务。



小白请指教,高手求指点