Node/JavaScript中的模板引擎( 二 )

然后 , 添加如果监听的端口号:
app.listen(3000, () => {    console.log('The web server has started on port 3000');});这样就可以在控制台中运行node app.js启动应用程序 。
但是我们也可以选择使用诸如nodemon之类的工具 。使用nodemon , 我们在改代码时不需要每次都要重新启动服务器 , nodemon会自动刷新服务器 。
盘它:
 npm i -g nodemon安装后 , 运行:
 nodemon app.js在浏览器中打开 http://localhost:3000/:

Node/JavaScript中的模板引擎

文章插图
 
Handlebars 更多功能为了展示一些Handlebars功能 , 我们将构建一个社交媒体类的网站 。这里我们用一个简单的数组来模拟数据库 。
将home.hbs内容更新成如下:
<nav class="navbar navbar-dark bg-dark">    <a class="navbar-brand" href=https://www.isolves.com/it/cxkf/yy/js/2020-10-19/"#">Book Face
Node/JavaScript中的模板引擎
此文章由 前端小智 发布
  • 期待你们的留言/li>
  • 期待你们的留言
上面我们添加了一个 navbar 和一个帖子的展示内容 card , 运行效果如下:
Node/JavaScript中的模板引擎

文章插图
 
向模板传递参数现在 , 让我们从页面本身中删除这些硬编码的值 , 这些值由路由传递进来 ,  在 app.js 中修改如下内容 :
app.get('/', function (req, res) {    res.render('home', {        post: {            author: '小智',            image: '/uploads/allimg/220422/1R64VU3-1.jpg',            comments: []        }    });});post 对象包含author,image和comments等字段 。我们可以在 Handlebars模板使用{{post}}来引用这些值:
<nav class="navbar navbar-dark bg-dark">    <a class="navbar-brand" href=https://www.isolves.com/it/cxkf/yy/js/2020-10-19/"#">Book Face
Node/JavaScript中的模板引擎
此文章由 {{post.author}} 发布
  • 期待你们的留言/li>
  • 期待你们的留言
效果如下:
Node/JavaScript中的模板引擎

文章插图
 
使用条件由于这里需要一些逻辑判断 , 即 comments 没数据不显示 , 我们看看如何在Handlebars 模板中使用条件:
<nav class="navbar navbar-dark bg-dark">    <a class="navbar-brand" href=https://www.isolves.com/it/cxkf/yy/js/2020-10-19/"#">Book Face
Node/JavaScript中的模板引擎
此文章由 {{post.author}} 发布
{{#if post.comments}}
{{else}}


推荐阅读