使用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>

效果：

nodejs（8） 使用ejs渲染动态页面的更多相关文章

  1. nodejs（9）使用arttemplate渲染动态页面

    使用arttemplate渲染动态页面 安装 两个包 npm i art-template express-art-template -S 自定义一个模板引擎 app.engine('自定义模板引擎的 ...

  2. nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

    1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...

  3. nodejs渲染到页面的理解

    一般逻辑都是: 打开页面,前端发请求到服务端,服务端返回数据到前端,前端根据数据生成DOM节点,然后append到DOM中. 如果是nodejs渲染到页面,我的理解是: 打开页面,服务端直接把数据查询 ...

  4. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  5. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  6. Spring MVC 学习总结（七）——FreeMarker模板引擎与动态页面静态化

    模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则 ...

  7. ajax获取数据后怎么去渲染到页面？

    $.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...

  8. 输入url到渲染出页面的过程

    输入地址 浏览器查找域名的 IP 地址 这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存... 浏览器向 web 服务器发送一个 HTTP 请求 服务器的永久 ...

  9. 微信小程序请求wx.request数据,渲染到页面

    先说一下基本使用.官网也有. 比如说你在App.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "", border: "&qu ...

随机推荐

  1. P1006 换个格式输出整数

    这道题相较于上一题来说就简单了许多.看题. 怎么感觉这道题有点类似P1002写出这个数.流程差不多,思路大致是先求出每一位上的数,然后根据 百十个 的顺序输出结果.题目比较简单,不做赘述,贴代码 代码 ...

  2. 【Linux】linux内核学习

    linux内核获取 官网: https://www.kernel.org/ Linux操作系统的核心是模块化,可以使用lsmod命令查看内核模块,下面展示已载入系统的模块: [root@172.16. ...

  3. jrebel插件的激活

    转 jrebel idea插件激活,亲测可用: 在jrebel server处,写上: http://139.199.89.239:1008/88414687-3b91-4286-89ba-2dc81 ...

  4. iptable实现端口转发

    利用iptables的规则来实现端口转发: 第一步需要将内核参数的net.ipv4.ip_forward=1 场景一:实现本地端口转发 本地端口转发实在PREROUTING链中将端口做NAT转换: # ...

  5. Java语言学习总结 扩展篇 包装类的概念及其使用

    包装类 包装类的概述 Java提供了两个类型系统,基本类型与引用类型,使用基本类型在于效率,然而很多情况,会创建对象使用,因为对象可以做更多的功能,如果想要我们的基本类型像对象一样操作,就可以使用基本 ...

  6. 如何通过 Python 和 OpenCV 实现目标数量监控？

    今天我们将利用python+OpenCV实现对视频中物体数量的监控,达到视频监控的效果,比如洗煤厂的监控水龙头的水柱颜色,当水柱为黑色的超过了一半,那么将说明过滤网发生了故障.当然不仅如此,我们看的是 ...

  7. 四十三、在SAP中初始化勾选值

    一.上代码 二.运行时,勾选框会被自动勾选中 三.表单如下

  8. opencv python训练人脸识别

    总计分为三个步骤 一.捕获人脸照片 二.对捕获的照片进行训练 三.加载训练的数据,识别 使用python3.6.8,opencv,numpy,pil 第一步:通过笔记本前置摄像头捕获脸部图片 将捕获的 ...

  9. 黑马oracle_day01：01.oracle体系结构

    01.oracle体系结构 02.oracle的基本操作 03.oracle的查询 04.oracle对象 05.oracle编程 01.oracle体系结构 开发环境:VMware® Worksta ...

  10. js原型链理解(2)--原型链继承

    1.原型链继承 2.constructor stealing(构造借用) 3.组合继承 js中的原型链继承,运用的js原型链中的__proto__. function Super(){ this.se ...