其他章节请看:

前端学习 node 快速入门 系列

简易版 Apache

我们用 node 来实现一个简易版的 Apache:提供静态资源访问的能力

实现

直接上代码。

- demo
- static // 静态资源文件夹
- index.html // 主页
- 1.jpg
- 1.css
- 1.js
- index.js // 入口文件

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<p>欢迎来到首页</p>
<img src="1.jpg" alt="">
<section></section>
<script src='1.js'></script>
</body>
</html>

1.js 和 1.css:

document.querySelector('section').innerHTML = '我来自js' // js

body{color:red} // css

index.js(入口文件):

const http = require('http')
const fs = require('fs')
const server = http.createServer() const requestListener = (req, res) => {
const url = req.url
// 如果url是 '/',则返回主页
if(url === '/'){
fs.readFile('./static/index.html', (err, data) => {
if (err) throw err;
res.end(data)
});
return
} // 如果url不是 '/',则返回资源(找不到资源则报 404)
fs.readFile('./static/' + url, (err, data) => {
if (err) {
res.writeHead(404, {'Content-type':'text/html;charset=utf8'})
res.end('没有找到对应的资源')
}
res.end(data)
})
} server.on('request', requestListener)
server.listen('3000', () => {
console.log('服务器已启动')
})

启动服务器:

$ node index

检验服务器是否能提供静态资源访问的能力。

1. 浏览器输入 http://localhost:3000/1.css

页面显示:body{color:red}

2. 浏览器输入 http://localhost:3000/1.js

页面显示:document.querySelector('section').innerHTML = '鎴戞潵鑷猨s'(未指定编码,所以中文乱码。不碍事)

3. 浏览器输入 http://localhost:3000/1.jpg
页面显示:1.jpg(正常显示图片)

3 种静态资源都能正常响应。

访问主页:

浏览器输入:http://localhost:3000/index.html 或 http://localhost:3000/

页面显示:
欢迎来到首页
图片
我来自js

主页和其中的图片、css 以及 js 配合的非常完美。

:中文乱码的问题没有出现。因为我们在 html 页面中 使用了 <meta charset="utf-8"> 来指定编码。

通常访问不存在的资源会返回 404。请看:

浏览器输入:http://localhost:3000/2.css

页面显示:
没有找到对应的资源

扩展

至此,我们的简易版 apache 其实已经大功告成。在此基础之上,我们再扩展一下。

我的服务器我做主

理解这一点很重要:这个服务器完全由我们做主

现在所有的请求都会进入 requestListener() 方法,如果 url 是 '/',服务器就返回主页(index.html),否则就去 static 文件夹中读取相应的资源,如果没有找到对应的资源,就做 404 的处理。假如 requestListener() 是一个空方法,则说明我们的服务器不提供任何服务。

所有的请求都是 url

不要把 http://localhost:3000/1.css 中的 1.css 当成文件路径,而要当成 url,因为所有的请求都是 url。请看示例:

const requestListener = (req, res) => {
...
if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css') // url 得声明成 let
}
fs.readFile('./static/' + url, (err, data) => { // {1}
...
})
}

