【Nodejs】Express模板使用

news2024/12/26 10:42:57

在这里插入图片描述

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 world
    res.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("成功")
    // 重定向到home
    res.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.coloradmin.cn/o/786706.html

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

相关文章

28.JavaWeb-Elasticsearch

1.Elasticsearch概述 Elasticsearch 是一个分布式的全文检索引擎。采用Java语言开发&#xff0c;基于Apache协议的开源项目&#xff0c;具有实时搜索&#xff0c;稳定&#xff0c;可靠&#xff0c;快速的特点。 1.1 全文检索引擎 分为通用搜索引擎&#xff08;百度、谷歌&…

苹果发布安全更新,修复了今年第11个零日漏洞!

苹果公司发布了安全更新&#xff0c;修复针对 iPhone、Mac 和 iPad 的零日漏洞。 苹果公司在一份公告中描述了一个 WebKit 漏洞&#xff0c;该漏洞被标记为 CVE-2023-37450&#xff0c;已在本月初的新一轮快速安全响应 (RSR) 更新中得到解决。 本次修补的另一个零日漏洞是一个…

CAD中让时间日期自动填写的方法

图纸的图签中&#xff0c;通常会有一栏是出图日期。有的单位&#xff0c;也会叫做版本号。即哪天出的图。一般情况下&#xff0c;出图日期就是打图当天。 在这样的前期下&#xff0c;图纸由于存在频繁修改&#xff0c;所以出图日期也会存在变化。还有一种情况&#xff0c;就是出…

(四)FLUX语法

以下内容来自 尚硅谷&#xff0c;写这一系列的文章&#xff0c;主要是为了方便后续自己的查看&#xff0c;不用带着个PDF找来找去的&#xff0c;太麻烦&#xff01; 第 4 章 FLUX语法 4.1 认识FLUX语言 1、Flux是一种函数式的数据脚本语言&#xff0c;它旨在将查询、处理、分…

Docker 网络和资源限制

Docker 网络 一、Docker 网络的概念1、Docker 网络实现原理2、查看容器的输出和日志信息3、Docker 的网络模式&#xff1a;4、容器的网络模式 二、网络模式详解1、host模式2、container模式3、none模式4、bridge模式5、自定义网络 三、资源控制1、CPU 资源控制&#xff08;1&am…

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

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

Java Spring和Spring集成Mybatis

0目录 1.Spring 2.Spring集成Mybatis 1.Spring 特性 IOC&#xff1a;控制反转 AOP&#xff1a;面向切面 Spring组成部分 在SMM中起到的作用&#xff08;粘合剂&#xff09; Spring理念 OOP核心思想【万物皆对象】 Spring核心思想【万物皆Bean组件】 Spring优势 低侵入式 …

解决Jmeter响应内容显示乱码

一、问题描述 jmeter在执行接口请求后&#xff0c;返回的响应体里面出现乱码现象&#xff0c;尽管在调了对应请求的响应编码也无用&#xff0c;现找到解决办法。 二、解决办法 进入到jmeter的bin目录下&#xff0c;找到jmeter.properties&#xff0c;通过按ctrlF快速定位查找到…

手机图片转pdf?两种方法介绍

手机图片转pdf&#xff1f;如今&#xff0c;随着生活的数字化&#xff0c;我们的手机中储存了大量的照片。但是&#xff0c;如果需要将这些照片转换成PDF格式&#xff0c;该怎么办呢&#xff1f;下面&#xff0c;小编就给大家介绍三种方法来实现这一目标。 第一种方法&#xff…

SpringBoot 统一功能处理:用户登录权限校验-拦截器、异常处理、数据格式返回

本篇将要学习 Spring Boot 统一功能处理模块&#xff0c;这也是 AOP 的实战环节 用户登录权限的校验实现接口 HandlerInterceptor WebMvcConfigurer异常处理使用注解 RestControllerAdvice ExceptionHandler数据格式返回使用注解 ControllerAdvice 并且实现接口 ResponseBody…

基于STM32CubeMX和keil采用STM32F407的基本定时器中断实现LED闪烁

文章目录 前言1. 电路原理图理解2. 基本定时器2.1 STM32定时器中断的流程&#xff1a;2.2 部分参数详解2.2.1 时钟源2.2.2 预分频系数2.2.3 自动重装载值 3. STM32CubeMX参数配置3.1GPIO配置3.2 时钟配置3.2 配置定时器相关参数3.3 Debug配置3.4 中断配置3.5 代码生成 4. keil代…

【每日一题】—— B. Ternary String (Educational Codeforces Round 87 (Rated for Div. 2))

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

ftp传文件越来越慢的原因,以及解决方案

FTP 是一种常用的文件传输协议&#xff0c;它基于客户端-服务端模型工作&#xff0c;允许用户通过网络传输文件。但是&#xff0c;有时候在使用 FTP 的过程中&#xff0c;文件传输速度会逐渐变慢&#xff0c;这给用户带来了很多困扰。本文将分析 FTP 传文件变慢的原因&#xff…

Jwt(Json web token)——从Http协议到session+cookie到Token Jwt介绍 Jwt的应用:登陆验证的流程

目录 引出从Http协议到session&cookie到TokenHTTP协议session & cookiesessioncookie为什么需要session & cookie? JavaEE传统解决长连接方案问题&#xff1a;分布式不适用解决方案&#xff1a;令牌Token Jwt&#xff0c;Json web tokenjwt的结构Header加密算法Ba…

MySQL Workbench的使用

MySQL Workbench 是一款专门为 MySQL 设计的可视化数据库管理软件&#xff0c;我们可以在自己的计算机上&#xff0c;使用图形化界面远程管理 MySQL 数据库。 MySQL Workbench 的初始界面如下图所示。 点击方框后会进入这个界面&#xff0c;这样就与数据库连接完毕了 使用 Wo…

Docker 全栈体系(四)

Docker 体系&#xff08;高级篇&#xff09; 一、Docker复杂安装 1. 安装mysql主从复制 主从搭建步骤 新建主服务器容器实例3307 docker run -p 3307:3306 --name mysql-master \ -v /mydata/mysql-master/log:/var/log/mysql \ -v /mydata/mysql-master/data:/var/lib/mysq…

SpringBoot-4

Spring Boot 使用 slf4j 日志 在开发中经常使用 System.out.println()来打印一些信息&#xff0c;但是这样不好&#xff0c;因为大量的使用 System.out 会增加资源的消耗。实际项目中使用的是 slf4j 的 logback 来输出日志&#xff0c;效率挺高的&#xff0c;Spring Boot 提供…

【go语言学习笔记】02 Go语言高效并发

文章目录 一、并发基础1. 协程&#xff08;Goroutine&#xff09;2. Channel2.1 声明2.2 无缓冲 channel2.3 有缓冲 channel2.4 关闭 channel2.5 单向 channel2.6 selectchannel 示例 二、同步原语1. 资源竞争2. 同步原语2.1 sync.Mutex2.2 sync.RWMutex2.3 sync.WaitGroup2.4 …

2023 NVIDIA 创乐博 CUDA 线上训练营笔记

一、学习ubuntu 2.1修改权限 linux指令学习 cd course //进入course目录 ls //列出文件夹 clean //清屏幕//---修改权限 chmod gow text //给text文件夹添加可写权限 chmod gw make.ip chmod 755 text 可读可写可执行&#xff08;user goup o…

MySQL MHA高可用配置及故障切换

1&#xff0e;什么是 MHA MHA&#xff08;Master High Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的…