3分钟快速搭建nodejs本地服务器方法运行测试html/js


Posted in NodeJs onApril 01, 2017

做前端的都知道,公司的项目在自己的电脑上搭建环境是挺麻烦的一件事情

  1. 首先:一般个人电脑没公司的配置性能好,
  2. 其次:搭建公司项目在自己电脑涉及很多缓存环境,资源环境包,数据库等的限制,加起来够搞一天了(熟悉公司搭建的环境除外)

就我自身公司而言情况是这样,我作为前端工程师,

前端目前是基于polymer——实现最近遇到的问题就是不知道自己写的页面有没有什么问题,但是要成功启动项目的tomcat才能看,因为这些页面无法直接打开,会包资源解析错误,

于是我在想,如何才能把前端页面不依赖tomcat这些蛋疼的部署服务器呢?

于是百度看到了nodejs和nginx,带着对前端服务器的好奇开始了自己的实践,一个晚上也请教了一些同学,然后得到了一些启发

步骤如下

1、到nodejs官网下载安装包http://nodejs.cn/安装完成后自动映射了环境到系统中,不需要自己配置环境变量,然后打开控制台
输入命令:node

没有报错表示运行成功

2、接着在与测试目录同级目录下面新建下面两个js文件

http.js(服务器脚本配置文件)

var PORT = 3000;//

var http = require('http');
var url=require('url');
var fs=require('fs');
var mine=require('./mine').types;//
var path=require('path');

var server = http.createServer(function (request, response) {
  var pathname = url.parse(request.url).pathname;
  var realPath = path.join("webapp", pathname);  //这里设置自己的文件名称;

  var ext = path.extname(realPath);
  ext = ext ? ext.slice(1) : 'unknown';
  fs.exists(realPath, function (exists) {
    if (!exists) {
      response.writeHead(404, {
        'Content-Type': 'text/plain'
      });

      response.write("This request URL " + pathname + " was not found on this server.");
      response.end();
    } else {
      fs.readFile(realPath, "binary", function (err, file) {
        if (err) {
          response.writeHead(500, {
            'Content-Type': 'text/plain'
          });
          response.end(err);
        } else {
          var contentType = mine[ext] || "text/plain";
          response.writeHead(200, {
            'Content-Type': contentType
          });
          response.write(file, "binary");
          response.end();
        }
      });
    }
  });
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");

mine.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"
};

上面两个js新建成功后,打开http.js,接着在里面找到路径设置,把我当前webapp改成你自己的名字项目名称

Friendship tips:(前提是跟js在同级个目录。如果测试项目在其他文件,那么路径可能要设置绝对路径了_这个我没尝试)
下面是我的目录对应的文件,三个箭头是必备的其他无需设置

3分钟快速搭建nodejs本地服务器方法运行测试html/js 

3、控制台启动服务器测试是否成功

见下图:

打开项目所在目录输入node http.js

接着提示端口启动成功,

接着直接输入自己需要测试的文件地址就行了。比如我的 http://localhost:3000/index.html

到此全部部署完成!

3分钟快速搭建nodejs本地服务器方法运行测试html/js

这里注意:一定要在端口号后面加上自己文件路径才能运行成功。不然会报错因为http.js里面写的比较简单,暂时未直接映射
http://localhost:3000

如果出错了那么请重写启动服务

即:Node.js

当然你有兴趣的话可以重写node.js完善它

3分钟快速搭建nodejs本地服务器方法运行测试html/js

最后表示:这两个js都是我在博客和百度上看到一些大牛写的,不过他们的写的教程不够清晰(本人水平不足不能跟上他们的思路), 所以再次感谢这些博客大牛.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
轻松创建nodejs服务器(5):事件处理程序
Dec 18 NodeJs
浅谈NodeJS中require路径问题
May 07 NodeJs
NodeJS的Promise的用法解析
May 05 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
Nodejs 搭建简单的Web服务器详解及实例
Nov 30 NodeJs
nodeJS删除文件方法示例
Dec 25 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 #NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 #NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 #NodeJs
NodeJS测试框架mocha入门教程
Mar 28 #NodeJs
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
Mar 28 #NodeJs
angular2+nodejs实现图片上传功能
Mar 27 #NodeJs
深入nodejs中流(stream)的理解
Mar 27 #NodeJs
You might like
多人战的战术与战略
2020/03/04 星际争霸
php md5下16位和32位的实现代码
2008/04/09 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python入门篇之数字
2014/10/20 Python
python爬虫的工作原理
2017/03/05 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
爱情保证书范文
2014/02/01 职场文书
理财计划书
2014/08/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
租房协议书范文
2014/08/20 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
python之django路由和视图案例教程
2021/07/26 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Elasticsearch 批量操作
2022/04/19 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL