node 创建静态web服务器(上)
声明:本文仅用来做学习记录。
本文将使用node创建一个简单的静态web服务器。
准备工作:
首先,准备好一个类似图片中这样的页面
第一步:
创建 http 服务:
const http = require('http'); // 加载http服务模块 let server = http.createServer((req, res) => {
res.writeHead(, {'Content-Type': 'text/html;charset=utf-8'});
res.end(); // 结束响应
}) server.listen(); // 设置端口号
第二步:
获取 url , 我们要获取类似这样的url ,来展示对应的内容
http://localhost:3000/index.html
let pathName = req.url;
console.log(pathName); // /index.html /favicon.ico
这里,我们发现发送了两次请求,而 /favicon.ico 这个请求,我们是不需要的,所以,需要过滤掉。
同时,我们需要对空地址做处理,所以,代码如下:
if (pathName == '/') {
pathName = '/index.html'; // 如果请求地址为空,则加载首页
} if (pathName != '/favicon.ico') { // 当不请求 页面图标时 }
接下来,我们需要读取服务器文件,首先加载 fs 模块
const fs = require('fs')
然后,如果请求的页面没有找到,则加载404页面:
if (pathName != '/favicon.ico') { // 当不请求 页面图标时
fs.readFile('static/' + pathName, (err, data) => { // 读取对应文件
if (err) { // 如果没有找到文件
fs.readFile('static/404.html', (err, data404) => { // 则加载 404 页面
if (err) {
console.log('');
} else {
res.writeHead(, {'Content-Type': 'text/html;charset=utf-8'}); // 设置请求状态及表头
res.write(data404); // 读取数据
res.end(); // 结束响应
}
})
}
})
return false;
}
找到则加载对应页面:
else {
res.writeHead(, {'Content-Type': 'text/html;charset=utf-8'}); // 设置请求状态及表头
res.write(data); // 读取数据
res.end(); // 结束响应
}
此时,我们已经可以看到效果如下:
但是,因为我们将所有请求的文件表头都设置为
'Content-Type': 'text/html;charset=utf-8'
这显然是错误的做法,比如,css 文件, 我们应设置为 'text/css' , js文件 , 设置为 'text/javascript' 。
下面,我们先创建一个文件夹,我将它命名为model,在该文件夹下创建一个js文件 getMime
代码如下:
const getMime = (extname) => {
switch (extname) {
case '.html':
return 'text/html';
case '.css':
return 'text/css';
case '.js':
return 'text/javascript';
default:
return 'text/html';
}
}
module.exports = {
getMime
}
然后,加载该文件
const mimeModel = require('./model/getMime') // 加载getMime
我们要根据对应的请求的文件后缀名,来设置对应的文件格式,这里,我们需要引入 path模块
再用path.extname()方法,获取到对应的后缀名,
代码如下:
const http = require('http'); // 加载http服务模块
const fs = require('fs'); // 加载fs模块
const path = require('path'); // 加载path模块
const mimeModel = require('./model/getMime') // 加载getMime let server = http.createServer((req, res) => { let pathName = req.url;
console.log(pathName); if (pathName == '/') {
pathName = '/index.html'; // 如果请求地址为空,则加载首页
}
let extName = path.extname(pathName); // 获取请求文件的后缀名
if (pathName != '/favicon.ico') { // 当不请求 页面图标时
fs.readFile('static/' + pathName, (err, data) => { // 读取对应文件
if (err) { // 如果没有找到文件
fs.readFile('static/404.html', (err, data404) => { // 则加载 404 页面
if (err) {
console.log('');
} else {
res.writeHead(, {'Content-Type': 'text/html;charset=utf-8'}); // 设置请求状态及表头
res.write(data404); // 读取数据
res.end(); // 结束响应
}
})
return false;
} else {
let mime = mimeModel.getMime(extName); // 根据对应的后缀名,获取对应的文件格式
res.writeHead(, {'Content-Type': "" + mime + ";charset='utf-8'"}); // 设置请求状态及表头
res.write(data); // 读取数据
res.end(); // 结束响应
}
})
} }) server.listen(); // 设置端口号
结果如图所示:
但是,对应的图片并未加载进来,这是因为
这两个文件未加载,原因是请求地址后带参数,无法识别,所以,我们需要再引入url模块,使用url.parse()方法,将该地址解析为不带参数的地址
最后,完整代码如下:
const http = require('http'); // 加载http服务模块
const fs = require('fs'); // 加载fs模块
const path = require('path'); // 加载path模块
const url = require('url'); // 加载url模块
const mimeModel = require('./model/getMime') // 加载getMime let server = http.createServer((req, res) => { let pathName = url.parse(req.url).pathname; // 解析请求地址不带参数
console.log(pathName); if (pathName == '/') {
pathName = '/index.html'; // 如果请求地址为空,则加载首页
}
let extName = path.extname(pathName); // 获取请求文件的后缀名
if (pathName != '/favicon.ico') { // 当不请求 页面图标时
fs.readFile('static/' + pathName, (err, data) => { // 读取对应文件
if (err) { // 如果没有找到文件
fs.readFile('static/404.html', (err, data404) => { // 则加载 404 页面
if (err) {
console.log('');
} else {
res.writeHead(, {'Content-Type': 'text/html;charset=utf-8'}); // 设置请求状态及表头
res.write(data404); // 读取数据
res.end(); // 结束响应
}
})
return false;
} else {
let mime = mimeModel.getMime(extName); // 根据对应的后缀名,获取对应的文件格式
res.writeHead(, {'Content-Type': "" + mime + ";charset='utf-8'"}); // 设置请求状态及表头
res.write(data); // 读取数据
res.end(); // 结束响应
}
})
} }) server.listen(); // 设置端口号
结果如图:
但,此时,这个简单的静态web服务器只能识别 html,css,js 文件,比如图片的格式,也是 'text/html',这显然是不正确的,所以,仍需再做处理,下节再做介绍。
node 创建静态web服务器(上)的更多相关文章
- node 创建静态web服务器(下)(处理异步获取数据的两种方式)
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
- [Node]创建静态资源服务器
项目初始化 .gitignore cnpm i eslint -D eslint --init得到.eslintrc.js .eslintrc.js module.exports = { 'env': ...
- Fenix – 基于 Node.js 的桌面静态 Web 服务器
Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...
- Harp – 内置常用预处理器的静态 Web 服务器
Harp 是一个基于 Node.js 平台的静态 Web 服务器,内置流行的预处理器,支持把 Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeSc ...
- 【重点突破】——使用Express创建一个web服务器
一.引言 在自学node.js的过程中有一个非常重要的框架,那就是Express.它是一个基于NodeJs http模块而编写的高层模块,弥补http模块的繁琐和不方便,能够快速开发http服务器.这 ...
- 使用 Node.js 搭建 Web 服务器
使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:http模块.文件系统.url解析模块.路径解析模块.以及301重定向技术等, ...
- 十七、创建一个 WEB 服务器(一)
1.Node.js 创建的第一个应用 var http=require("http") http.createServer(function (req,res) { res.wri ...
- ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上
一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Windows上,这样Asp.net开发的网站就难以做到跨平台.由于微软的各项技术的开源,所以微软自然 ...
- net网站运行在自定义的Web服务器上
ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上 一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Win ...
随机推荐
- MySQL高级学习笔记(二):mysql配置文件、mysql的用户与权限管理、mysql的一些杂项配置
文章目录 mysql配置文件 二进制日志log-bin 错误日志log-error 数据文件 两系统 Myisam存放方式 innodb存放方式 如何配置 mysql的用户与权限管理 MySQL的用户 ...
- Centos7使用Python3
1.安装python3替换python2.7 [root@Python src]# wget https://www.python.org/ftp/python/3.5.4/Python-3.5.4. ...
- Gradle教程
Ant和Maven共享在Java市场上相当大的成功.ANT是在2000年发布了第一个版本的工具,它是基于程序编程思想的发展. 后来,人们在 Apache-Ivy的帮助下,网络接受插件和依赖管理的能力有 ...
- [轉]C/C++中的volatile使用時機?
不知各位對volatile(揮發性的)這個字陌不陌生? 我相信大家在一些程式或多或少都看 過這個字眼, 但是究竟要在何種場合用它呢?.當然一定是有需要, C/C++才會有這個保留字, 否則只是增加pr ...
- >>> print "hello" SyntaxError: Missing parentheses in call to 'print'
错误原因说你的函数print缺省圆括号,可以知道你用的python是3.x版本3.x版本的python,print中的参数要用圆括号括起来,改成:print("hello")
- js中构造函数的原型添加成员的两种方式
首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...
- 将 XML 架构(XSD)附加到Word文档
附加到文档中的 XML 架构是为您的组织进行自定义而设计的.XML 架构通常由 IT 专业人员创建,他们的职责就是在 Word 中为您的组织构建专用的模板或解决方案. 可用于附加到文档的架构在架构库中 ...
- opensns的URL模式
URL模式 如果我们直接访问入口文件的话,由于URL中没有模块.控制器和操作,因此系统会访问默认模块(Home)下面的默认控制器(Index)的默认操作(index),因此下面的访问是等效的: htt ...
- redis的密码设置
若连接redis时报错:Redis (error) NOAUTH Authentication required.,通常是由于redis设了密码但连接时却未提供密码引起的. 设置密码: 编辑redis ...
- gradle笔记
gradle笔记 一.基础知识 1.1.groovy语言 Groovy适用于Java虚拟机的一种敏捷的动态语言,他是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言,使用该 ...