Node.js中的Express框架利用jade，ejs进行后端渲染

最新推荐文章于 2022-06-15 15:49:45 发布
最新推荐文章于 2022-06-15 15:49:45 发布
阅读量1.1k 收藏
点赞数
分类专栏： nodejs 文章标签： nodejs 后端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k464746/article/details/104857337
版权

文章目录

Node.js环境安装

后端渲染

  • 前端渲染，根据后端返回的json数据，生成html
  • 后端渲染，后端直接把json与html结合完成返回到浏览器

jade

jade介绍
jade使用
  • 先安装jadenpm i jade
  • js文件代码
//引入 express   jade
const express=require('express')
const jade=require('jade')

// 创建服务器
const server=express()
server.listen(3000)
server.use(express.static('./public'))


//访问http://localhost:3000/
server.get('/',(req,res)=>{
      //通过jade模板引擎渲染文件
    //let html = jade.renderFile('jade模板文件'，{pretty:true,key:value});	//返回字符

    let html=jade.renderFile('./views/index.jade',{pretty:true,data:'这是一段数据'})

    res.send(html)
})
  • jade模板文件
html
    head   
        body
            div(class='active')
                ul
                    li(class='active')
                        a(href="http://www.baidu.com")这是a标签
            div 这是div标签
                h1 #{data}
运行

在这里插入图片描述
在这里插入图片描述

ejs

ejs介绍
  • ejs 结构就是html
  • 输出: <%= 数据名|属性名|变量名 + 表达式 %>
  • 语句： <% 语句 %> 需要被<% %> 包裹
  • 非转义输出: <%- 数据名|变量名 + 表达式 %>
  • 载入公共：<%- include('./hd.ejs',{数据}) %>
  • ejs更多资料点击进入官网了解
ejs使用
  • 先安装ejsnpm i ejs
    在这里插入图片描述
  • js文件代码
const express = require('express')
const ejs = require('ejs')

const server = express()
server.listen(3000)
// 静态资源托管
server.use(express.static('./public'))


let data={
    title:'hello ejs模板',
    name:'张三',
    age:18,
    bool:false,
    list:[
        {id:1,msg:'今天周一',href:'href1'},
        {id:1,msg:'今天周二',href:'href2'},
        {id:1,msg:'今天周三',href:'href3'}
    ],
    strong:"<strong>我是非常强壮的</strong>"
}

server.get('/', (req, res) => {
    ejs.renderFile('./views/index.ejs', data, (err, data) => {
        if (!err) {
            res.send(data)
        }
    })
})
  • ejs模板文件index.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>
    <!-- 只有静态资源托管才能引入 -->
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <!-- 引入另一个文件 -->
    <%- include('./head.ejs',{data:'也可以在这传递数据'})%>

    <!-- 输出 -->
    <h1><%=name %></h1>
    <h2><%= age+1 %></h2>

    <!-- <strong>我是非常强壮的</strong>  -->
   <%= strong  %>  
   <!-- 非转义输出 -->
   <%- strong  %>

    <!-- 语句 -->
    <%  let a=1
        let b=2
        let c=a+b
    %>
    <p>c=>  <%= c%></p>
    <% d=10 %>
    <% e=10 %>
    <% f=d+e %>
    <p>f=>  <%= f%></p>

    <!-- 判断语句 -->
    <% if(bool){ %>
        <h5>bool是false</h5>
    <% }else{ %>
        <h5>bool是true</h5>
    <% } %>

    <!-- 循环语句 -->
    <ul>
    <% for(let i=0;i<list.length;i++){ %>
        <li><a href="<%= list[i].href %>"><%= list[i].msg %></a></li>
    <% } %>
    </ul>

</body>

</html>
  • ejs模板文件head.ejs代码
<h1><%= title%></h1>
<h1><%= data%></h1>
  • css文件
h1{color: red;}
ul,li{list-style: none;}
运行

在这里插入图片描述

直接用express进行后端渲染

代码
  • 直接用res.render
//安装完成 ejs  jage模块后  直接用express就可以
const express=require('express')
const server=express()
server.listen(3000)
server.use(express.static('./public'))


let data={
    title:'hello ejs模板',
    name:'张三',
    age:18,
    bool:false,
    list:[
        {id:1,msg:'今天周一',href:'href1'},
        {id:1,msg:'今天周二',href:'href2'},
        {id:1,msg:'今天周三',href:'href3'}
    ],
    strong:"<strong>我是非常强壮的</strong>"
}

//默认文件名 是 views  因此只需要写views下的文件路径即可

// 如果自己起了一个文件名字的话  例如  abc 则设置
// server.set('views','abc')

server.get('/',(req,res)=>{

    //ejs 文件
    // res.render('./index.ejs',data,(err,data)=>{
    //     if(!err){
    //         res.send(data)
    //     }
    // })

    // jade文件
    let html=res.render('./index.jade',{pretty:true,data:'这是一段数据'})
    res.send(html)

})

在这里插入图片描述

