Express 配置HTML頁面訪問

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>