/*
apache服务器（web容器）功能：由于html中所有的外部资源链接都会变成网络请求，
那么就有可能一个网页会有很多个请求，如果网络请求的路径与服务器真实的文件路径一致，
则apache服务器会自动根据url读取对应的内容响应返回。
问题：
1.nodejs没有类似于apach一样的web容器，我们需要自行处理每一个网络请求
2.当网页的请求过多时我们需要写很多的if``else,代码将会变得非常臃肿
解决方案：
1.将项目中的静态文件（图片，css样式）放入一个文件夹（resource）
2.html中的路径与该静态文件的真实路径一致，例如/resource/images/01.gif
3.使用if(req.url.indexOf('/resource') === 0)
判断该网络请求是否是请求静态资源（路径是否以/resource）开头
4.使用fs模块读取对应文件响应返回。 读取的文件路径是__dirname+req.url，
因为此时req.url是真实的文件夹路径，可以读取到对应的文件
5.这样做的好处就是只需要一个判断就可以处理网页中所有的静态资源请求 */
// 1.导入http模块
var http = require('http');
// 2.导入文件模块
var fs = require('fs');
// 3.导入路径模块
var path = require('path');
// 4.创建服务器
var server = http.createServer();
// 5.监听客户端的请求
server.on('request',function (req,res) {
// 如果后面什么都没传去lc.html
if (req.url === '/') {
fs.readFile(path.join(__dirname,'lc.html'),function (err,data) {
if (err) {
throw err;
}
res.end(data)
})
// 如果请求动态资源路径是/resource开头
} else if (req.url.indexOf('/resource') === 0 ) {
fs.readFile(path.join(__dirname,req.url),function (err,data) {
if (err) {
throw err;
}
//
res.end(data)
})
}
})
// n.启用服务器
server.listen(3000,function () { console.log('启用成功'); })
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入css文件。 路径错误 -->
<link rel="stylesheet" href="/resource/css/home.css">
<title>Document</title>
</head>
<body>
<h1>这是首页</h1>
<img src="/resource/images/01.gif" alt="">
<img src="/resource/images/01.jpg" alt="">
</body>
</html>
网友评论