node：EJS学习

最新推荐文章于 2024-02-20 23:32:28 发布

灰鸦893

最新推荐文章于 2024-02-20 23:32:28 发布

阅读量98

点赞数

文章标签：学习 node.js

本文链接：https://blog.csdn.net/qq_56507133/article/details/134306806

版权

ejs:视图引擎分离用户界面和业务数据

MVC架构：

M--------model控制应用程序数据逻辑部分

V---------view渲染数据

C---------controller控制器，向M发送数据，控制数据变化

安装 npm i ejs --save

下载后在app.js中配置

app.set("views",path.join(__dirname+"views"));

app.set('view engine',"ejs");

ejs支持在标签中写变量 <%=变量%>

在html结构中写js <% xxxxxxxxxx %>

导入公共ejs <%-include("路径")%>

注意：注释中的<%%>也会报错

例子：

<!-- 点击a标签，跳转到index.ejs -->
    <a href="/page.do?mytype=1">人物子菜单</a>

router.js

router.get("/page.do",userController.myType);

dao层

getTypeDao(params){
        return new Promise(function(resolve,reject){
            dbpool.connect("select * from t_user",
        (err,data)=>{
            if(!err){
                if(data.length > 0){
                    // console.log(11111111111111);
                    resolve(data);
                }else{
                    console.log(22222);
                }
            }
        })
        }
        )
        
    }

controller

myType(req,res){
        let params=[req.query.mytype];
       
        userModel.getTypeDao(params)
        .then((data)=>{
            res.render("index",{data})//渲染
        })
    }

index.ejs

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>人物页面</h1>
    <table border="1">
        <thead >
            <tr>
                <td>id</td>
                <td>用户名</td>
                <td>密码</td>
            </tr>
        </thead>
        <tbody
            <% for(let i=0 ;i< data.length;i++){ %>
                <tr>
                    <td>
                        <%=data[i].id%>
                    </td>
                    <td>
                        <%=data[i].username%>
                    </td>
                    <td>
                        <%=data[i].pwd%>
                    </td>
                </tr>
            <% } %>
        </tbody>

    </table>
    

</body>
</html>

效果：