Express 配置HTML頁(yè)面訪(fǎng)問(wèn)的實(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目錄下，那么就必須要通過(guò)配置路由來(lái)進(jìn)行訪(fǎng)問(wè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'));
這樣子配置完成后，只需要訪(fǎng)問(wèn) 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即可，寫(xiě)法如下
<script src="/lib/layui/layui.js"></script>
實(shí)際目錄為public/lib/layui/layui.js
4.頁(yè)面路由
html頁(yè)面的跳轉(zhuǎn)也有變化，需要在路由中注冊(cè)對(duì)應(yīng)的界面，比如我在index訪(fǎng)問(wèn)console，路徑和在路由中注冊(cè)的保持一致。
<iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%"
height="100%"></iframe>
到此這篇關(guān)于Express 配置HTML頁(yè)面訪(fǎng)問(wèn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Express HTML頁(yè)面訪(fǎng)問(wèn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于Node.js中Buffer的一些你可能不知道的用法
網(wǎng)上關(guān)于Node.js中Buffer用法的文章有很多，但是感覺(jué)還是不夠詳細(xì)，所以這篇文章主要介紹了關(guān)于Node.js中Buffer的一些你可能不知道的用法，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03
推薦一個(gè)基于Node.js的表單驗(yàn)證庫(kù)
這篇文章主要介紹了推薦一個(gè)基于Node.js的表單驗(yàn)證庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
有時(shí)候需要運(yùn)行不同的項(xiàng)目,node版本不一致會(huì)導(dǎo)致不少問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于多版本node的安裝和切換詳細(xì)操作步驟的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
nodejs實(shí)現(xiàn)發(fā)送郵箱驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了nodejs實(shí)現(xiàn)發(fā)送郵箱驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了Node.contain?函數(shù)兼容處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了Windows下安裝 node 的版本控制工具 nvm的相關(guān)資料,需要的朋友可以參考下2020-02-02
node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)
這篇文章主要介紹了node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)，講解的十分詳細(xì)，也給出了很多的實(shí)例，是篇非常不錯(cuò)的文章，這里推薦給大家。2014-11-11
這篇文章主要介紹了node中使用shell腳本的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
基于Express和Multer實(shí)現(xiàn)文件本地服務(wù)器文件上傳功能
在現(xiàn)代應(yīng)用程序中，文件上傳功能成為了用戶(hù)共享和存儲(chǔ)數(shù)據(jù)的重要途徑，所以本文我們一起來(lái)探討文件上傳中間件的重要性，并提供常見(jiàn)的實(shí)現(xiàn)方法和相應(yīng)的代碼吧2023-06-06
使用nodejs、Python寫(xiě)的一個(gè)簡(jiǎn)易HTTP靜態(tài)文件服務(wù)器
這篇文章主要介紹了使用nodejs、Python寫(xiě)的一個(gè)簡(jiǎn)易HTTP靜態(tài)文件服務(wù)器,分為nodejs和Python兩個(gè)版本,用類(lèi)似淘寶的CSS、JS文件加載方式處理靜態(tài)文件加載,需要的朋友可以參考下2014-07-07