Javascript Particle.js+;节点+;Express-Can';无法获取要加载的资源
伙计们。这又是一个愚蠢的问题 当我学习使用node和express时,我正在考虑将其用作背景。在github上提供的文档中,它说要使用:Javascript Particle.js+;节点+;Express-Can';无法获取要加载的资源,javascript,node.js,express,pug,particles.js,Javascript,Node.js,Express,Pug,Particles.js,伙计们。这又是一个愚蠢的问题 当我学习使用node和express时,我正在考虑将其用作背景。在github上提供的文档中,它说要使用: npm install particles.js 完成此操作后,我添加了以下内容以在我的app.js中调用它: 但此时,当我尝试运行我的应用程序时,节点错误状态为: 引用错误:未定义窗口 还有另一个代码块,应该调用它来创建这个代码块,它应该使用jade文件在前端运行 /* particlesJS.load(@dom-id, @path-json, @call
npm install particles.js
完成此操作后,我添加了以下内容以在我的app.js中调用它:
但此时,当我尝试运行我的应用程序时,节点错误状态为:
引用错误:未定义窗口
还有另一个代码块,应该调用它来创建这个代码块,它应该使用jade文件在前端运行
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
有几件事我不太确定。
首先,从我的乐趣节点来看,npm安装模块应该可以在app.js中调用。所以我觉得奇怪,它不起作用。。这是因为所讨论的代码不是基于使用像express这样的框架吗
其次,如果是这种情况,并且我已经通过npm安装了particles.js模块,为了让jade获取它,我必须将js复制到“javascript”公共目录,这样它才能找到它
如果是这样的话,我不需要首先通过npm安装它
这么多问题。。。很抱歉我仍在学习,并在这方面做了一些尝试。也许我的逻辑是错的
有人能帮忙吗?因此,当您npm安装前端库时,您需要使用另一个库将其加载到视图中,这是正确的。我猜他们假设您正在使用这样一个框架,或者将其放入前端框架的app.js(react等)中。我只需下载库并将其放入您的静态文件夹中,然后以这种方式运行。我更改了脚本并引用了我在外部创建的文件夹的particles.js和particles.json存档 HTML
菜单
身体{
背景颜色:浅灰色;
}
*{
填充:0px;
边际:0px;
字体系列:世纪哥特式、世纪哥特式、AppleGothic、无衬线;
}
伊尼西亚朱伊戈酒店
版本排名
指令
萨利尔
加载('particles-js','../particles.json',函数(){
log('particles.json loaded…');
});
使用捆绑工具,如Webpack。不能在节点的上下文中运行前端库。您基本上使用NPM来管理项目所依赖的库。要使用它们,您需要将所有内容捆绑在一个.js
文件中,并加载到视图中。我认为您可能会混淆使用npm或Thread安装的express之类的后台库和必须添加到express公共目录中的前台库。您可以使用npm下载您的库并向库中添加路由,但它不是很干净:)。看看这个话题:我是这样做的,它按预期工作。虽然我不确定这是否是正确的方法,但我还是决定这样做。在以后的日子里,我会看到反应,并可以考虑一些其他的选择,人们提到。非常感谢您的帮助:)
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body{
background-color: lightgrey;
}
*{
padding : 0px;
margin : 0px;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
</style>
<!--<div id="particles-js"></div>-->
<div id="particles-js" style="position : absolute; width:100%; height:100%; z-index:-1; background-color: #000000"></div>
<div class="container">
<img src="../logo.jpg" width="600" class="img-fluid wall" style="display: block; margin: 0 auto">
</div>
<div class="container">
<Form action = "/game" method = "POST">
<button id="Iniciar_juego" type="submit" class="btn btn-primary btn-lg">Iniciar juego</button>
<Input name="textbox" id="usuario" class="form-control" aria-label="Nombre de usuario:" aria-describedby="inputGroup-sizing-default" type="text" value="${salida}"style="display: none">
</Form>
<Form action = "/tabla" method = "GET">
<button id="Ranking" type="submit" class="btn btn-primary btn-lg">Ver Ranking</button>
</Form>
<Form action = "/inst" method = "GET">
<button id="Instrucciones" type="submit" class="btn btn-primary btn-lg">Instrucciones</button>
</Form>
<Form action = "/" method = "GET">
<button id="Salir" type="submit" class="btn btn-primary btn-lg">Salir</button>
</Form>
</div>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js','../particles.json',function(){
console.log('particles.json loaded...');
});
</script>
</body>
</html>