Express 配置HTML頁(yè)面訪問的實(shí)現(xiàn)
1.配置模板引擎
Express默認(rèn)的模板引擎是pug（jade），想要渲染html頁(yè)面必須要導(dǎo)入對(duì)應(yīng)的模板引擎ejs
npm install ejs
安裝完成在app.js文件中完成模板引擎的引入
var ejs = require('ejs');
// 配置Express 視圖引擎
app.engine('html', ejs.__express);
app.set('view engine', 'html');
2.配置頁(yè)面路由
如果頁(yè)面不是放在public目錄下，那么就必須要通過配置路由來進(jìn)行訪問。
假設(shè)我的文件目錄如下
|-views(在根目錄下) |--mplat |---pages |----console.html |---index.html
在app.js中配置全局變量
// 配置 mplat 渲染頁(yè)面
app.set('mplat',path.join(__dirname,'views/mplat'))
這樣子在別處使用的mplat等同于path.join(__dirname,'views/mplat')
在routers目錄下新建mplat.js，把兩個(gè)html文件加入映射
var express = require('express');
var router = express.Router();
/* GET mplat page. */
router.get('/', function(req, res, next) {
res.render('mplat/index.html', { title: 'DisCloudDisk' });
});
router.get('/console',function (req,res,next) {
res.render('mplat/pages/console.html', { title: 'Console' });
})
module.exports = router;
在app.js中引入文件路由
app.use('/mplat',require('./routes/mplat'));
這樣子配置完成后，只需要訪問 http://$host/mplat即可返回index.html
3.修改靜態(tài)文件引入
在app.js中定義靜態(tài)文件目錄
app.use(express.static(path.join(__dirname, 'public')));
在頁(yè)面引入css和js文件只需要默認(rèn)在前面加上public即可，寫法如下
<script src="/lib/layui/layui.js"></script>
實(shí)際目錄為public/lib/layui/layui.js
4.頁(yè)面路由
html頁(yè)面的跳轉(zhuǎn)也有變化，需要在路由中注冊(cè)對(duì)應(yīng)的界面，比如我在index訪問console，路徑和在路由中注冊(cè)的保持一致。
<iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%"
height="100%"></iframe>
到此這篇關(guān)于Express 配置HTML頁(yè)面訪問的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Express HTML頁(yè)面訪問內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了關(guān)于commander.js使用及源碼分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了node.js中的path.join方法使用說明,本文介紹了path.join的方法說明、語法、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于Node.js爬蟲如何獲取天氣和每日問候的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Node.js爬蟲具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用node.js實(shí)現(xiàn)接口步驟詳細(xì)記錄
這篇文章主要給大家介紹了關(guān)于使用node.js實(shí)現(xiàn)接口步驟的相關(guān)資料,對(duì)于剛開始不會(huì)node寫接口和調(diào)用接口,可以通過這個(gè)清晰的初步了解到整個(gè)過程,下面需要的朋友可以參考下2023-03-03
這篇文章主要介紹了express 項(xiàng)目分層實(shí)踐詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
node.js連接mongoose數(shù)據(jù)庫(kù)方法詳解
之前我們都是通過shell來完成對(duì)數(shù)據(jù)庫(kù)的各種操作的，在開發(fā)中大部分時(shí)候我們都需要通過程序來完成對(duì)數(shù)據(jù)庫(kù)的操作。而Mongoose就是一個(gè)讓我們可以通過Node來操作MongoDB的模塊2022-08-08
Nodejs中的計(jì)時(shí)器(setTimeout?setIntervals?etImmediate)使用案例解析
這篇文章主要介紹了Nodejs中的計(jì)時(shí)器(setTimeout?setIntervals?etImmediate)使用案例解析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本片文章通過代碼示例給大家詳細(xì)講述了如何用nodejs寫出微信掃碼支付這個(gè)功能，有興趣的朋友可以參考下。2018-02-02
nodejs實(shí)現(xiàn)發(fā)出蜂鳴聲音(系統(tǒng)報(bào)警聲)的方法
這篇文章主要介紹了nodejs實(shí)現(xiàn)發(fā)出蜂鳴聲音(系統(tǒng)報(bào)警聲)的方法,結(jié)合實(shí)例形式分析了nodejs發(fā)出蜂鳴聲的原理及具體應(yīng)用方法,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了npm 常用命令詳解(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01