今天又重新看了一遍node基础，然后写了一个载入静态页面的小案例，话不多说，看代码：
1，准备好静态页面
/*css内容*/
/*common.css*/
*{
padding: 0;
margin: 0;
}
h1{
text-align: center;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
}
.top{
width: 500px;
height: 100px;
background: red;
}
.left{
width: 100px;
height: 300px;
background: gold;
float: left;
}
.center{
width: 300px;
height: 300px;
background: pink;
float: left;
}
.right{
width: 100px;
height: 300px;
background: rgb(255, 0, 170);
float: left;
}
.footer{
clear: both;
width: 500px;
height: 100px;
background: rgb(119, 0, 255);
}
//common.js
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick =function(){
alert("点击了");
}
}
<!--index.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">
<title>Document</title>
<link rel="stylesheet" href="./common.css">
<script src="./common.js"></script>
</head>
<body>
<h1 class="btn">首页面</h1>
<div class="content">
<div class="top"> top</div>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="footer">footer</div>
</div>
</body>
</html>
<!--list.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">
<title>Document</title>
<link rel="stylesheet" href="./common.css">
<script src="./common.js"></script>
</head>
<body>
<h1 id="btn">列表</h1>
<div class="content">
<div class="top"> top</div>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="footer">footer</div>
</div>
</body>
</html>
载入静态页面js
//思路：1.获取路由，根据路由中的pathname判断路由，
//2.若是css和js是外部链接，需要获取文件路径，判断文件路径是否存在，若存在则读取文件路由
var http = require("http");
var fs = require("fs");
var path = require("path");
var url = require("url");
var server = http.createServer(function (req, res) {
var realurl = "http://" + req.headers.host + req.url; //获取完整的路由
var Objurl = url.parse(realurl); //将路由转化成对象
switch (Objurl.pathname) {
case "/index":
fs.readFile("./index.html", "utf8", function (err, data) {
//如果载入的静态页面中的css和js是使用外部链接的，则相当于请求了两次服务器
if (err) throw err;
res.end(data);
})
break;
case "/list":
fs.readFile("./list.html", "utf8", function (err, data) {
if (err) throw err;
res.end(data);
})
break;
default:
var filename = path.join(__dirname, Objurl.pathname) //获取文件完整路由
if (fs.existsSync(filename)) {
fs.readFile(filename, function (err, data) {
if (err) throw err;
res.end(data);
})
} else {
res.end();
}
break;
}
});
server.listen(3000);
