静态网页添加tab_搭建Nodejs服务器,静态页面的访问「502」

  • nodejs搭建的服务器没有物理目录的概念,不同于别的服务器。
  • 对nodejs一点也不了解的朋友可以看我写的文501nodejs做出最简单的网页服务端。【501】
  1. 搭建服务器可以访问网页test1.html
  2. 路由可以访问test1.html和test2.html
  3. 路由外的网页用test3.html来示404错误
  4. 理解网页外链文件也要路由才能访问

一、先做三个文件,一个是test1.html和test2.html,这两个是网页文件,还有一个文件是app.js,就是我们的服务器文件。

f141a79c2aa1a87bd63833573e7ab9ac.png

test1.html和test2.html都做得简单点,盒子装几个字就可以了。

ff3d41181330f78214e268c1d1e42de8.png
fd47c6d8932ae482c108050315be70d0.png
336387a9200fc8cea14d3cf33040d4f7.png
2ed930a3ef8865a75edaf4e2f4f36cb9.png

二、我们看一下服务器文件app.js怎么写。

baafa1cd2f6783c154c65e77e1a3c1c5.png
b32d33d2f1990dbe0578f0a9bbb1dfb9.png
086936fc40d4a1daf19925b7f7f72660.png

三、然后你会发现,不管我们在路径后面写什么,都会响应test1.html。

d4eaeb4704d15356290733f8e3a1dccc.png

四、于是我们做这么一个改变,让服务器在特定路由下才会响应,其它路由都不会响应,后面的测试要记得保存js文件后重新挂起服务器。

a3a332993ed84754cbc9b4a12f58b7d0.png
258d70a1bb94b2b11d0aca097f480e59.png

五、同样的方法,我们再添加一张可以访问的静态网页。

d62a94ec9888b9c0240b38aee230dcd9.png
9e84691c4e905ade58e98cd503e09631.png

六、我再加一张网页test3.html。

3e9aa63631ba7b14eb685e5d4ab9e1f7.png
a89a007032d19b46c821090e9892dc37.png

七、给test3.html也加进入吧,不过不给它加路由,随便输入路由就会跳到test3.html。

8238aee6232bd44a38f0a866e971d491.png
596146630b9e625877dd6f60b66dae7f.png

八、这里我们做一个my.css文件,给test1.html做外链样式文件。

2146f00aff7a7e4f683e637bbe81d70e.png

上图是my.css内容,下图是test1.html添加外链样式

5414f7bf68fa332b43c29f618ec17683.png

九、结果我们访问fpage,背景居然还是白色的,没有变蓝啊。

efe0d3ad0c8cfc03ff72d360eac80517.png

十、原因是my.css不是服务里的静态文件,所以不起作用,我们把它加个路由就可以了,路由名随便起。

88745e160de3919b1074392013cb4d81.png
f21270979b7a04155aa4ae8e5ba5ed6a.png

十一、还是没有效果,还是白色的背景,原来问题在这里,我们做的路由是css,所以在test1链接文件的时候,也应该链接css才对。

bed061b7ca97e23ca03a1611f0310d62.png
f1073c05bdcb92e10da47fa36d80438c.png
dffee909534a3b82a67d27d01fbac9a3.png

终于变成蓝色背景了,通过这些操作,大家慢慢理解nodejs中的静态文件路由的设置。


var http = require("http");// 这里是模块的引用,引用的是http模块var fs = require("fs");//这里引用文件模块var server = http.createServer(function (req,res) { // 这个函数是一个回调函数,req是请求,res是响应,服务器就是 // 为了响应客户端请求的。 if (req.url == "/fpage") { fs.readFile("./test1.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值