$ Не определено на (Узел + Экспресс + Мопс + JQuery)

Конечно, вопрос новичка, но я был бы признателен за любую помощь, так как я полностью застрял (т.е. я пробовал все, что мог найти, без успеха). Когда я пытаюсь использовать JQuery, я получаю «ReferenceError: $ не определено». Моя структура проекта:

bin/www public javascripts stylesheets routes index.js views layout.pug ... app.js

layout.pug, где я пытаюсь загрузить jquery CDN:

    doctype html
html(lang='en')
  head
    meta(charset='utf-8')
    title= title
    //- bootstrap CSS
    link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
    integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous')
    link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')

    //- my Styling CSS
    link(rel='stylesheet', href='/stylesheets/style.css')

  body

    block content
    script(src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
    script(src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous")
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'
          integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous')

    script(src='/javascripts/jquery-3.3.1.js')
    script(src='routes/index.js')

Мой файл index.js следующий:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

$(function () {
  alert('JavaScript Loaded!');
});

module.exports = router;

Наконец, в моем файле app.js есть несколько важных строк:

const indexRouter = require('./routes/index');
const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// Set Static Paths
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

Кто-нибудь может мне помочь?

пробовали ли вы удалить сценарий косой черты (src = '/ javascripts / jquery-3.3.1.js') перед javascripts

Satya 15.09.2018 12:43

Да, есть, но проблема не в этом. Поскольку я использую app.use(express.static(path.join(__dirname, 'public'))); без косой черты после публичного, мне нужно включить его до javascripts. Более того, я хотел, чтобы jquery загружался через CDN, эта строка почти избыточна, просто чтобы убедиться, что jQuery загружается.

MrT77 15.09.2018 12:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
734
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, вы не знаете, что server-side-rendering vs client-side-rendering.

Expressjs - это server-side-rendering. поэтому вы не вызываете jQuery в index.js

Если вы вызываете jQuery, вы делаете это. var $ = require('jQuery');

ссылка: https://www.npmjs.com/package/jQuery#nodejs

Ты прав, я новичок. Но в этом случае index.js (где я использую $) является клиентским, а не app.js, который является серверным.

MrT77 15.09.2018 13:30

Я думал, что index.js (где я использую $) был клиентским, но я все испортил. Я думаю, ты это решил. Спасибо

MrT77 15.09.2018 13:36

это трудная вещь. Рекомендую прочитать эту страницу. просто ваш сервер выполняет nodejs, а браузер клиента выполняет html-страницу. openclassrooms.com/en/courses/…

seunggabi 15.09.2018 13:55

Другие вопросы по теме