一.发送静态资源
1.当请求的页面内包含js/css/image等外部资源需要进行获取时，如果服务器没有发送，浏览器就会一直加载，最直接地观察就是打开页面时选项卡中有个圆环在一直转.
//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="../public/main.css">
</head>
<body>
<h1>获取静态资源</h1>
</body>
</html>
//http-server.js
var http = require('http')
var fs = require('fs')
var server = http.createServer()
server.listen(3000, function (error) {
if (error) {
console.log('服务器监听失败...')
} else {
console.log('服务器监听成功,可通过http://127.0.0.1:3000/进行访问...')
}
})
server.on('request', function (req, res) {
var url = req.url
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('404 Not Found...')
} else {
res.end(data)
}
})
}
// else if (url.indexOf('/public/') == 0) {
// fs.readFile('.' + url, function (error, data) {
// if (error) {
// return res.end('获取main.css失败...')
// } else {
// res.end(data)
// }
// })
// }
})
2.如果我们想发送这些静态资源给请求方的话，就需要添加上面展示中被注释的代码.
server.on('request', function (req, res) {
var url = req.url
//回应第一次请求发送index.html的数据
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('404 Not Found...')
} else {
res.end(data)
}
})
}
//请求方解析index.html时发现需要main.css资源则又一次发送请求,请求的url对应link的路径
else if (url.indexOf('/public/') == 0) {
fs.readFile('.' + url, function (error, data) {
if (error) {
return res.end('获取main.css失败...')
} else {
res.end(data)
}
})
}
})
!其他资源的获取方式也一样
二.404重定向和URL简化
1.当我们在指定的域名末尾添加乱七八糟的字符串的时候，如果服务器无法找到对应的网站，一般都会重定向到404页面
2.实现代码其实只需要在页面判断语句下添加else结尾重定向
3.简化URL，去除后缀（看下面的gif对比）
server.on('request', function (req, res) {
var url = req.url
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('获取index页面失败...')
} else {
res.end(data)
}
})
}
else if (url == '/views/next') {
fs.readFile('.' + url+'.html', function (error, data) {
if (error) {
return res.end('获取next.html失败...')
} else {
res.end(data)
}
})
} else {
fs.readFile('./views/404.html', function (error, data) {
if (error) {
return res.end('获取404页面失败...')
} else {
res.end(data)
}
})
}
})
URL简化对比：
三.留言板练习(无涉及数据库)
1.展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<link rel="stylesheet" href="../public/css/main.css">
<link rel="stylesheet" href="../public/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>留言板 <small>写你所想</small></h1>
<a class="btn btn-success" href="./public/views/post.html">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
{{each comments}}
<li class="list-group-item">
{{$value.name}}说: {{$value.message}}
<span style="float: right;">{{$value.date}}</span>
</li>
{{/each}}
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发表留言</title>
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>留言板 <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
<form action="comments" method="get">
<div class="form-group">
<label for="InputName">你的大名:</label>
<input type="text" class="form-control" id="InputName" placeholder="Input Your Name" required
name="name">
</div>
<div class="form-group">
<label for="IputMeassge">留言内容</label>
<textarea id="InputMessage" cols="30" rows="10" class="form-control" required name="message"></textarea>
</div>
<button type="submit" class="btn btn-success">发表</button>
</form>
</div>
</body>
</html>
2.可发表评论并展示
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var parse = require('url')
var server = http.createServer()
var comments = [
{
name: "法外狂徒",
message: "我为非作歹",
date: "2020-3-18"
}, {
name: "张三",
message: "俺也一样",
date: "2020-3-18"
},
]
server.listen(3000, function (error) {
if (error) {
console.log('服务器监听失败...')
} else {
console.log('服务器监听成功,可通过http://127.0.0.1:3000/进行访问...')
}
})
server.on('request', function (req, res) {
var parseObj = parse.parse(req.url, true)
var pathname = parseObj.pathname
if (pathname == '/') {
fs.readFile('./public/views/index.html', function (error, data) {
if (error) {
return res.end('获取index页面失败...')
} else {
var htmlStr = template.render(data.toString(), {
comments: comments
})
res.end(htmlStr)
}
})
console.log(pathname)
} else if (pathname == '/public/views/comments') {
var comment = parseObj.query
comment.date = "2020-3-17"
comments.unshift(comment)
res.statusCode = 302
res.setHeader('Location', '/')
res.end()
} else if (pathname.indexOf('/public/') == 0) {
fs.readFile('.' + pathname, function (error, data) {
if (error) {
return res.end('获取失败...')
} else {
res.end(data)
}
})
console.log(pathname)
} else {
fs.readFile('./views/404.html', function (error, data) {
if (error) {
return res.end('Nothing')
} else {
res.end(data)
}
})
}
})
