nodejs小记之handlebars视图与静态文件布置

最新推荐文章于 2024-11-06 10:54:20 发布

小横

最新推荐文章于 2024-11-06 10:54:20 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： nodejs小记文章标签： express nodejs

本文链接：https://blog.youkuaiyun.com/u012536005/article/details/50521427

nodejs小记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Express应用中集成并使用Handlerbars模板引擎，包括安装、配置视图引擎、创建视图目录及布局、静态文件配置等步骤，并最终实现路由替换以展示动态页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章只记录过程，不讲解原理。

具体handlerbars用法请查看本博客其它文章。

安装handlerbars

运行 npm install --save express3-handlebars

安装handlerbars

设置handlerbars引擎

再创建index.js里面的app之后，设置视图引擎。

var express = require('express');

var app = express();

var handlebars = require('express3-handlebars')
        .create({defaultLayout:'main'});/*指明了默认布局*/
app.engine('handlebars',handlebars.engine);
app.set("view engine",'handlebars');

创建views目录

创建views目录防止handlebars文件。
在views目录下面创建layouts子目录，来放置通用的框架。
例如：views/layouts/main.handlerbars

<!doctype html>
<html>
<head>
新浪网
</head>
<body>
{{{body}}}  {{!-- 此处会被每个视图自己的html取代
                 类似java里面的继承后被重写的方法 --}}
</body>
</html>

views/home.handelbars

<h1>新浪网欢迎你</h1>
views/404.handelbars

<h1>404 - Not Found</h1>
views/500.handelbars

<h1>500 - Server Error</h1>

连接新实图

现在视图都已经设置好了，接下来我们必须将使用这些视图的新路由替换旧路由。

更改index.js

配置静态文件

咱们们先不着急进行测试，先把静态文件配置以后一起测试。
在项目下配置public目录，在其下创建img目录，放入logo.jpg。
然后把static中间件加在所有路由之前。
app.use(express.static(__dirname + ‘/public’));
public前一定要加“/”

css，js以及你所需要访问的静态文件都可以放在其下。

编写静态文件