【Node.js-6】consolidate模板引擎集成、router路由介绍

1、consolidate可以说是一个各种模板引擎的结合体。它包括了我们之前的jadeejs。通过配置就可以使用多种模板引擎。我们这里使用一个简单的例子。

——我们的文件目录结构以及直接写在html里面的模板,如下图:
这里写图片描述

——在server.js里面:

const server = require('express')();
const consolidate = require('consolidate');

// 设置把模板以html形式输出
server.set('view engine','html');
// 模板位置
server.set('views','./views');
// 使用ejs引擎去解析html,这里可以设置多种多对
server.engine('html',consolidate.ejs);

server.get('/index',function(req,res){
    res.render('index.html',{username:'eric'});
});

server.listen(1337);

——然后访问http://localhost:1337/index这个路径,页面结果如下图:
这里写图片描述

2、router模块是express自带的,也就是说我们安装了express就可以直接使用了。

——在具体实战中再体会路由的其他用法。下面尽管分开模块了写了,但还是都写在同一个文件里面,会显得臃肿。

const express = require('express');

var server = express();

// routerUser相当于创建的一个子server
var routerUser = express.Router();
// 然后把这个子server和某个路径绑定
server.use('/user',routerUser);
// 然后基于这个子server来写,才能拦截这个路径的所有请求
// http://localhost:1337/user/list
routerUser.get('/list',function(req,res){
    res.send("user list");
});
// http://localhost:1337/user/detail
routerUser.get('/detail',function(req,res){
    res.send("user detail");
})

var routerPost = express.Router();
server.use('/post',routerPost);
// http://localhost:1337/post/list
routerPost.get('/list',function(req,res){
    res.send("post list");
})
// http://localhost:1337/post/detail
routerPost.get('/detail',function(req,res){
    res.send("post detail");
});

server.listen(1337);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
优化下面代码.bg { width: 100%; height: 100vh; background-image: url('../../assets/img/info-bg.png'); background-size: 100% 100%; background-repeat: no-repeat; position: relative; font-family: AlibabaPuHuiTiR; .goBack { position: absolute; top: 34px; right: 65px; cursor: pointer; color: #ffffff; width: 181px; padding: 15px 10px; background: rgba(24, 31, 30, 0.52); border: 1px solid #4a524e; border-radius: 5px; font-size: 18px; font-family: AlibabaPuHuiTiR; z-index: 111; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .home-left { position: absolute; top: 18%; left: 40px; width: 41%; height: 76%; font-size: 24px; color: #ffffff; } .unit { font-size: 24px; color: #636363; } .home-left-title { font-size: 24px; color: #ffffff; line-height: 36px; } .home-right { position: absolute; top: 18%; right: 88px; width: 46%; height: 78%; } .model { display: flex; justify-content: center; align-items: center; height: 90%; } #threeContained { width: 100%; height: 100%; } .model-qk-img { width: 82%; height: 90%; background-image: url('../../assets/img/howo.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-zk-img { width: 56%; height: 90%; background-image: url('../../assets/img/heavyT.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-gj-img { width: 82%; height: 90%; background-image: url('../../assets/img/transit.png'); background-size: 100% 100%; background-repeat: no-repeat; } .car-online { margin-bottom: 50px; } } .day-data { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 29%; margin-left: 30px; } .day-val { width: 40%; } .prefix { display: inline-block; width: 6px; height: 14px; background: #ffffff; margin-right: 20px; } .zh-title { margin-left: 30px; padding-top: 30px; font-size: 30px; font-weight: 700; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: 0.3px; font-family: AlibabaPuHuiTiB; } .en-title { margin-left: 30px; font-size: 14px; font-weight: 400; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: -0.91px; font-family: AlibabaPuHuiTiR; }
最新发布
05-31

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值