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

同时要注意两点。第一,对于不同的文件类型,比如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. VSCode入门----设置成中文

    将VScode设置成中文. 1.如下图,安装中文插件,点击左边后,输入chinese搜索,然后选择中文件简体进行安装. 2.按住Ctrl+Shift+P,然后输入 configure ,如下图,选择“ ...

  2. 【转载】ASP.NET Core 依赖注入

    本文转自:http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/ 为什么要写这个博客 DI在.NET Core里面被提到了一个非常重要的位置, 这篇文 ...

  3. linux下(fdisk,gdisk,parted)三种分区工具比较

    1 2种分区结构简介 MBR分区 硬盘主引导记录MBR由4个部分组成 主引导程序(偏移地址0000H--0088H),它负责从活动分区中装载,并运行系统引导程序. 出错信息数据区,偏移地址0089H- ...

  4. NET快速信息化系统开发框架 V3.2 -> “用户管理”主界面使用多表头展示、增加打印功能

    RDIFrameowrk.NET 用户管理是使用非常频繁的模块,由于需要展示的字段比较多,以前的展示方式显得不是太规范,现3.2版本用户管理主界面进行了全新的设计,数据列表展示使用了Dev家族全新的G ...

  5. Spring Boot 2.x(九):遇到跨域不再慌

    什么是跨域 首先,我们需要了解一下一个URL是怎么组成的: // 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ ...

  6. Python使用WMI模块获取Windows系统的硬件信息,并使用pyinstaller库编译打包成exe的可执行文件

    由于公司现阶段大多数应用软件都是基于Windows系统开发和部署,很多软件安装部署都是在windows server 2012.windows server 2008之类的服务器上,部门同事每次测试一 ...

  7. 以太仿DApp开发环境搭建

    在网上找了些以太仿的资料,是node.js写的,之前也了解过node.js,正好也可以用上.本篇主要学习以太仿DApp开发环境搭建. 一.安装 DApp 开发环境 1.1安装 Node.js 首先下载 ...

  8. 聊聊数据库~3.SQL基础篇

    上篇回顾:聊聊数据库~SQL环境篇 扩展:为用户添加新数据库的权限 PS:先使用root创建数据库,然后再授权grant all privileges on 数据库.* to 用户名@"%& ...

  9. python实现ssh远程登录

    python实现ssh远程登录 # 测试过程中,比较常用的操作就是将DUT(待测物)接入网络中,然后远程操控对DUT, # 使用SSH远程登陆到主机,然后执行相应的command即可 # python ...

  10. MEF 基础简介 四

    前言 前面讲解了MEF的引用方法,接口的导入导出,类属性的导入导出和集合的导出用法其实大家可以看到基本上大同小异的. MEF的延迟加载 我们知道当装配一个组件的时候,当前组件里面的所有的Import的 ...