【Nodejs】Express模板使用

在这里插入图片描述

1.Express脚手架的安装

安装Express脚手架有两种方式:

使用express-generator安装

使用命令行进入项目目录,依次执行:

cnpm i -g express-generator

可通过express -h查看命令行的指令含义

express -h

Usage: express [options] [dir]

Options:--version        输出版本号
-e, --ejs            添加对 ejs 模板引擎的支持--pug            添加对 pug 模板引擎的支持--hbs            添加对 handlebars 模板引擎的支持
-H, --hogan          添加对 hogan.js 模板引擎的支持
-v, --view <engine>  添加对视图引擎(view) <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) (默认是 jade 模板引擎)--no-view        创建不带视图引擎的项目
-c, --css <engine>   添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) (默认是普通的 css 文件)--git            添加 .gitignore
-f, --force          强制在非空目录下创建
-h, --help           输出使用方法

创建了一个名为 myapp 的 Express 应用,并使用ejs模板引擎

express --view=ejs myapp

进入app,并安装依赖

cd myapp
npm install

在Windows 下,使用以下命令启Express应用:

set DEBUG=app:* & npm start

在 MacOS 或 Linux 下,使用以下命令启Express应用:

DEBUG=app:* npm start

使用 express 命令 来快速从创建一个项目目录

express 项目文件夹的名字 -e 如 使用命令行进入项目目录,依次执行:

express app -e
cd app
cnpm install

这时,你也可以看到在app文件夹下的文件结构;

bin: 启动目录 里面包含了一个启动文件 www 默认监听端口是 3000 (直接node www执行即可)
node_modules:依赖的模块包
public:存放静态资源
routes:路由操作
views:存放ejs模板引擎
app.js:主文件
package.json:项目描述文件

第一个Express应用“Hello World”

在这里,我们不使用npm构建的脚手架,而是向最开始那样直接在主目录中新建一个app.js文件。

在app.js中输入

const express = require('express');     //引入express模块
var app= express();     //express()是express模块顶级函数app.get('/',function(req,res){      //访问根路径时输出hello worldres.send(`<h1 style='color: blue'>hello world</h1>`);
});app.listen(8080);       //设置访问端口号

命令行进入项目文件夹后,键入

npm run start/npm start

即已开启服务器,接下来只需在浏览器中运行 http://localhost:3000/ 就可以访问到服务器得到响应后的数据

2.模板引擎简介


相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用。因此其学习成本是很低的。您也可参考ejs官网:https://ejs.bootcss.com/
(1)服务器染,后端嵌套模板,后端渲染模板,SSR (后端把页面组装)

  • 做好静态页面,动态效果。
  • 把前端代码提供给后端,后端要把静态html以及里面的假数据给删掉通过模板进行动态生成html的内容

(2)前后端分离,BSR (前端中组装页面)

  • 做好静态页面,动态效果。
  • json 模拟,ajax,动态创建页面,
  • 真实接口数据,前后联调。
  • 把前端提供给后端静态资源文件夹

服务端渲染可以在源码中看到,客户端渲染不能再源码中看到

3.ejs基本使用


需要在应用中进行如下设置才能让 Express 渲染模板文件:
在这里插入图片描述

这里我们使用如下配置文件:

可以通过下面的方式实现基本的ejs操作:
app.js文件:

const express=require("express");
const ejs=require("ejs");
const fs=require("fs");var app=express();//引用ejs
app.set('views',"./views");  //设置视图的对应目录
app.set("view engine","ejs");       //设置默认的模板引擎app.get("/",function(req,res){res.render("index",{title: "<h4>express</h4>"});//会去找views目录下的index.ejs文件
});app.listen(8080);

ejs文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><% for(var i=0;i<10;i++){ %><%= i %><% } %><!-- 获取变量 --><div class="datas"><p>获取变量:</p><%- title %><%= title %></div></body>
</html>

由此可以知道:

<% xxx %>:里面写入的是js语法,
<%= xxx %>:里面是服务端发送给ejs模板转义后的变量,输出为原数据
<%- xxx %>:里面也是服务端发送给ejs模板后的变量,解析html
如果写html的注释,那样会在源码中显示,下面这种ejs注释不会在源码中显示
<%# 注释标签,不执行、不输出内容 %>

同理res.render()函数也是支持回调的:

res.render('user', { name: 'Tobi' }, function(err, html) {console.log(html);
});

这样我们即可将看到html的内容。

关于res.redirect()

