Express 框架中使用ejs

本文轉載自查看原文 2020-11-10 09:07 692 node

Express安裝使用

1、新建文件夾，使用npm init生成package.json文件。

2、執行npm命令安裝express npm install express --save

3、基礎使用

多級目錄

動態路由

由於路由匹配是從上往下的，所以在使用動態路由時，一定要注意路由配置的順序，如果將上面兩個路由配置順序調換，那么/article/add就會被前面的動態路由截取。

獲取路由參數

Express 框架中使用ejs

1、使用npm安裝ejs：npm install ejs --save

2、基礎使用

ejs綁定數據

const express = require("express");
const app = express()
app.set("view engine","ejs")

app.get("/news",(req,res)=>{
    let userinfo={
        username:"張三",
        age:20
    }
    let title="我是一個標題";
    let article="<h3>我是一個h3</h3>";

    let list=["1111","22222","3333333"]

    let newsList=[
        {title:"新聞1111"},
        {title:"新聞2222"},
        {title:"新聞3333"},
    ]

    res.render("news",{
        userinfo:userinfo,
        title:title,
        article:article,
        flag:true,
        score:60,
        list:list,
        newsList:newsList
    })
})

app.listen(3000,'127.0.0.1')

news.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><%=userinfo.username%>---<%=userinfo.age%></p>

    <p><%=title%></p>

    <p><%-article%></p>

    <h2>條件判斷</h2>

    <%if(flag==true){%>
        <strong>flag=true</strong>
    <%}%>

    <%if(score>=60){%>
        <p>及格</p>
    <%}else{%>
       不及格
    <%}%>

    <h2>循環遍歷</h2>

    <ul>
        <%for(let i=0;i<list.length;i++){%>
            <li><%=list[i]%></li>
        <%}%>        
    </ul>
    
    <ul>
        <%for(let i=0;i<newsList.length;i++){%>
            <li><%=newsList[i].title%></li>
        <%}%>        
    </ul>
</body>
</html>

ejs引入模板

首先、在views文件夾中新建模板頁面footer.ejs

然后在index.ejs中調用模板頁面

最后通過路由匹配訪問index.ejs

修改模板文件ejs后綴為html

首先配置入口頁面

然后在views文件夾中新建index.html文件

最后通過路由匹配渲染頁面

const express = require("express");
const app = express();
// 在 app.js 的頭上定義 ejs
var ejs = require('ejs');
// 注冊 html 模板引擎
app.engine("html",ejs.__express)
// 將模板引擎換成 html 代碼
app.set("view engine","html")
app.get("/",(req,res)=>{
    console.log(req);
    let title = "你好ejs";
    res.render("index",{
        title:title
    })
})
app.listen(3000,'127.0.0.1')