Express 配置HTML頁面訪問的實(shí)現(xiàn)
1.配置模板引擎
Express默認(rèn)的模板引擎是pug(jade),想要渲染html頁面必須要導(dǎo)入對應(yīng)的模板引擎ejs
npm install ejs
安裝完成在app.js文件中完成模板引擎的引入
var ejs = require('ejs'); // 配置Express 視圖引擎 app.engine('html', ejs.__express); app.set('view engine', 'html');
2.配置頁面路由
如果頁面不是放在public目錄下,那么就必須要通過配置路由來進(jìn)行訪問。
假設(shè)我的文件目錄如下
|-views(在根目錄下) |--mplat |---pages |----console.html |---index.html
在app.js中配置全局變量
// 配置 mplat 渲染頁面 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')));
在頁面引入css和js文件只需要默認(rèn)在前面加上public即可,寫法如下
<script src="/lib/layui/layui.js"></script>
實(shí)際目錄為public/lib/layui/layui.js
4.頁面路由
html頁面的跳轉(zhuǎn)也有變化,需要在路由中注冊對應(yīng)的界面,比如我在index訪問console,路徑和在路由中注冊的保持一致。
<iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
到此這篇關(guān)于Express 配置HTML頁面訪問的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Express HTML頁面訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于Node.js中Buffer的一些你可能不知道的用法
網(wǎng)上關(guān)于Node.js中Buffer用法的文章有很多,但是感覺還是不夠詳細(xì),所以這篇文章主要介紹了關(guān)于Node.js中Buffer的一些你可能不知道的用法,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03nodejs實(shí)現(xiàn)發(fā)送郵箱驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了nodejs實(shí)現(xiàn)發(fā)送郵箱驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04node.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基于Express和Multer實(shí)現(xiàn)文件本地服務(wù)器文件上傳功能
在現(xiàn)代應(yīng)用程序中,文件上傳功能成為了用戶共享和存儲(chǔ)數(shù)據(jù)的重要途徑,所以本文我們一起來探討文件上傳中間件的重要性,并提供常見的實(shí)現(xiàn)方法和相應(yīng)的代碼吧2023-06-06使用nodejs、Python寫的一個(gè)簡易HTTP靜態(tài)文件服務(wù)器
這篇文章主要介紹了使用nodejs、Python寫的一個(gè)簡易HTTP靜態(tài)文件服務(wù)器,分為nodejs和Python兩個(gè)版本,用類似淘寶的CSS、JS文件加載方式處理靜態(tài)文件加載,需要的朋友可以參考下2014-07-07