前提:项目使用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服务。
小白请指教,高手求指点