Express 配置HTML頁面訪問

Kindear發表於2020-10-31
ExpressHTML

Express 配置HTML頁面訪問

1.配置模板引擎

Express預設的模板引擎是pug（jade），想要渲染html頁面必須要匯入對應的模板引擎ejs

npm install ejs

安裝完成在app.js檔案中完成模板引擎的引入

var ejs = require('ejs');
// 配置Express 檢視引擎

app.engine('html', ejs.__express);
app.set('view engine', 'html');

2.配置頁面路由

如果頁面不是放在public目錄下，那麼就必須要通過配置路由來進行訪問。

假設我的檔案目錄如下

|-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，把兩個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.修改靜態檔案引入

在app.js中定義靜態檔案目錄

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

在頁面引入css和js檔案只需要預設在前面加上public即可，寫法如下

<script src="/lib/layui/layui.js"></script>

實際目錄為public/lib/layui/layui.js

4.頁面路由

html頁面的跳轉也有變化，需要在路由中註冊對應的介面，比如我在index訪問console，路徑和在路由中註冊的保持一致。

	<iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%"
                       height="100%"></iframe>

相關文章