Express入门模板引擎hbs 服务端渲染

太过爱你忘了你带给我的痛 2023-02-16 15:26 14阅读 0赞

Express支持多种模板引擎，这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 。  
安装hbs

npm install hbs --save-dev

安装hbs模板引擎后改写app.js

//index.js
    var express=require('express');
    var app=express();
    
    //加载hbs模块
    var hbs = require('hbs');
    
    //指定模板后缀名为html
    app.set('view engine','html');
    
    //运行hbs模块
    app.engine('html',hbs.__express);
    
    var routes=require('./routes')(app);
    
    app.listen(8080);

新建views子文件，放入视图文件三个：index.html customer.html admin.html

<p>这里是index</p>

<p>这里是customer</p>

<p>这里是admin</p>

接下来修改路由文件

//routes/index.js
    module.exports = function(app) {
        app.get('/',function(req,res){
            res.render('index');
        });
        app.get('/customer',function(req,res){
            res.render('customer');
        });
        app.get('/admin',function(req,res){
            res.render('admin');
        });
    }

render方法 对网页模板进行渲染，render方法的参数就是文件名，默认放在views文件夹下，不需要html后缀名 ，已经在index.js说明为html  
运行结构如图：

![format_png][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80MzY5NzY1LWJkMjQ1NDQ0OTdmYmQ2ZGYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNzg3L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Express入门模板引擎hbs 服务端渲染

Express支持多种模板引擎，这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎。安装hbs npm install hbs --save-

太过爱你忘了你带给我的痛/ 2023年02月16日 15:26/ 0 赞/ 15 阅读

相关 Express全系列教程之(十一)：渲染ejs模板引擎

一、简介相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。您

╰半橙微兮°/ 2023年01月07日 10:15/ 0 赞/ 325 阅读

相关 Express全系列教程之(十)：渲染jade模板引擎

一、前言随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.j

悠悠/ 2023年01月07日 10:15/ 0 赞/ 268 阅读

相关 nodejs之模板引擎（渲染模板）

模板引擎模板引擎简介语法模板核心方法 template（filename，data）

- 日理万妓/ 2022年12月15日 06:10/ 0 赞/ 461 阅读

相关 Nuxt服务端渲染-接口服务端渲染

在server里面启动server-api服务后再起一个命令行窗口，再npm run dev启动项目服务先安装axios cnpm install axios -

心已赠人/ 2022年10月17日 05:59/ 0 赞/ 251 阅读

相关 Django（三）、模板引擎渲染

前言：在第一篇中已经了解到，django支持将html作为模板放在指定的路径中（templates）。同时，django模板引擎可以动态地获取数据，来渲染模板网页文件，实

￡神魔★判官ぃ/ 2022年06月01日 00:09/ 0 赞/ 315 阅读

相关【Express】为什么你应该抛弃Express的视图渲染引擎

转载自：[为什么你应该抛弃Express的视图渲染引擎][Express] Nodejs Express框架的一个被人们广为使用的特性是它的渲染引擎。Express视图渲染引

旧城等待，/ 2022年05月24日 12:52/ 0 赞/ 121 阅读

相关 Express框架 - 模板引擎

在文件夹views（默认文件夹）中有template.ejs文件，它的内容如下： <!DOCTYPE html> <html lang="en">

ゞ浴缸里的玫瑰/ 2022年03月17日 08:53/ 0 赞/ 309 阅读

相关 template模板引擎渲染

<div class="problems" id="content"> </div> <script id="test" type="text

深藏阁楼爱情的钟/ 2022年02月09日 14:11/ 0 赞/ 275 阅读

相关服务端渲染客户端渲染

渲染页面上的数据要发生更新服务端渲染后台语言通过一些模板引擎生成html 好处：前端耗时少（前端只负责将html进行展示），利于SEO 坏处：网络传输数据量大，

朴灿烈づ我的快乐病毒、/ 2021年09月18日 08:58/ 0 赞/ 581 阅读