nodejs模板引擎的使用_containertemplate { name ‘nodejs‘ image ‘node 14(2)

2401_84870954

于 2024-05-17 06:09:10 发布

阅读量243

点赞数 4

文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84870954/article/details/138988088

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

js代码

//导入express服务器第三方的包
const express = require("express")
//导入模板引擎
const artTemple = require("express-art-template")
//导入node的fs文件系统的模块
const fs = require("fs")


//创建服务器实例
const app = express()

//注册模板引擎(告诉express框架使用什么模板引擎渲染什么后缀的文件)
//参数一:要渲染的文件名后缀
//参数二:使用什么模板引擎去渲染
//默认会渲染项目根目录下的views文件夹下的.html
app.engine("html", artTemple)
//当文件夹名不是views
//设置目录文件夹
app.set("views", "./xiaoji")//如果不需要修改,这行代码就省略

app.get("/", function (req, res) {
    res.render("index1.html", {
        title: "今日书籍打折",
        books: [
            {
                name: "三国演义", price: 50, disc: 30
            },
            {
                name: "水浒传", price: 60, disc: 48
            },
            {
                name: "西游记", price: 70, disc: 56
            },
            {
                name: "红楼梦", price: 50, disc: 30
            }
        ],
        arr: ["小红", "小明", "小翠"],
        age: 20,
        score: 89
    })
})

//调用listen启动服务器
app.listen(80, function () {
    console.log("开启了127.0.0.1服务器");
})

html代码

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

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

<body>
    <!-- art-template语法 -->
    <!-- {{title}} 渲染的值 -->
    <!-- {{}}可以是变量\属性\表达式-->
    <h1>{{title}}</h1>

    <!--循环渲染arr $value:循环元素$index:索引-->
    {{each arr}}
    <p>{{$value}}----{{$index}}</p>
    {{/each}}

    <!--自定义索引名 和 循环元素名 each 数组 元素名 索引名-->
    <div>
        {{each books a b}}
        <section>
            <p>{{a.name}}---{{b}}</p>
            <p>原价:{{a.price}}</p>
            <p>现价:{{a.disc}}</p>
        </section>
        {{/each}}
    </div>
    <p>{{1>3?"不大于":"大于"}}</p>

    <p>{{0||10}}</p>
    <p>{{5||10}}</p>

    <!-- if判断 -->
    {{if age<18}} 
    <p>未成年了</p>
    {{/if}}

    {{if age>=18}}
    <p>成年了</p>
    {{else}}
    <p>未成年</p>
    {{/if}}

    <!-- if-else if-else -->
    {{if score >=90}}
    <p>成绩:优</p>
    {{else if score>=60}}
    <p>成绩:良</p>
    {{else}}
    <p>成绩:不及格</p>
    {{/if}}
</body>
</html>

包结构

在这里插入图片描述

前后端分离模板的使用(前后端可以独立使用)

先获取模板的js文件,这里给大家提供
链接: https://pan.baidu.com/s/1ertUhroqoUL4Ek8ZN7LzgA?pwd=drck 提取码: drck

这里演示不用后台代码了，用一个get的api接口演示前端如何使用的模板(直接运行就可以看到效果)

html文件

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

涵盖了95%以上鸿蒙开发知识点，真正体系化！**

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

2401_84870954

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
nodejs模板引擎的使用_containertemplate { name ‘nodejs‘ image ‘node 14(2)

链接: https://pan.baidu.com/s/1ertUhroqoUL4Ek8ZN7LzgA?pwd=drck 提取码: drck。涵盖了95%以上鸿蒙开发知识点，真正体系化！先获取模板的js文件,这里给大家提供。
复制链接

扫一扫