const express = require('express');
const router = express.Router();router.get('/', (req, res) => {res.render('login', {isShow: false,error: '',});
});router.post('/', (req, res) => {if (req.body.username === 'ds' && req.body.password === '123') {console.log('登录成功');// res.send("成功")// 重定向到homeres.redirect('/index');} else {console.log('登录失败');res.render('login', { error: '用户名密码不匹配', isShow: true });}
});module.exports = router;

4.ejs 标签各种含义


<% '脚本' 标签,用于流程控制,无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板(输出是转义 HTML 标签)
<%- 输出非转义的数据到模板
<%# 注释标签,不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除
<% %>流程控制标签( 写的是if else,for)
<%= %>输出标签(原文输出HTML标签)
<%- %>输出标签(HTML会被浏览器解析)
<%# %>注释标签
<%- include(user/show',{user: user) %> 导入公共的模板内容

以上就为ejs基本用法,往后对数据库操作就直接把json数据从服务器返送给模板引擎就行;

5.导入公共模板样式


header.ejs

<header>我是公共样式<div><% if(isShowSchool) {%><h1>校园招聘</h1><% } %></div>
</header>

index.ejs

<%- include("./header.ejs",{ isShowSchool:true }) %> index <%# 我的注释 %>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zia和ChatGPT如何协同工作?

有没有集成ChatGPT的CRM系统推荐&#xff1f;Zoho CRM已经正式与ChatGPT集成。下面我们将从使用场景、使用价值和使用范围等方面切入讲述CRMAI的应用和作用。 Zia和ChatGPT如何协同工作&#xff1f; Zia和ChatGPT是不同的人工智能模型&#xff0c;在CRM中呈现出共生的关系。 …

JAVA基础-Stream流

引言 Java 8 版本新增的Stream&#xff0c;配合同版本出现的Lambda &#xff0c;给我们操作集合&#xff08;Collection&#xff09;提供了极大的 便利。Stream流是JDK8新增的成员&#xff0c;允许以声明性方式处理数据集合&#xff0c;可以把Stream流看作是遍历数据集 合的一个…

java多线程常见面试题

1、线程和进程的区别 本质区别&#xff1a; 进程是一个程序的实例&#xff0c;是操作系统资源分配的最小单位&#xff1b;&#xff0c;是任务调度与执行的最小单位包含关系&#xff1a; 进程至少由一个线程组成&#xff0c;线程可看做轻量级进程资源开销&#xff1a; 进程有自…

通用文字识别OCR 之实现自动化办公

摘要 随着技术的发展&#xff0c;通用文字识别&#xff08;OCR&#xff09;已经成为现代办公环境中不可或缺的工具之一。OCR技术可以将印刷或手写文本转换为可编辑或可搜索的数字文本&#xff0c;极大地提高了办公效率并实现了自动化办公。本文将深入探讨OCR技术在实现自动化办…

一百三十五、Azkaban——AzkabanWebServer服务开启后秒退

一、问题 Azkaban的AzkabanWebServer服务开启后秒退&#xff0c;造成Azkaban的页面登录不上 AzkabanWebServer服务开启后&#xff0c;第一个jps里面有AzkabanWebServer&#xff0c;随后第二个jps里面没有AzkabanWebServer 二、问题原因 MySQL中azkaban数据库的表executors的…

Spring,SpringBoot,Spring MVC的区别是什么

1.Spring是什么 我们通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽庞⼤的社区&#xff0c;这就是它之所以能⻓久不衰的原因。Spring ⽀持⼴泛的应⽤场景&#xff0c;它可以让 Java 企业级…

遇到了一个存在XSS(存储型)漏洞的网站

第一个漏洞self xss&#xff08;存储型&#xff09; 存在漏洞的网站是https://www.kuangstudy.com/ 然后点击个人设置 在编辑主页中&#xff0c;我们可以用最简单的script语句进行注入&#xff0c;提交&#xff1b; 出现弹窗&#xff0c;说明它已经把代码进行解析&#x…

LLM - Chinese-Llama-2-7b 初体验

目录 一.引言 二.模型下载 三.快速测试 四.训练数据 五.总结 一.引言 自打 LLama-2 发布后就一直在等大佬们发布 LLama-2 的适配中文版&#xff0c;也是这几天蹲到了一版由 LinkSoul 发布的 Chinese-Llama-2-7b&#xff0c;其共发布了一个常规版本和一个 4-bit 的量化版本…

Linux命令行宝典:随时查询、轻松应对

&#x1f57a;作者&#xff1a; 迷茫的启明星 学习路线C语言从0到1C初阶数据结构从0到1 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

Flink CEP (一)原理及概念

目录 1.Flink CEP 原理 2.Flink API开发 2.1 模式 pattern 2.2 模式 pattern属性 2.3 模式间的关系 1.Flink CEP 原理 Flink CEP内部是用NFA&#xff08;非确定有限自动机&#xff09;来实现的&#xff0c;由点和边组成的一个状态图&#xff0c;以一个初始状态作为起点&am…

文件共享服务器(五)sicis

目录 前言 一、概述 1.iscsi概念 2.iscsi介绍 3.相关名词 二、实验 1.构建iscsi服务 2.实现步骤 服务器端 客户端 3.注意事项 总结 前言 iSCSI是由IBM发明的基于以太网的存储协议&#xff0c;该协议与SUN的NFS协议都是为了解决存储资源共享问题的解决方案。两者意图…

音视频——封装格式原理

视频解码基础 一、封裝格式 ​ 我们播放的视频文件一般都是用一种封装格式封装起来的&#xff0c;封装格式的作用是什么呢&#xff1f;一般视频文件里不光有视频&#xff0c;还有音频&#xff0c;封装格式的作用就是把视频和音频打包起来。 所以我们先要解封装格式&#xff0…

集成学习Boosting - AdaBoost

目录 1. Boosting方法的基本思想 1.1 Bagging VS Boosting 1.2 Boosting算法的基本元素与基本流程 1.3 sklearn中的Boosting算法 2. AdaBoost 3 AdaBoost的基本参数与损失函数 3.1 参数 base_estimator&#xff0c;属性base_estimator_与estimators_ 3.1. 参数 learnin…

用QFramework来重构 祖玛游戏

资料 Unity - 祖玛游戏 GitHub 说明 用QF一个场景就够了&#xff0c;在UIRoot下切换预制体达到面板切换。 但测试中当然要有一个直接跳到测试面板的 测试脚本&#xff0c;保留测试Scene&#xff08;不然初学者也不知道怎么恢复测试Scene&#xff09;&#xff0c;所以全文按S…

宋浩线性代数笔记(二)矩阵及其性质

更新线性代数第二章——矩阵&#xff0c;本章为线代学科最核心的一章&#xff0c;知识点多而杂碎&#xff0c;务必仔细学习。 重难点在于&#xff1a; 1.矩阵的乘法运算 2.逆矩阵、伴随矩阵的求解 3.矩阵的初等变换 4.矩阵的秩 &#xff08;去年写的字&#xff0c;属实有点ugl…

多态及其原理

文章目录 构成多态的条件虚函数作用&#xff1a;完成重写 重写重载 重写 隐藏为什么析构函数要搞成符合多态?原理预热对于基类指针或引用指向父类或者子类的成员函数是如何调用不同的函数呢&#xff1f; 一个类如果是基类&#xff0c;它的析构函数最好加上virtual 构成多态的条…

AlSD 系列智能安全配电装置是安科瑞电气有限公司专门为低压配电侧开发的一款智能安全用电产 品-安科瑞黄安南

一、应用背景 电力作为一种清洁能源&#xff0c;给人们带来了舒适、便捷的电气化生活。与此同时&#xff0c;由于使用不当&#xff0c;维护 不及时等原因引发的漏电触电和电气火灾事故&#xff0c;也给人们的生命和财产带来了巨大的威胁和损失。 为了防止低压配电系统发生漏…

2022 China Open Source Report

| 翻译&#xff1a;黄绍雅、岳扬、刘文涛、李思颖 | 编辑&#xff1a;胡欣元 | 设计&#xff1a;胡欣元 As 2022 finally came to an end, we also emerged from the challenging years of the three-year-long COVID pandemic. The new edition of the "China Open Sourc…

06.计算机网络——IP协议

文章目录 网络层IP协议基本概念协议头格式如何解包如何交付网段划分子网掩码特殊的IP地址IP地址的数量限制私有IP地址和公网IP地址路由 网络层 IP协议 IP协议提供一种将数据从A主机送达到B主机的能力&#xff0c;进行网络层的通信。 ​ IP协议 基本概念 主机 —— 配有IP地址…

MQ - 闲聊MQ一二事儿 (Kafka、RocketMQ 、Pulsar )

文章目录 MQ的发展史阶段一&#xff1a;追求解耦阶段二&#xff1a;追求吞吐量与一致性阶段三&#xff1a;追求平台化 MQ的通用架构主题topic、生产者producer、消费者consumer分区partition MQ 存储KafkaGood Design ---> 磁盘顺序写盘Poor Impact---> topic 数量不能过…