【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 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 <%# 我的注释 %>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

spring eurake中使用IP注册

在开发spring cloud的时候遇到一个很奇葩的问题&#xff0c;就是服务向spring eureka中注册实例的时候使用的是机器名&#xff0c;然后出现localhost、xxx.xx等这样的内容&#xff0c;如下图&#xff1a; eureka.instance.perferIpAddresstrue 我不知道这朋友用的什么spring c…

【Redis】高级篇: 一篇文章讲清楚Redis的单线程和多线程

目录 面试题 Redis到底是多线程还是单线程&#xff1f; 简单回答 详解 Redis的“单线程” Redis为什么选择单线程&#xff1f; 后来Redis为什么又逐渐加入了多线程特性&#xff1f; Redis为什么快&#xff1f; 回答 IO多路复用 Unix网络编程的5种IO模型 主线程和IO…

常见面试题之常见技术场景

1. 单点登录这块怎么实现的&#xff1f; 1.1 概述 单点登录的英文名叫做&#xff1a;Single Sign On&#xff08;简称 SSO &#xff09;&#xff0c;只需要登录一次&#xff0c;就可以访问所有信任的应用系统。 在以前的时候&#xff0c;一般我们就单系统&#xff0c;所有的…

DSA之查找(1):线性表的查找

文章目录 0 知识回顾1 查找1.1 查找的概念 2 线性表的查找2.1 顺序查找2.1.1 顺序查找算法2.1.2 顺序查找的性能分析2.1.3 顺序查找的特点 2.2 折半查找&#xff08;二分&#xff09;2.2.1 折半查找算法2.2.2 折半查找的性能分析2.2.3 折半查找的特点 2.3 分块查找2.3.1 分块查…

0基础系列C++教程 从0开始 第二课

0基础系列C教程 从0开始 第二课来了&#xff01; 复习第一课内容 1 怎么输出数字“1919810”&#xff1f; 答案&#xff08;关键语句&#xff09;: cout<<"1919810"; 2 怎么输出字符串“Hello World”&#xff1f; 答案&#xff08;关键语句&#xff09;&a…

梯度提升树的基本思想

目录 1. 梯度提升树 VS AdaBoost 2. GradientBoosting回归与分类的实现 2.1 GradientBoosting回归 2.2 GradientBoosting分类 1. 梯度提升树 VS AdaBoost 梯度提升树&#xff08;Gradient Boosting Decision Tree&#xff0c;GBDT&#xff09;是提升法中的代表性算法&#…

朝花夕拾思维导图怎么画?看看这种绘制方法

朝花夕拾思维导图怎么画&#xff1f;绘制思维导图的好处有很多&#xff0c;首先它可以帮助人们更好地组织和管理知识&#xff0c;提高工作效率和学习效果。其次&#xff0c;绘制思维导图可以帮助人们更好地记忆知识点和理解知识点。总之&#xff0c;绘制思维导图可以帮助人们更…

cookie

目录 一、会话技术 二、Cookie 1.创建Cookie 2.使用response响应Cookie给客户端&#xff08;浏览器&#xff09; 3. 获取Cookie 三、Cookie的原理解析 1. 基本实现原理 &#xff08;1&#xff09;响应头&#xff1a;set—cookie &#xff08;2&#xff09;请求头&…

基于 Graviton2处理器构建容器化基因分析工作负载

概述 相对于基于传统 x86架构的处理器来说&#xff0c;Amazon 设计的基于 ARM 架构的 Graviton 处理器为 EC2中运行的云工作负载提供了更佳的性价比。基于 Graviton2 的实例支持广泛的通用型、突发型、计算优化型、内存优化型、存储优化型和加速计算型工作负载&#xff0c;包括…

数字IC实践项目(7)—CNN加速器的设计和实现(付费项目)

数字IC实践项目&#xff08;7&#xff09;—基于Verilog的CNN加速器&#xff08;付费项目&#xff09; 写在前面的话项目整体框图神经网络框图完整电路框图 项目简介和学习目的软件环境要求 资源占用&板载功耗总结 写在前面的话 项目介绍&#xff1a; 卷积神经网络硬件加速…

【C++ 重要知识点总结】自定义类型-类和结构体

类 类的基本特性 数据抽象和封装继承多态 1 类的构成——抽象 概念 数据抽象是一种依赖于接口和实现的分离的编程技术。类的接口包括用户所能执行的操作&#xff1b;类的实现包括类的数据成员、负责接口实现的函数体以及定义类所需要的的各种私有函数。封装实现了类的接口和实…

数据服务:保障数据安全、提升数据价值的利器

04-08把元数据以及在它基础上的五大应用场景&#xff1a;数据发现&#xff08;数据地图&#xff09;、指标管理、模型设计、数据质量、成本优化&#xff0c;全部讲完。这部分内容对应的就是数据中台OneData 方法论。学完这部分内容&#xff0c;你已了解OneData方法论在企业内部…

【业务功能篇55】Springboot+easyPOI 导入导出

Apache POI是Apache软件基金会的开源项目&#xff0c;POI提供API给Java程序对Microsoft Office格式档案读和写的功能。 Apache POI 代码实现复杂&#xff0c;学习成本较高。 Easypoi 功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出…

MySQL基础扎实——MySQL中各种数据类型之间的区别

在MySQL中&#xff0c;有各种不同的数据类型可供选择来存储不同类型的数据。下面是一些常见的数据类型以及它们之间的区别&#xff1a; 整数类型&#xff1a; TINYINT&#xff1a;1字节&#xff0c;范围为-128到127或0到255&#xff08;无符号&#xff09;。SMALLINT&#xff1…

项目文档管理的基本指南

项目文档是一种关键的项目管理资源&#xff0c;它可以提供清晰度&#xff0c;保证参与项目的每个人都在同一页面上&#xff0c;从而确保项目按时、按预算完成。 本文将讨论项目文档的重要性、如何在项目中使用项目文档以及选择好合适的项目文档管理软件的技巧。 什么是项目文…

代码随想录算法学习心得 49 | 647.回文子串、516.最长回文子序列...

一、最长回文子序列 链接&#xff1a;力扣 描述&#xff1a;给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 思…

【C++】开源:Boost网络库Asio配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Asio网络库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次…

Form Generator 扩展子表单组件之表单校验(超详细)

一、form-generator是什么?✨ ⭐️ 🌟 form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的…

【搜索引擎Solr】Apache Solr 神经搜索

Sease[1] 与 Alessandro Benedetti&#xff08;Apache Lucene/Solr PMC 成员和提交者&#xff09;和 Elia Porciani&#xff08;Sease 研发软件工程师&#xff09;共同为开源社区贡献了 Apache Solr 中神经搜索的第一个里程碑。 它依赖于 Apache Lucene 实现 [2] 进行 K-最近邻…

【Apollo学习笔记】—— Routing模块

Routing模块功能 Apollo的routing模块读取高精地图原始信息&#xff0c;用于根据输入RoutingRequest信息在base_map中选取匹配最近的点作为导航轨迹的起点和终点&#xff0c;读取依据base_map生成的routing_map作为生成topo_graph的&#xff0c;然后通过Astar算法在拓扑图中搜…