Question

我正在一个新的Web门户中工作。到目前为止，我使用express和node.js拥有服务器和一些ejs文件。

我网站的主体结构如下：

   - node modules
   - public
      --javascript
         ---myScript.js
   -views
      --pages
        ---index.ejs
        ---about.ejs
      --partials
        ---footer.ejs
        ---head.ejs
        ---header.ejs
    package.json
    server.js

server.js

var express = require('express');
var app = express();
app.set('view engine', 'ejs'); // set the view engine to ejs

app.get('/', function(req, res) {res.render('pages/index');}); // index page 
app.get('/about', function(req, res) {    res.render('pages/about');}); // about page 

app.listen(8080);
console.log('Portal is listening to port 8080 ');

和index.ejs

<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
    <% include ../partials/header %>
</header>
<main>
<div class="jumbotron">
    <h1>MyPortal</h1>
        <button>Press</button>
    <% var test = 101; %>
    </div>
</main>
    <footer>
        <% include ../partials/footer %>
    </footer>
</body>
</html>

在分词中，我想调用并使用外部.js文件/public/javascript/myScript.js，以便我可以在ejs页面中使用它的变量或发送变量。

我的js文件具有一个简单的功能（只是看它是否工作），如果按下了按钮（在index.ejs中），该功能会在控制台中显示。

myScript.js

$(function() {
  $("button").on("click", function () {
  console.log("button pressed");
   });
  });

我正在尝试在head.ejs（或index.ejs ）中调用外部js ...

<!-- views/partials/head.ejs -->
<meta charset="UTF-8">
<title>MyPortal</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body    { padding-top:50px; } </style>

<script type="text/javascript" src="/pubic/javascript/myScript.js"></script>

但我在控制台中遇到此错误

Loading failed for the <script> with source “http://localhost:8080/pubic/javascript/myScript.js”.

有人知道为什么会发生这种情况以及如何解决吗？

Answer 1

由于您尝试加载客户端 JavaScript，因此使用EJS的事实是无关紧要的。模板中只需要一个标准的HTML脚本元素即可。

但是，您确实需要提供一个URL（具有src属性），Web浏览器可以使用该URL来获取脚本……而您的脚本没有URL。

您正在收到消息源Address.create coordinate: ActiveRecord::Point.new(1, 1) 的加载失败，因为它是404错误。

您应该使用static module为JS文件提供一个URL。

“http://localhost:8080/pubic/javascript/myScript.js”.

Answer 2

将此添加到您的server.js文件， app.use（express.static（__ dirname +“ / public”）;

并将js文件与您的ejs文件链接

如何使用外部javascript文件转换为ejs文件

2 个答案: