Node.js完整的响应html页面(包括css,js文件)
主要思想就是任何一个静态文件也应该做响应,一个获取静态文件都应当请求来处理,这是主要思想。
同时要注意两点。第一,对于不同的文件类型,比如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文件)的更多相关文章
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- Github上html页面(包括CSS样式和JS效果)如何显示出来
在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...
- 运用Gulp压缩文件编译文件。包括css js html image
安装node.js npm 以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...
- 页面(html,css,js)上传到服务器后乱码
http://blog.csdn.net/u011606714/article/details/44649159 将文件使用记事本保存成ANSI格式或者UTF格式(根据需要)即可. 设置格式: htm ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- 页面中引入js的几种方法
通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...
- Spring MVC程序中得到静态资源文件css,js,图片
转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
随机推荐
- CentOs~程序部署那些事
永久更新中…… 主要说一下在centos里,在安装程序和监控程序时,用到的一些常用的命令,希望可以帮到大家! 远程安装程序包:yum install 程序包名 下载程序包:wget 程序包地址 解压t ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->用户管理模块新增“重置用户密码”功能
不管是什么系统登录用户都有忘记密码的时候,忘记密码就进入不了系统.系统应该可以提供重置用户密码的功能.在我们框架中重置用户密码功能一般用用户管理员来完成.当然如果做得复杂点还可以由用户自己来重置(如: ...
- [转]eShopOnContainers 看微服务 ①:总体概览
本文转自:https://www.cnblogs.com/tianyamoon/p/10081177.html 一.简介 eShopOnContainers是一个简化版的基于.NET Core和Doc ...
- Java 使用Arrays.sort排序 从大到小排列
前言 一般情况,我们在Java中给数组排序,比起自己写个冒泡排序,更加喜欢使用Java中自带的sort方法,也就是Arrays.sort方法 但是,这个方法只会将数组从小到大排列,如果我们需要从大到小 ...
- js正则表达式 数字和小数点 非负数 保留两位小数点
验证数字非负数 小数点保留两位小数点 下面正则已验证通过 /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
- MySQL高级特性之分区表
对于用户而言,分区表是一个独立的逻辑表,但是在底层由多个物理子表组成.实现分区的代码实际上是对一组底层表的句柄对象的封装,对分区表的请求都会通过句柄对象转化成对存储引擎的接口调用 意义 MySQL在创 ...
- Python re 模块
Python re 模块 TOC 介绍 作用 正则表达式语法 贪婪和非贪婪 普通字符和特殊字符 分组(比较重要) re modul level 方法 正则表达式对象 匹配对象 常用例子 注意事项 Ja ...
- ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。
事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...
- webpack入门教程--1
首先说什么是webpack:Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 然后因为webpack有不同的版本,所以 ...
- Android 的 so 文件加载机制
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...