無法讓JQuery使用Express js

我試圖突出顯示mouseover上的每個單詞。我使用node.js並表示js。這裏是一個小提琴爲例：https://jsfiddle.net/gsrgfd8e/無法讓JQuery使用Express js

var express = require('express'); 

    var app = express(); 
    app.use(express.static(__dirname + '/public')); 
    app.set('view engine', 'ejs'); 

    //home 
    app.get('/', function(req, res) { 
    res.render('home'); 
    }); 

    // not found 
    app.get('*', function(req, res){ 
    res.send('page not found'); 
    }); 

    app.listen(3000);

home.ejs

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script> 
     <script type='text/javascript'>//<![CDATA[ 
     window.onload=function(){ 
     $(".word_split").lettering('words'); 
     }//]]> 
     </script> 

    <style type="text/css"> 
     #text{ 
     width:60%; 
     margin: auto; 
     text-align:justify; 
     font-size:18pt; 
     } 
     .word_split span:hover { 
     background-color: #20B2AA; 
     color:white; 
    } 
    </style> 

    <title></title> 

    </head> 

    <body> 
    <div id="text"> 
     <p class="word_split">Peki nedir bu Bulletproof Coffee? Efendim adından da anlayabileceğimiz gibi cumhurbaşkanının bilmemkaçyüzbindolar değerindeki aracı gibi kurşungeçirmez özelliği olduğuna inanılan, Batman’ e, Hulk’ a, Flash’ e, Black Widow’ a, Jon Snow’a, Kenan Komutan’a, Şebnem Ferah’a ve hatta ne istiyorsanız ona dönüşebileceğinizi vaat ettiği rivayet edilen bir kahve çeşidi. Bugüne dek birçok farklı kahve denemiş, hepsinden ağzınıza size düşen payı almış olmanız muhtemel fakat bu tarife kulak verseniz pek de kötü etmiş olmazsınız gibi geliyor.</p> 
     <p class="word_split">Size ölümsüzlük iksirinin bulunduğu müjdesini vermek isterdik lakin ne böyle bir iksir bulundu ne de buna gerek var. Size verdiği tek şey bünyeden bünyeye farklılık gösteren enerji etkisidir. Enerji dediysek öyle hemen içer içmez Galya’lı Asterix gibi Romalılara saldırmaya kalkmayın. Çünkü etkisi uzun zamanlı kullanımda kendini gösterecek bir kahve çeşididir. Tabi Obelix gibi kazana düşmediyseniz.</p> 
     <p class="word_split">Vakit kaybetmeden Bulletproof Coffee tarifimize geçerek kendimizi kurşungeçirmez yapalım.</p> 

    </div> 

    </body> 

    </html>

頁我從本地主機獲取不突出的話像例子。經過一些測試後，Javascript似乎可以正常工作。也許這是jquery？

來源

2017-05-10 Mica Ménard

你的應用幾乎不依賴快遞。我沒有看到與此問題有關的理由。打開瀏覽器控制檯。（F12） –

@KevinB它的確如此。它是一個內容類型問題。 – WilomGfx

啊，我沒有考慮過第三方會有這個問題的可能性。 –

由腳本設置的內容類型頭你包括：

<script type="text/javascript" src="https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js"></script>

是有問題的，你會在控制檯發現：

MIME類型（文本/ html'）不是可執行文件，嚴格的MIME類型檢查已啓用。

解決方案：

使用快速靜態內容服務，並添加index.js以下

app.use(express.static(path.join(__dirname, 'public')));

現在創建一個文件夾公共/ CSS您的節點服務器的根目錄內複製文件https://sites.google.com/site/aryandhaniblogv2/jquery-lettering-0-6-1-min/jQuery.lettering-0.6.1.min.js的內容轉換成一個新文件lettering.js

然後用下面的代碼替換腳本標籤：

<script type="text/javascript" src="css/lettering.js"></script>

來源

2017-05-10 21:04:47

我想我應該添加創建'路徑'變量以及？它應該是什麼？否則，我會得到：ReferenceError：路徑未在對象處定義爲。（Module.js：409：26）（Object.Module._extensions..js（module.js：416：（module.js：443：32） at Function.Module._load（module.js：300：12） at Module.load（module.js：啓動（node.js：139：18）在node.js：990：3 –

您可以簡單地執行var path = require（'path'）。這是一個核心節點模塊，因此不需要執行npm install和stuff。它可以直接通過需求聲明使用 –

感謝您的幫助！ –

無法讓JQuery使用Express js

回答

相關問題