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

逻辑描述:
index.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();

这样运行后会报错:

这里写图片描述

查看后发现:
response.write()方法将指定的字符创输出到html页面时遇到的问题_第1张图片

外联的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为主要代码。

你可能感兴趣的:(nodejs)