主要思想就是任何一个静态文件也应该做响应,一个获取静态文件都应当请求来处理,这是主要思想。

同时要注意两点。第一,对于不同的文件类型,比如html,css,js,请求头里面的文件类型需要根据不同的文件类型注明,

第二,文件的路径需要表达准确,fs.readFile方法的第一个参数path是已起服务的文件为根目录,这里就是以server.js文件的所在目录为根目录

文件目录

文件夹public

Index.html

Css文件夹

Reset.css

Index.css

Js文件夹

vue.min.js

Index.js

Server.js

Server.js和文件夹publi同级

来看server.js代码

var http = require('http');

var fs = require('fs');

var url = require('url');

// 创建服务器

http.createServer( function (request, response) {

// 解析请求,包括文件名

var pathname = url.parse(request.url).pathname;

var postfix = pathname.match(/(\.[^.]+|)$/)[0];//取得后缀名

// 输出请求的文件名

console.log("Request for " + pathname + " received.");

// 从文件系统中读取请求的文件内容

fs.readFile(pathname.substr(1), function (err, data) {

if (err) {

console.log(err);

// HTTP 状态码: 404 : NOT FOUND

// Content Type: text/plain

response.writeHead(404, {'Content-Type': 'text/html; charset=utf-8'});

}else{

// HTTP 状态码: 200 : OK

// Content Type: text/plain

console.log(postfix);

if(postfix==='html'){

response.writeHead(200, {'Content-Type': 'text/html'});

}else if(postfix==='css'){

response.writeHead(200, {'Content-Type': 'text/css'});

}

else if(postfix==='js'){

response.writeHead(200, {'Content-Type': 'application/javascript'});

}else{

}

// 响应文件内容

response.write(data.toString());

}

//  发送响应数据

response.end();

});

}).listen(8080);

// 控制台会输出以下信息

console.log('Server running at http://127.0.0.1:8080/');

最后在命令行输入node server.js 把服务器起起来

然后在浏览器打开http://127.0.0.1:8080/public/index.html

Node.js完整的响应html页面(包括css,js文件)的更多相关文章

  1. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  2. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  3. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  4. 运用Gulp压缩文件编译文件。包括css js html image

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

  5. 页面(html,css,js)上传到服务器后乱码

    http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: htm ...

  6. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  7. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  8. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  9. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

随机推荐

  1. CentOs~程序部署那些事

    永久更新中…… 主要说一下在centos里,在安装程序和监控程序时,用到的一些常用的命令,希望可以帮到大家! 远程安装程序包:yum install 程序包名 下载程序包:wget 程序包地址 解压t ...

  2. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能

    不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...

  3. [转]eShopOnContainers 看微服务 ①:总体概览

    本文转自:https://www.cnblogs.com/tianyamoon/p/10081177.html 一.简介 eShopOnContainers是一个简化版的基于.NET Core和Doc ...

  4. Java 使用Arrays.sort排序 从大到小排列

    前言 一般情况,我们在Java中给数组排序,比起自己写个冒泡排序,更加喜欢使用Java中自带的sort方法,也就是Arrays.sort方法 但是,这个方法只会将数组从小到大排列,如果我们需要从大到小 ...

  5. js正则表达式 数字和小数点 非负数 保留两位小数点

    验证数字非负数  小数点保留两位小数点 下面正则已验证通过 /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/

  6. MySQL高级特性之分区表

    对于用户而言,分区表是一个独立的逻辑表,但是在底层由多个物理子表组成.实现分区的代码实际上是对一组底层表的句柄对象的封装,对分区表的请求都会通过句柄对象转化成对存储引擎的接口调用 意义 MySQL在创 ...

  7. Python re 模块

    Python re 模块 TOC 介绍 作用 正则表达式语法 贪婪和非贪婪 普通字符和特殊字符 分组(比较重要) re modul level 方法 正则表达式对象 匹配对象 常用例子 注意事项 Ja ...

  8. ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。

    事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...

  9. webpack入门教程--1

    首先说什么是webpack:Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 然后因为webpack有不同的版本,所以 ...

  10. Android 的 so 文件加载机制

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...