response.write()方法将指定的字符创输出到html页面时遇到的问题

来源：互联网发布：vb取整函数函数编辑：程序博客网时间：2024/06/05 23:48

逻辑描述：
index.html:

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>首页</title>    <link rel="stylesheet" href="../public/css/typo.css">    <style>        body{            background-color: #3a4563;        }        #login{            margin:230px auto auto;            /*background: #ffd5d5;*/            width: 250px;            height:250px;            /*border:1px solid green;*/            /*-webkit-border-radius: 4px;*/            /*-moz-border-radius: 4px;*/            /*border-radius: 4px;*/            text-align: center;        }        #username,#password{            padding-left:8px;            width:94%;            margin-top:20px;            height:30px;            -webkit-border-radius: 4px;            -moz-border-radius: 4px;            border-radius: 4px;        }        #button{            margin-top: 20px;            webkit-display:flex;            display: flex;            justify-content:space-around;        }        #button span {            cursor:pointer;            padding:0 44px;            display: inline-block;            color: #ffffff;            font-size: 16px;            line-height: 30px;            -webkit-border-radius: 4px;            -moz-border-radius: 4px;            border-radius: 4px;            text-decoration: none;            background-color: #667cdf;        }    </style><body>    <div id="login">        <form action="">            <input id="username" type="text" name="username" placeholder='请输入用户名'>            <br>            <input id="password" type="password" name="password">            <br>            <div id="button">                <span class="login">登录</span >                <span class="reg">注册</span >            </div>        </form>    </div></body></html><script src="../public/js/jquery.js"></script><script src="../public/js/index.js"></script>

通过fs.readSynce()方法取到的index.html页面的内容赋值给变量body，
然后：

response.writeHead(200,{'Content-Type':'text/html'});//注意这里的html，如果为plain则不会显示html，会输出.html文件中的字符串response.write(body);response.end();

这样运行后会报错：

这里写图片描述

查看后发现：
这里写图片描述

外联的js和css文件都没有成功返回相应的数据。

原因：

这是因为这段代码中规定的’Content-Type’都是’text/html’类型。而css和js也必须得按照相应的Content-Type类型加载才能成功。

另附不同文件对应的不同类型：

    "html" : "text/html",      "css"  : "text/css",      "js"   : "text/javascript",      "json" : "application/json",      "ico"  : "image/x-icon",      "gif"  : "image/gif",      "jpeg" : "image/jpeg",      "jpg"  : "image/jpeg",      "png"  : "image/png",      "pdf"  : "application/pdf",      "svg"  : "image/svg+xml",      "swf"  : "application/x-shockwave-flash",      "tiff" : "image/tiff",      "txt"  : "text/plain",      "wav"  : "audio/x-wav",      "wma"  : "audio/x-ms-wma",      "wmv"  : "video/x-ms-wmv",      "xml"  : "text/xml"

如何做：

既然知道了原因我们应该如何做呢？我们需要搭建一个静态文件处理器，实现加载不同文件按不同的类型来加载。可以参开我的github。切换到lesson2分支。static-server文件夹下的static-load-server.js和static-server.js为主要代码。

0 0