nodejs（8）使用ejs渲染动态页面

最新推荐文章于 2022-04-26 00:02:19 发布

weixin_30587025

最新推荐文章于 2022-04-26 00:02:19 发布

阅读量1.2k

点赞数 1

文章标签： javascript 数据库前端 ViewUI

原文链接：http://www.cnblogs.com/houfee/p/10365893.html

版权

使用ejs渲染动态页面

步骤：

安装 ejs 模板引擎npm i ejs -S
使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs')
使用 app.set() 配置默认模板页面的存放路径 app.set('views', './views')
使用 res.render() 来渲染模板页面res.render('index.ejs', { 要渲染的数据对象 })，注意，模板页面的后缀名，可以省略不写

注意后缀名

js文件

// 导入模块
const express = require('express')

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


// 渲染静态页面 res.readFile app.use(express.static(''))

// 配置项目中默认的模板引擎，为 ejs
app.set('view engine', 'ejs')
// 配置模板页面的存放路径
app.set('views', './views')


app.get('/', (req, res) => {
  // 只有先配置了 app.set('view engine', 'ejs') 和 app.set('views', './views')，才能使用
  // res.render的时候，第一个参数为要渲染页面的名称，这个页面是相对于app.set('views', './views')的存放路径来查找的，这个第二个参数为要渲染的数据。
  res.render('index.ejs', {
    name: 'houfee',
    age: 24,
    gender: '男',
    hobby: ['唱歌', '跳舞', '吃饭'],
    desc: '<h1>这是html代码</h1>'
  })
})

// 启动服务器
app.listen(4444, () => {
  console.log('express server running at http://127.0.0.1:4444')
})

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
</head>
<body>
  <h1>views</h1>
  <p>姓名： <%= name%></p>
  <p>年龄： <%= age%></p>
  <p>性别： <%= gender%></p>
  <div>
    爱好：
    <% hobby.forEach(item => { %>
      <span><%= item %></span>
    <% }) %>
  </div>
  <p>文字： <%- desc%></p>
</body>
</html>

效果：

转载于:https://www.cnblogs.com/houfee/p/10365893.html

weixin_30587025

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
nodejs（8）使用ejs渲染动态页面

使用ejs渲染动态页面步骤：安装 ejs 模板引擎npm i ejs -S使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs')使用 app.set() 配置默认模板页面的存放路径 app.set('views', './views')使用 res.render() 来渲染模板页面res.r...
复制链接

扫一扫