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

#javascript #node.js #express #ejs

#javascript #node.js #экспресс #ejs

Вопрос:

Я работаю на новом веб-портале. До сих пор используя экспресс и 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. public была введена ошибка pubic

2. да, я просто показываю это … я меняю его на «общедоступный», но проблема остается

3. Не могли бы вы открыть URL скрипта в своем браузере и посмотреть, показывает ли он что-нибудь?

4. type="text/javascript" не должен использоваться в HTML 5. У этого нет другой цели, кроме как позволить вам сделать опечатку и сломать ваш скрипт.

5. нико, попробуй добавить это app.use(express.static(path.join(__dirname, 'public'))); после настройки механизма просмотра. Вам также необходимо запросить модуль path var path = require('path');

Ответ №1:

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

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

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

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

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

1. я понимаю, о чем вы говорите. Но даже используя «app.use(«/public», express.static(‘public’))» в моем server.js файл я все еще вижу ошибку о том, что скрипт не может быть загружен

2. @Nikos Kalantas похоже, что вы используете jQuery. Если это так, привяжите jquery cdn в свой html (предпочтительно в конце тела) и тег вашего скрипта после тега jquery link (важно)

Ответ №2:

Добавьте это в свой server.js файл, app.use(express.static(__dirname «/public»);

И связать файл js с вашим файлом ejs,