Question

我是前端开发的新手。我想构建一个利用服务器端和客户端渲染的基本应用程序。我正在使用nodejs进行服务器端渲染。我不确定为什么我无法渲染html和javascript文件（与HTML外部链接）

index.html：

 <!DOCTYPE html>
 <html>
 <head>
 <title>Display Time and Date </title>
 </head>
<body>
<h1>Welcome</h1>
<p id="dat"></p>
<p id="time"></p>
<script type="text/javascript" src="DisplayDate.js"></script>
</body>
</html>

DisplayDate.js：

var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var hours = date.getHours();
var min = date.getMinutes();
if (min < 10) min = '0' + min;
document.getElementById("dat").innerHTML = "Today\'s Date: " + day +"/" + month + "/" + year ;
document.getElementById("time").innerHTML = "Time: " + hours + ":" + min; }

index.js：->（服务器端呈现此文件）

var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('./index.html', null, function(err, data) { 
if(err) {
res.write('ERROR')
}
else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
}

res.end();
});
}).listen(process.env.PORT || 8080);
console.log('server-side rendering working fine');

Answer 1

它不起作用，因为您发送的是纯文本，它是静态数据。你只有两种方法 1.使用Express JS具有res.sendFile()方法，它将注意文件的链接 2.将您的JS代码放在html页面中

您还有另一种方法，但不推荐使用

<!DOCTYPE html>
<html>
    <head>
        <title>Display Time and Date </title>
    </head>
    <body>
        <h1>Welcome</h1>
        <p id="dat"></p>
        <p id="time"></p>
        <script>
            function loadFile(filename){
                var script=document.createElement('script')
                script.setAttribute("type","text/javascript")
                $.get(filename, (data)=>{
                   script.innerText = data
                   document.getElementsByTagName("head")[0].appendChild(script)
               }) //use AJAX to get your JS code and place it inside new script element you can use XMLHttpRequest i am using JQUERY here

            }       
            loadFile("DisplayDate.js")
        </script>
    </body>
</html>

使用nodejs使用服务器和客户端渲染

1 个答案: