利用node载入静态页面

今天又重新看了一遍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("点击了");
    }
}


<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>Documenttitle>
    <link rel="stylesheet" href="./common.css">
    <script src="./common.js">script>

head>
<body>
    <h1 class="btn">首页面h1>
    <div class="content">
       <div class="top"> topdiv>
       <div class="left">leftdiv>
       <div class="center">centerdiv>
       <div class="right">rightdiv>
       <div class="footer">footerdiv>
    div>
body>
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>Documenttitle>
    <link rel="stylesheet" href="./common.css">
    <script src="./common.js">script>
head>
<body>
    <h1 id="btn">列表h1>
    <div class="content">
       <div class="top"> topdiv>
       <div class="left">leftdiv>
       <div class="center">centerdiv>
       <div class="right">rightdiv>
       <div class="footer">footerdiv>
    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);


你可能感兴趣的:(利用node载入静态页面)