致力于Web开发项目，学习HTML，CSS，Javascript等，使用NPM和Express为我的服务器.js。我试图使用粒子.js作为我所有页面的背景，但是当我使页面成为.ejs页面时，它似乎不起作用。
服务器.js：
const express = require('express')
const app = express()
const bodyParser = require('body-parser');
const request = require('request');
const apiKey = 'xxxxxxxxxxxxxxx';
app.use(express.static('public'));
app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', function (req, res) {
res.render("index");
})
app.listen(8081, function () {
console.log('listening on port 8081!')
})
index.ejs：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>
<div id="the-container">
<header>
<nav>
<h1>Weather</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="weather.ejs">Weather</a></li>
<li><a href="indexx.html"> index html</a></li>
</ul>
</nav>
</header>
</div>
<script>
/*particlesJS.load('the-container','basic.json');*/
console.log("abc");
</script>
<script src="/node_modules/particles.js/particles.js"></script>
</body>
</html>
在检查页面上的来源后，我找到了这些信息：
加载资源失败：服务器响应状态为 404(未找到) (索引)：1 拒绝执行来自"http://localhost:8081/particles.js"的脚本，因为它的 MIME 类型("text/html")不可执行，并且启用了严格的 MIME 类型检查。 (索引)：27 未捕获的引用错误：未定义粒子 在(索引)：27
在 B. Sommers 提供对服务器和索引的更改之后：
C:UsersmyNameDevelopmenttesternode_modulesparticles.jsparticle
s.js:1429
window.requestAnimFrame = (function(){
^
ReferenceError: window is not defined
at Object.<anonymous> (C:UsersmyNameDevelopmenttesternode_mo
dulesparticles.jsparticles.js:1429:1)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:UsersmyNameDevelopmenttesterserver.
js:5:19)
at Module._compile (internal/modules/cjs/loader.js:702:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tester@1.0.0 start: `node server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tester@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
将服务器.js文件更改为：
const express = require('express')
const app = express()
const bodyParser = require('body-parser');
const request = require('request');
const particles = require('particles.js');
const apiKey = 'xxxxxx';
app.use(express.static('public'));
app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', function (req, res) {
res.render("index", {
particlesJS: particles
});
})
app.listen(8081, function () {
console.log('Example app listening on port 8081!')
})
和您的 EJS 文件 到
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>
<div id="the-container">
<header>
<nav>
<h1>Weather</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="weather.ejs">Weather</a></li>
<li><a href="indexx.html"> index html</a></li>
</ul>
</nav>
</header>
</div>
<script>
particlesJS = <%= particlesJS %>
particlesJS.load('the-container','basic.json');
console.log("abc");
</script>
</body>
</html>
.ejs文件可能在views文件夹中(但我不确定，因为文件结构不包括在您的问题中)。尝试将node_modules/particles.js/particles.js更改为/node_modules/particles.js/particles.js。如果这不起作用，请尝试更换
<script>
window.onload = function() {
Particles.init({
selector: '.the-container'
});
};
particlesJS.load('the-container','basic.json');
</script> .
与particlesJS.load('the-container','basic.json');