前端魔法师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nodejs-Express框架API文档及Jade文档
04-29
Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性配合jade模板引擎帮助你创建各种Web应用. 打包文件中包含：1. Express API 4.x 文档参考(英文) 2. Express API 3.x 文档参考(中文) 3. Jade文档
Node后端数据渲染
博文视点（北京）官方博客
05-08 763
引言：对于前端开发者来说，在大型Web应用开发中，很多时候并不需要完全重新设计整个应用后台的架构，更多的情况下需要结合Node的能力帮助我们解决前后端分离开发模式下无法解决的问题。本文带我们学习通常前后端分离的开发模式下有哪些问题，利用Node端的服务又是如何帮助我们解决这些问题的。 本文选自《现代前端技术解析》。 SPA场景下SEO的问题　　通常情况下，SPA应用或前后端分离的开发模...
nodejs-api接口
tangxdashen的博客
05-21 1440
express 后端渲染一个页面 api接口 问题： 如果遇到了前后端不分离的项目， 你怎么做？ 找后端，搭建项目启动的环境 找后端模板引擎 （ 找类似于 view 这样的目录 ） 找静态资源文件目录 找对应性文件， index.ejs index.css 看效果改js 看效果改css api接口暴露 测试接口是否正常，我们可以使用测试工具：postman insomnia B...
express-ssr后端渲染
weixin_45843676的博客
06-15 344
express-ssr后端渲染
Express jade
bwf_erg的博客
12-08 440
第一部分 背景 随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来. 为了使用户界面与业务数据分离，就产生了『模板引擎』这个概念。模板引擎有很多, 比较有名的有jade（express默认）、ejs、hbs（ghost默认）、d
Node.js项目中调用JavaScript的EJS模板库的方法
10-22
主要介绍了Node.js项目中调用JavaScript的EJS模板库的方法,通过EJS模板引擎可以制作出维护性良好的HTML代码结构,需要的朋友可以参考下
基于Node.js的Express框架与MySQL的后台管理系统设计源码
最新发布
03-29
这是一个基于Node.js的后台管理系统设计，使用Express框架和MySQL数据库。该项目包含60个文件，主要文件类型包括27个JavaScript文件、16个EJS模板文件、5个LESS样式文件、3个JSON配置文件、2个Markdown文档、1个...
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
10-18
主要介绍了node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Express视图模板jade改为ejs,html模板
wangcuiling_123的博客
11-19 1022
默认安装的express框架，官方推荐的是jade模板，虽然是很简洁，但是实在对这个jade不熟悉，还是改模板吧，下面介绍改成ejs，html视图，亲测无误。安装express生成器npm有点慢，采用cnpmcnpm i -g express-generator安装完成，查看版本express --version生成服务express server安装依赖cd server cnpm i生成的文件目
Nodejs express使用jade模版
pretent的成长历程
05-10 3161
安装express和jade模块 npm install express jade --save var express = require('express'); var app = express(); // 设置静态资源目录 app.use(express.static(__dirname)); // 设置模版引擎（这里使用jade模版） app.set('view engine'
express默认模版jade
Carmen谢的专栏
07-07 1332
公司用node的express框架时，模板引擎都是用ejs,而express 的默认模板引擎是jade，我觉得有必要去了解一下
Nodejs + express + ejs, jade
wtxy24的博客
10-10 674
玩过一会nodejs，一段时间没接触，忘得比什么都快，简单记录下，下次玩时就不用从头开始找资料了。以前用的是jade，作为业余还是先用ejs吧。 1、安装NODEJS，配置好环境 2、使用express框架,Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架 3、安装express， npm install -g express npm install -
Express---jade模板引擎(一)
bwf_erg的博客
11-17 436
Jade— Node Template Engine，一个高性能的模板引擎，为 Node 而做，用 JavaScript 实现。Node.js 的 Express.js 框架默认用的就是 Jade(更名为Pug)。 第一部分 背景 随着 web 发展，前端应用变得越来越复杂，基于后端的javascript(Node.js) 也开始崭露头角，此时  javascript 被寄予
Nodejs express框架之jade模板的学习笔记
Turne的博客
03-03 597
使用jade的环境   配置node.js的环境，并且在全局安装jade即在命令行中执行npm install -g jade jade的使用 与html不同：元素的标签不要写 例如： html   head     title   body 上面表面html是所有元素的父节点，head是title的父节点，body和head是兄弟节点 如何区分元素与标签：
服务端渲染
gengtieguang的博客
10-13 122
服务端渲染 next框架
Nodejs+express+jade配置
weixin_30889885的博客
04-08 84
安装Nodejs，https://nodejs.org/en , windows下一路next安装就行 安装完成后在命令行运行node -v，会打印出nodejs版本号 使用npm安装express（npm是nodejs自带的管理工具），运行命令：npm install -g express，g代表全局安装 运行命令：npm install -g express-generat...
nodejs学习（二） ---- express中使用模板引擎jade
weixin_30755709的博客
07-12 278
系列教程，上一节教程express+nodejs快速创建一个项目 在创建一个项目后，views目录下的文件后缀为 .jade 。 打开 index.jade，具体内容如下图（忽略 header.jade 和 footer.jade，下面教程会一步步创建） 页面解析出的样子如下图。完全是html标签 一、jade 模板引擎 介绍 　　模板引擎是一个库，或者...
Express4.X版本修改默认模板jade为ejs并且试用html为视图模板后缀名
安树的博客
11-11 4674
通过npm安装Express4.x版本之后发现默认的视图模板是jade的，如果想使用ejs模板的话先通过npm安装ejs npm install ejs 然后打开app.js文件，把里面的 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');两句话修改为：
Nodejs入门基础（使用express创建jade或ejs模板）
JayVergil的博客
10-23 716
创建index.jade(约等于新型的html编码格式)创建index.ejs(基本跟html没区别)jade1.js var express = require("express");//导入express var app = express();//实例化 app.set("view engine","jade");//设置模板引擎(jade,ejs) app.set("views",...
node.js的express框架
03-25
Express是基于Node.js的Web框架，它提供了一套简洁、灵活的方式来编写Web应用。它是一个可靠的框架，社区支持活跃，文档详细。 使用Express可以提高Web应用的开发效率，快速搭建服务器和路由，并且可以方便地使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值