Question

正在从事一个Web开发项目，以学习HTML，CSS，Javascript等。对我的server.js使用NPM和Express。我试图在我所有页面的背景上使用Particles.js，但是当我将该页面设为.ejs页面时，它似乎不起作用。

server.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未捕获的ReferenceError：未定义particlesJS 在（index）：27

在B. Sommers提供了对服务器和索引的更改之后：

C:\Users\myName\Development\tester\node_modules\particles.js\particle
s.js:1429
window.requestAnimFrame = (function(){
^

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\myName\Development\tester\node_mo
dules\particles.js\particles.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:\Users\myName\Development\tester\server.
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.

Answer 1

.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');

Answer 2

将您的server.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>

当在.html文件中时，Particles.js起作用，但在.ejs文件中时，微粒不起作用

2 个答案: