node.js里面的ejs模板引擎

最新推荐文章于 2024-06-19 18:56:26 发布

金小鱼学前端

最新推荐文章于 2024-06-19 18:56:26 发布

阅读量1k

点赞数

文章标签： node.js javascript

本文链接：https://blog.csdn.net/m0_64846104/article/details/128645532

版权

html页面属于静态页面，创建的时候什么样子，用户看到的就是什么样子
不会自动跟随服务器中数据的变化而变化

希望有这么一个东西，他呢长的像是个网页，但是他里边可以嵌入变量，
这个东西在node中被称为模板

在node中存在有很多个模板引擎，都各具特色，ejs

ejs是node中的一款模板引擎，使用步骤：
1.安装ejs
2.配置express的模板引擎为ejs
app.set("view engine", "ejs")
3.配置模板路径
app.set("views", path.resolve(__dirname, "views"))

注意，模板引擎需要被express渲染后才能使用

下面是index.js代码

const express = require("express")
const path = require("path")
const app = express()

const STUDENT_ARR = [
    {
        name: "孙悟空",
        age: 18,
        gender: "男",
        address: "火锅山"
    },
    {
        name: "猪八戒",
        age: 28,
        gender: "男",
        address: "高老庄"
    },
    {
        name: "沙和尚",
        age: 38,
        gender: "男",
        address: "流沙河"
    }
]

let name = "猪八戒"

// 将ejs设置为默认的模板引擎
app.set("view engine", "ejs")
// 配置模板的路径
app.set("views", path.resolve(__dirname, "views"))

// 配置静态资源路径
app.use(express.static(path.resolve(__dirname, "public")))
// 配置请求体解析
app.use(express.urlencoded({ extended: true }))

app.get("/hello", (req, res) => {
    res.send("hello")
})

app.get("/students", (req, res) => {
    // 希望用户在访问students路由时，可以给用户返回一个显示有学生信息的页面
   
    //  res.render() 用来渲染一个模板引擎，并将其返回给浏览器
    // 可以将一个对象作为render的第二个参数传递，这样在模板中可以访问到对象中的数据
    // res.render("students", { name: "孙悟空", age: 18, gender: "男" })
   
    res.render("students", { name })
})

app.get("/set_name", (req, res) => {
    name = req.query.name
    res.send("修改成功")
})

// 可以在所有路由的后边配置错误路由
app.use((req, res) => {
    // 只要这个中间件一执行，说明上边的地址都没有匹配
    res.status(404)
    res.send("<h1>您访问的地址已被外星人劫持！</h1>")
})

app.listen(3000, () => {
    console.log("服务器已经启动！")
})

下面是ejs

<!DOCTYPE html>
<html lang="zh">
    <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>这是ejs模板</title>
    </head>
    <body>
        <h1>Hello EJS 哈哈</h1>

        <!-- 
            通过它可以将render传递进来的数据直接在网页中显示出来
 // <%= %>在ejs中输出内容时，它会自动对字符串中的特殊符号进行转义 &lt;
    //    这个设计主要是为了避免 xss 攻击
    // <%- %> 直接将内容输出
    // <% %>  可以在其中直接编写js代码，js代码会在服务器中执行
        -->
        <%=name %>

        <form action="/set_name">
            <input type="text" name="name" placeholder="请输入你的名字" />
            <button>提交</button>
        </form>

        <% if(name === "孙悟空") {%>
        <h2>大师兄来了</h2>
        <%} else{%>
        <h2>二师兄来了</h2>
        <%}%>
    </body>
</html>

金小鱼学前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
node.js里面的ejs模板引擎

模板引擎需要被express渲染后才能使用。在node中存在有很多个模板引擎，都各具特色，ejs。2.配置express的模板引擎为ejs。不会自动跟随服务器中数据的变化而变化。这个东西在node中被称为模板。下面是index.js代码。
复制链接

扫一扫