nodejs---express中模板引擎consolidate及路由route简单使用总结

版权声明:本文为博主原创文章,喜欢的话,可以通知我后进行转载哦! https://blog.csdn.net/maidu_xbd/article/details/86743156

consolidate是express中的一个模板引擎的结合体。包括了常用的jade和ejs。

配置模板引擎及使用方法如下:

1.模板引入----const consolidate = require('consolidate');

2.设置模板输出形式为:html页面---server.set('view engine', 'html');

3.设置模板文件位置----server.set('views', '模板文件目录');

4.选择ejs模板引擎----server.engine('html', consolidate.ejs);

5.渲染模板文件---

server.get('/', function (req, res){

    res.render('模板文件', 数据);

});

route路由设置路径,把不同的路径(目录),对应到不同的模块。web服务器会根据用户输入的不同url,返回不同的页面。

路由使用方法如下:

1、模板引入----const expressRoute = require('express-route');

2、创建express的路由功能---var router = express.Router();

3、把roter添加到server,设置路由跳转的url----server.use('/page', router);     

4、  route内部,根据不同的路由调用不同的路由函数, 返回不同的页面。----

      router.get('/aaa', (req, res) => {         

             res.render('a.ejs', { name: 'xxxx' })

        });

实例如下:

根目录下有test.js,template文件夹,template文件夹下有a.ejs和b.ejs

a.ejs如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    我是页面a,我的名字叫
    <%= name %>
</body>

</html>

b.ejs如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    我是页面b,我的名字叫
    <%= name %>
</body>

</html>

test.js如下:

const express = require('express');
const consolidate = require('consolidate');
const expressRoute = require('express-route');

var server = express();
server.listen(8080);

//配置模板引擎
//设置模板文件位置:放在当前根目录下
server.set('views', 'template');
//设置模板输出形式为:html页面
server.set('view engine', 'html');
//选择ejs模板引擎
server.engine('html', consolidate.ejs);

//route--web服务器会根据用户输入的不同url,返回不同的页面
var router = express.Router();//创建express的路由功能
server.use('/page', router);
router.get('/a', (req, res) => {
    res.render('a.ejs', { name: '小布丁' });
});

router.get('/b', (req, res) => {
    res.render('b.ejs', { name: '小不点' });
});


结果展示如下:

              

猜你喜欢

转载自blog.csdn.net/maidu_xbd/article/details/86743156