express+ejs入门示例

最新推荐文章于 2024-07-22 20:58:11 发布

wangguangrong

最新推荐文章于 2024-07-22 20:58:11 发布

阅读量1.1k

点赞数

分类专栏： H5 文章标签： nodejs express ejs

本文链接：https://blog.csdn.net/wangguangrong/article/details/78973359

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

express+ejs入门示例

要求环境
- 已经加入了express和ejs的环境，如果没有加的请在命令提示中使用下面命令加入
  - npm install express –save
  - npm install body-parser –save
  - npm install cookie-parser –save
  - npm install multer –save
  - npm install ejs
第二步创建项目
- 项目结构如下图
- 从项目结构图可以看出只有3个文件,分别为app.js,home1.ejs, home2.ejs, 下面分别是这3个文件的全部内容

//文件app.js

var express = require("express");
var app = express();
//指定模板引擎
app.set("view engine", 'ejs');
//指定模板位置
app.set('views', __dirname + '/views');
//利用模板文件home.ejs渲染为html
app.get("/home1", function(req, res) {
    res.render('home1.ejs', {
        name: 'tinyphp'
    });
});
app.get("/home2", function(req, res) {
    res.render('home2.ejs', {
        names: ['上明','小陶','小黄']
    });
});
var server = app.listen(3000, function() {
    console.log("请在浏览器访问：http://localhost:3000/");
});

//文件home1.ejs

<html>
<head>
<title>my ejs template</title>
</head>
<body>
    <p>Hi <%= name %></p>
</body>
</html>

//文件home2.ejs

<html>
<head>
<title>my ejs template</title>
</head>
<body>
    <ul>  
     <% for(var i=0; i<names.length; i++) { %>  
         <li>  
             <a href='names/<%= names[i] %>'>  
                <%= names[i] %>  
             </a>  
          </li>  
     <% } %>  
    </ul>  
</body>
</html>