用node.js express設置路徑後 子路徑下的頁面訪問靜態資源路徑出問題

来源:http://www.cnblogs.com/gxp69/archive/2017/08/03/7281620.html
-Advertisement-
Play Games

在routes/news_mian.js 設置了訪問news_main.html 的路徑 '/',通知設置一個訪問news-page.html的子路徑'/newspage'子路徑。但是在訪問loaclhost:3000/news/newspage時靜態資源路徑前多了一個/news導致不能找到靜態資源 ...


在routes/news_mian.js 設置了訪問news_main.html 的路徑 '/',通知設置一個訪問news-page.html的子路徑'/newspage'子路徑。但是在訪問loaclhost:3000/news/newspage時靜態資源路徑前多了一個/news導致不能找到靜態資源

app.js

var express=require('express');
var app=express();
var path=require('path');
var http=require('http')
**var news_main=require('./routes/news_main');**//
var pullrefresh_sub=require('./routes/pullrefresh_sub');
var boiler_alarm=require('./routes/boiler_alarm')
//var news_page=require('./routes/news_page');
// app.get('/',function(req,res){
//         res.render('news_main');
//     });

// 定義模板
app.set('views',path.join(__dirname,'views'));
app.engine('html',require('ejs').renderFile);
app.set('view engine','html');

**app.use('/news',news_main);**
app.use('/pull',pullrefresh_sub);
app.use('/alarm',boiler_alarm);

//靜態文件目錄,
app.use(express.static(path.join(__dirname,'public')));

// var server=http.createServer()
var server=app.listen(3000,function(){
    var host=server.address().address;
    var port=server.address().port;
    console.log("Example boiler listing at http://%s:%s",host,port);

});

news_main.js

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

router.get('/',function(req,res,next){
    res.render('news_main',{
        title:"鍋爐新聞"
    });
});
**router.get('/newspage',function(req,res,next){
    res.render('news_page',{
        title:"新聞"
    });
});**
module.exports=router;

 

HTML------

<link rel="stylesheet" href="/css/boilerNews/newspage.css" />
<script src="/js/mui.min.js"></script>
<script src="/libs/vue/vue.js"></script>

直接訪問/news 沒有問題,當訪問/news/newspage時,訪問靜態資源的路徑就錯了

解決方法:

 news-page.html 中載入 css 和 js 的標簽使用了相對路徑, 而不是絕對路徑

<link rel="stylesheet" type="text/css" href="css/mui.min.css">

將相對路徑改為絕對路徑就可以了

<link rel="stylesheet" type="text/css" href="/css/mui.min.css">

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、隔了一段時間沒看D3了,好多api又陌生了。武林太大,唯有自強不息。 D3 選擇器算是學習D3的第一步吧。 跟 學習JQ一樣。先熟悉下api,才能夠如魚得水,手到勤來。 二、 選擇器 1.選擇器 2.內容(主要是更改DOM元素的屬性和類名的方法) 3.section.data() ...
  • 前端實現div框邊角的鈍化雖然簡單,但是有時候突然想不到,特此寫下幾句實現方法,以便記憶。 實現div框四個角都鈍角的操作:設置 div : border-radius=10px; 實現div框一個角的鈍角效果 :設置div :border-top-left-radius=10px; border- ...
  • 通過上一篇博文《Vue2+VueRouter2+webpack 構建項目實戰(一):準備工作》,我們已經新建好了一個基於vue+webpack的項目。本篇文章詳細介紹下項目的結構。 項目目錄以及文件結構 如圖所示: 如上圖所示,自動構建的vue項目的結構就是這樣。 src文件夾 如上圖所示,這是sr ...
  • JS遞歸函數(菲波那切數列) 實例解析: 一組數字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; ...
  • 環境準備 首先,要開始工作之前,還是需要把環境搭建好。需要的環境是nodejs+npm,當然現在安裝node都自帶了npm。 在終端下麵輸入命令node -v會有版本號出來。就說明安裝成功了。輸入npm -v也會有版本號出來,就說明,npm也已經安裝好了。 vue-cil構建項目 vue-cil是v ...
  • 01、安裝Node.js 和 npm 安裝完成後,在命令行依次使用node -v 和 npm -v可以看到版本號。 目前安裝的node.js版本為8.2.1 ,npm的版本為5.3.0 02、安裝cnpm npm需要連接谷歌伺服器,國內不能正常使用,因此使用淘寶的鏡像安裝cnpm。命令行輸入npm ...
  • 初入前端的新人在碰到vue.js後,去過官網,估計粗略的看下api文檔以後會以為vue的安裝只是把那串js代碼直接粘貼複製到文檔即可,雖然這樣是可以,但那在項目中並不合適。 項目中的vue引入(配製安裝環境): 1.安裝node.js,沒有的自己去搜官網下載即可 2.打開cmd命令,安裝淘寶鏡像,這 ...
  • 一、取消a標簽在移動端點擊時的藍色-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none; 二、使用圖片作為a ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...