在 index.js 的 fs.readFile('./static/'(行{1}) 上面增加三行代码。

浏览器输入 http://localhost:3000/1.myCss

页面显示:body{color:red}

现在给服务器发送请求 http://localhost:3000/1.myCss,服务器也会返回 1.css 文件的内容。有些网站的 url 设计的非常优雅。请看:

http://product.dangdang.com/29200520.html

// 更优雅
https://www.douban.com/group/topic/214827461/

重定向

未登录的状态去访问页面,通常会被重定向到首页。我们来模拟一下:

if(url.endsWith('.myCss')){
url = url.replace('.myCss', '.css')
res.writeHead(302, {'Location':'/'}) // {1}
// 行{1} 等价于下面两行
// res.statusCode = '302'
// res.setHeader('Location', '/') }

在 index.js 中增加 res.writeHead(302, {'Location':'/'})(行{1}),浏览器输入 http://localhost:3000/1.myCss,页面会重定向到主页。

:没有后端开发经验的学习 node 会比较吃力。比如重定向,我们想到的可能是通过调用一个重定向的方法来实现,而 node 写起来更底层。

302 是临时重定向。301 是永久重定向。请看示例:

// 临时重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 302 Found // 永久重定向
Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently Request URL: http://localhost:3000/1.myCss
Request Method: GET
Status Code: 301 Moved Permanently (from disk cache) // {1}

临时重定向,浏览器每次都会去服务器那里;而永久重定向,第二次就不会去服务器那里,而是直接在浏览器端重定向过去(行{1})

自动重启服务

每次修改入口文件,都需要重新启动服务器(执行 node index),非常麻烦。

可以通过 nodemon 来帮助我们自动重启服务。

// 全局安装 nodemon。
$ npm install --global nodemon // 一定要全局安装 nodemon。否则执行 nodemon -v 会报错。
$ nodemon -v // 运行入口文件。
$ nodemon index // {1}

使用 nodemon 非常简单。通过 npm 全局安装后,用 nodemon 代替 node(行{1})运行入口文件即可。

:笔者还尝试了 supervisor,感觉没有 nodemon 好用。比如我输入 let a = (处在一个语法错误的状态)然后保存,supervisor 会退出服务,而 nodemon 只是报错,仍会继续监听。

其他章节请看:

前端学习 node 快速入门 系列

前端学习 node 快速入门 系列 —— 简易版 Apache的更多相关文章

  1. 前端学习 node 快速入门 系列 —— 服务端渲染

    其他章节请看: 前端学习 node 快速入门 系列 服务端渲染 在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...

  2. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

  3. 前端学习 node 快速入门 系列 —— npm

    其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...

  4. 前端学习 node 快速入门 系列 —— 模块(module)

    其他章节请看: 前端学习 node 快速入门 系列 模块(module) 模块的导入 核心模块 在 初步认识 node 这篇文章中,我们在读文件的例子中用到了 require('fs'),在写最简单的 ...

  5. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  6. 快速入门系列--WebAPI--04在老版本MVC4下的调整

    WebAPI是建立在MVC和WCF的基础上的,原来微软老是喜欢封装的很多,这次终于愿意将http编程模型的相关细节暴露给我们了.在之前的介绍中,基本上都基于.NET 4.5之后版本,其System.N ...

  7. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  8. vue 快速入门 系列 —— vue-cli 下

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  9. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

随机推荐

  1. kubernetes实战-交付dubbo服务到k8s集群(四)使用blue ocean流水线构建dubbo-demo-service

    使用jenkins创建一个新的项目:dubbo-demo,选择流水线构建 勾选保存构建历史和指定项目为参数化构建项目: 添加构建参数:以下配置项,是王导根据多年生产经验总结出来的甩锅大法: 除了bas ...

  2. 2018牛客多校第一场 E-Removal【dp】

    题目链接:戳这里 转自:戳这里 题意:长度为n的序列,删掉m个数字后有多少种不同的序列.n<=10^5,m<=10. 题解:dp[i][j]表示加入第i个数字后,总共删掉j个数字时,有多少 ...

  3. hdu5303贪心

    http://acm.hdu.edu.cn/showproblem.php?pid=5303 说一下题目大意.. 有一个长为L的环..你家在原点位置0,那么剩下L-1个点上种有一些树, 给你树的位置和 ...

  4. Angular 2 for 2017 web full stack development

    1 1 1 Angular 2 for 2017 web full stack development 1 1 https://angular2.xgqfrms.xyz/ https://ng2-he ...

  5. how to remove git commit history

    how to remove git commit history 如何删除 GitHub 仓库的历史数据 git filter-branch remove GitHub git commit hist ...

  6. k8s部署mysql数据持久化

    在这里我部署mysql的目的是为了后面将上一篇博客docker打包的el-admin镜像部署到k8s上,所以本文主要是部署mysql并实现持久化. 1.将我们的应用都部署到 el-admin 这个命名 ...

  7. 千万不要错过VAST,NGK算力的下一个财富机会!

    我们把目光投向NGK市场,近来,NGK接连新币,推出了SPC后,又有VAST.在目前市场上债券收益率已经趋近于零的情况下,世界上的大多数央行都在试图让本国货币贬值,所以在此时寻找其他保值资产是合理的. ...

  8. 「NGK每日快讯」2021.2.7日NGK公链第96期官方快讯!

  9. 深入解析 HTTP 缓存控制

    缓存(Cache)是计算机领域里的一个重要概念,是优化系统性能的利器. 由于链路漫长,网络时延不可控,浏览器使用 HTTP 获取资源的成本较高.所以,非常有必要把"来之不易"的数据 ...

  10. AForge实现拍照

    记得先引用DLL private FilterInfoCollection videoDevices; private VideoCaptureDevice videoSource; BLL.AWBL ...