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 相关文章推荐
Ubuntu中搭建Nodejs开发环境过程分享
Jun 01 NodeJs
nodejs教程之入门
Nov 21 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
nodejs修复ipa处理过的png图片
Feb 17 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
详解如何在NodeJS项目中优雅的使用ES6
Apr 22 NodeJs
详解nodeJS之路径PATH模块
May 31 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodeJs实现基于连接池连接mysql的方法示例
Feb 10 NodeJs
nodejs+mongodb aggregate级联查询操作示例
Mar 17 NodeJs
Nodejs libuv运行原理详解
Aug 21 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 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
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python遍历pandas数据方法总结
2018/02/09 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python提取频域特征知识点浅析
2019/03/04 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Linux操作面试题
2015/02/11 面试题
医学类个人求职信范文
2014/02/05 职场文书
高一化学教学反思
2014/02/05 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书