Как использовать внешний файл javascript в файл ejs - PullRequest
Новая
       14

Как использовать внешний файл javascript в файл ejs

0 голосов
/ 24 марта 2019

Я работаю на новом веб-портале. До сих пор с помощью 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");
   });
  });

Я пытаюсь вызвать внешний js в head.ejs ( или в index.ejs ) ... 

<!-- 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”.

Есть идеи, почему это происходит и как это решить?

1 Ответ

0 голосов
/ 24 марта 2019

Поскольку вы пытаетесь загрузить на стороне клиента JavaScript, тот факт, что вы используете EJS, не имеет значения. Стандартный шаблон HTML-скрипта - это все, что вам нужно в шаблоне, и у вас это есть.

Однако вам необходимо указать URL-адрес (с атрибутом src), который веб-браузер может использовать для извлечения сценария… и ваш сценарий не имеет URL-адреса.

Вы получаете сообщение Ошибка загрузки для источника с “http://localhost:8080/pubic/javascript/myScript.js”., поскольку это ошибка 404.

Вы должны использовать статический модуль , чтобы предоставить файлу JS URL-адрес. 

app.use("/public", express.static('public'))
...