链接index.html client.js和server.js

问题描述：

我从Node.js开始，我的第一个程序已经遇到了问题.下面是我正在使用的代码. Index.html:

I'm starting with Node.js and I have already a problem in my first program. Below is the code I'm using. Index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Random Temperatures</title>
  </head>
  <body>
    <input type="text" id="tb" name="tb" />
    <input type="button" value="Random Number!" id="myButton" name="myButton"/>
    <script src="client.js"></script>
</body>
</html>

Client.js:

const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
    var rnd = Math.floor(Math.random() * 100);
    textBox.value = rnd;
});

Server.js:

var app = require('http').createServer(response);
var fs = require('fs');
app.listen(8080);
console.log("App running…");
function response(req, res) {
    fs.readFile(__dirname + '/public/index.html',
    function (err, data) {
        if (err) {
            res.writeHead(500);
            return res.end('Failed to load file index.html');
        }
        res.writeHead(200);
        res.end(data);
    });
}

启动应用程序时，我进入浏览器，出现文本框和按钮.但是在浏览器控制台中，我得到了以下错误:

When I start the application I go to the browser the text box and the button appear. But in the browser console I'm getting these errors:

client.js:1未捕获的SyntaxError:意外令牌<

client.js:1 Uncaught SyntaxError: Unexpected token <

ContentScript.js:112 onResRdy中的异常:TypeError:无法读取未定义的属性"htmlRes"

ContentScript.js:112 Exception in onResRdy: TypeError: Cannot read property 'htmlRes' of undefined

localhost/:1未经检查的runtime.lastError:无法建立联系.接收端不存在.

localhost/:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

我猜我的问题是3个文件之间的链接，但是我尝试了几件事，但无法解决问题.我确定这是一个愚蠢的错误，但是请原谅我才刚刚起步.有什么建议吗?

I guess my problem is the linking between the 3 files but I tried several things and I can't solve the problem. I'm sure it's a stupid error but forgive me I'm just getting start. Any advice?

答

浏览器请求/client.js

服务器:

获取请求
运行response
读取index.html
将其发送到浏览器

Gets the request
Runs response
Reads index.html
Sends it to the browser

由于index.html以<开头，因此浏览器尝试将其作为JavaScript运行时会引发错误.

Since index.html starts with <, the browser throws an error when it tries to run it as JavaScript.

为什么在浏览器要求输入client.js时给浏览器index.html?

Why are you giving the browser index.html when it asks for client.js?

您需要检查请求对象，确定请求的URL，编写逻辑以使用正确的状态代码和正确的内容类型返回正确的资源，然后将其返回给客户.

You need to examine the request object, determine what URL is being asked for, write logic to return the correct resource with the correct status code and the correct content-type, and then return that to the client.

您可能应该停止尝试直接使用createServer了-因为它涉及大量的车轮重新发明-切换为使用 Express ，并仔细阅读(非常简短)的入门指南，其中包括使用static模块提供静态文件的部分.

You should probably stop trying to use createServer directly — since it involves a massive amount of wheel reinvention — switch to using Express and work through the (very short) getting started guide which includes a section on using the static module to serve up static files.

链接index.html client.js和server.js

相关推荐