当前位置: 首页 > 面试题库 >

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

方昊
2023-03-14
问题内容

我从Node.js开始,我的第一个程序已经遇到了问题。下面是我正在使用的代码。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);
    });
}

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

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

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

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

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


问题答案:

浏览器发出请求 /client.js

服务器:

  1. 获取请求
  2. 运行 response
  3. index.html
  4. 发送到浏览器

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

为什么要index.html在要求时提供浏览器client.js

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

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



 类似资料:
  • 静态链接方法:静态链接的时候,载入代码就会把程序会用到的动态代码或动态代码的地址确定下来 静态库的链接可以使用静态链接,动态链接库也可以使用这种方法链接导入库 动态链接方法:使用这种方式的程序并不在一开始就完成动态链接,而是直到真正调用动态库代码时,载入程序才计算(被调用的那部分)动态代码的逻辑地址,然后等到某个时候,程序又需要调用另外某块动态代码时,载入程序又去计算这部分代码的逻辑地址,所以,这

  • 在编译Linux程序时,我们经常会看到动态链接和静态链接这两个术语。这两个术语中是我Linux的共享函数库(shared libraries)相关的。共享函数库就象Windows系统里的.dll文件,它里面包含有很多程序常用的函数。为了方便程序开发和减少程序的冗余,程序当中就不用包含每个常用函数的拷贝,只是在需要时调用系统中共享函数库中常函数功能即可。这种方式我们称之为动态链接(Dynamical

  • 问题内容: 考虑到Git无法识别指向存储库之外的符号链接,使用硬链接是否有任何问题? Git可以打破它们吗?您能给我指出详细的信息吗? 问题答案: 代表Git中目录的’tree’对象存储文件名和权限(子集)。它不存储索引节点号(或其他类型的文件ID)。因此, 硬链接 无法在git中表示 ,至少在没有第三方工具(例如metastore或git- cache-meta)的情况下 (而不是即使使用这些工

  • 问题内容: 我想使用以下c作为Go的cgo: 建立: 我为Go的cgo重新编写了该代码: 尝试编译为: 但是我收到链接器错误: /tmp/go- build076004816/opensource.stdk/lib/tools/_obj/x11.cgo2.o:在函数XScreenSaverAllocInfo中/tmp/go- build076004816/opensource.stdk/lib/t

  • 本文向大家介绍Linux 硬链接和软链接详细介绍,包括了Linux 硬链接和软链接详细介绍的使用技巧和注意事项,需要的朋友参考一下 Linux中的硬链接和软链接 软链接和硬链接 命令ln   ln是创建链接的命令:   创建硬链接:ln file link   创建软链接:ln -s file link 硬链接   硬链接(hard link)是Unix系统最早的创建链接的方式。   默认情况下每

  • 本文向大家介绍什么是Linux软链接和Linux硬链接,包括了什么是Linux软链接和Linux硬链接的使用技巧和注意事项,需要的朋友参考一下 Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为软链接(Symbolic Link)。默认情况下,ln命令产生硬链接。 一、[硬链接]-->指通过索引节点来进行连接。在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都