声明:本文仅用来做学习记录。

本文将使用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服务器(上)的更多相关文章

  1. node 创建静态web服务器(下)(处理异步获取数据的两种方式)

    接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...

  2. [Node]创建静态资源服务器

    项目初始化 .gitignore cnpm i eslint -D eslint --init得到.eslintrc.js .eslintrc.js module.exports = { 'env': ...

  3. Fenix – 基于 Node.js 的桌面静态 Web 服务器

    Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...

  4. Harp – 内置常用预处理器的静态 Web 服务器

    Harp 是一个基于 Node.js 平台的静态 Web 服务器,内置流行的预处理器,支持把 Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeSc ...

  5. 【重点突破】——使用Express创建一个web服务器

    一.引言 在自学node.js的过程中有一个非常重要的框架,那就是Express.它是一个基于NodeJs http模块而编写的高层模块,弥补http模块的繁琐和不方便,能够快速开发http服务器.这 ...

  6. 使用 Node.js 搭建 Web 服务器

    使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:http模块.文件系统.url解析模块.路径解析模块.以及301重定向技术等, ...

  7. 十七、创建一个 WEB 服务器(一)

    1.Node.js 创建的第一个应用 var http=require("http") http.createServer(function (req,res) { res.wri ...

  8. ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上

    一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Windows上,这样Asp.net开发的网站就难以做到跨平台.由于微软的各项技术的开源,所以微软自然 ...

  9. net网站运行在自定义的Web服务器上

    ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上   一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Win ...

随机推荐

  1. MySQL高级学习笔记(二):mysql配置文件、mysql的用户与权限管理、mysql的一些杂项配置

    文章目录 mysql配置文件 二进制日志log-bin 错误日志log-error 数据文件 两系统 Myisam存放方式 innodb存放方式 如何配置 mysql的用户与权限管理 MySQL的用户 ...

  2. Centos7使用Python3

    1.安装python3替换python2.7 [root@Python src]# wget https://www.python.org/ftp/python/3.5.4/Python-3.5.4. ...

  3. Gradle教程

    Ant和Maven共享在Java市场上相当大的成功.ANT是在2000年发布了第一个版本的工具,它是基于程序编程思想的发展. 后来,人们在 Apache-Ivy的帮助下,网络接受插件和依赖管理的能力有 ...

  4. [轉]C/C++中的volatile使用時機?

    不知各位對volatile(揮發性的)這個字陌不陌生? 我相信大家在一些程式或多或少都看 過這個字眼, 但是究竟要在何種場合用它呢?.當然一定是有需要, C/C++才會有這個保留字, 否則只是增加pr ...

  5. >>> print "hello" SyntaxError: Missing parentheses in call to 'print'

    错误原因说你的函数print缺省圆括号,可以知道你用的python是3.x版本3.x版本的python,print中的参数要用圆括号括起来,改成:print("hello")

  6. js中构造函数的原型添加成员的两种方式

    首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...

  7. 将 XML 架构(XSD)附加到Word文档

    附加到文档中的 XML 架构是为您的组织进行自定义而设计的.XML 架构通常由 IT 专业人员创建,他们的职责就是在 Word 中为您的组织构建专用的模板或解决方案. 可用于附加到文档的架构在架构库中 ...

  8. opensns的URL模式

    URL模式 如果我们直接访问入口文件的话,由于URL中没有模块.控制器和操作,因此系统会访问默认模块(Home)下面的默认控制器(Index)的默认操作(index),因此下面的访问是等效的: htt ...

  9. redis的密码设置

    若连接redis时报错:Redis (error) NOAUTH Authentication required.,通常是由于redis设了密码但连接时却未提供密码引起的. 设置密码: 编辑redis ...

  10. gradle笔记

    gradle笔记 一.基础知识 1.1.groovy语言 Groovy适用于Java虚拟机的一种敏捷的动态语言,他是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言,使用该 ...