当前位置: 首页 > news >正文

node插件express(路由)的插件使用(二)——body-parser和ejs插件的基本使用

文章目录

  • 前言
  • 一、express使用中间件body-parser获取请全体的数据
    • 1. 代码
    • 2. 效果
  • 二、express使用ejs(了解即可)
    • 1.安装
    • 2.作用
    • 3.基本使用
      • (1)代码
      • (2)代码分析和效果
    • 4.列表渲染
      • (1)代码
      • (2)代码分析和效果
    • 5.if的条件渲染
      • (1)代码
      • (2)代码分析和效果


前言

提示:希望你了解express后进行查看后面的内容。


一、express使用中间件body-parser获取请全体的数据

1. 代码

// 1:导入express body-parser
const express = require('express')
const bodyParser = require('body-parser')// 2:创建应用对象
const app = express();// 3:解析querystring格式请全体的中间件
const urlenncodeParser = bodyParser.urlencoded({extended: false})// 5:创建路由规则
app.get('/login', (req, res) => {// 6:响应html文件res.sendFile(__dirname + '/06_index.html')
})// 7:post规则(点击html页面的登录触发回调函数)
app.post('/login', urlenncodeParser, (req, res) => {console.log(req.body); // 获取用户名和密码res.send('获取用户数据')
})// 4:监听并启动服务器
app.listen(9000, () => {console.log('服务器启动了')
})

2. 效果

在这里插入图片描述

二、express使用ejs(了解即可)

ejs 中文官网:https://ejs.bootcss.com/#install

1.安装

npm install ejs

2.作用

将html页面和js逻辑拆分开来,

3.基本使用

(1)代码

js 文件

// 1:导入express body-parser
const fs = require('fs')
const ejs = require('ejs')const name = '张三'
const age = 18let str = fs.readFileSync('./07_.html').toString();/*** ejs.render* str, data, options* @str str 参数1,渲染的html页面* @data Object 参数2,传递给html页面的参数* @options 参数3,配置* 作用:输出渲染后的 HTML 字符串*/let renderStr = ejs.render(str, { name: name, age: age });console.log(renderStr);

html 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ejs初体验</title>
</head>
<body><h1>我是 <%= name %>, 今年<%= age %></h1>
</body>
</html>

(2)代码分析和效果

在这里插入图片描述

4.列表渲染

(1)代码

js 文件

// 1:导入express body-parser
const fs = require('fs')
const ejs = require('ejs')const nameList = ['张三', '李四', '王五', '赵六']let html = fs.readFileSync('./08_.html').toString();let renderStr = ejs.render(html, { nameList: nameList });console.log(renderStr);

html 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ejs列表渲染</title>
</head>
<body><% nameList.forEach(item => { %><li><%= item %></li><% }) %>
</body>
</html>

(2)代码分析和效果

在这里插入图片描述

5.if的条件渲染

(1)代码

js 文件

// 1:导入express body-parser
const fs = require('fs')
const ejs = require('ejs')const isEat = true;let html = fs.readFileSync('./09_.html').toString();let renderStr = ejs.render(html, { isEat: isEat });console.log(renderStr);

html 文件

<body><header><% if(isEat){ %><span>我吃了饭</span><% }else{ %><span>我还没吃饭</span><% } %></header>
</body>

(2)代码分析和效果

在这里插入图片描述

相关文章:

node插件express(路由)的插件使用(二)——body-parser和ejs插件的基本使用

文章目录 前言一、express使用中间件body-parser获取请全体的数据1. 代码2. 效果 二、express使用ejs&#xff08;了解即可&#xff09;1.安装2.作用3.基本使用&#xff08;1&#xff09;代码&#xff08;2&#xff09;代码分析和效果 4.列表渲染&#xff08;1&#xff09;代码…...

学习c++的第十天

目录 类 & 对象 类定义 对象的建立和使用 构造函数(Constructor) 析构函数(Destructor) 拷贝构造函数 扩展知识 this指针 友元函数的使用方法 友元类的使用方法 常数据的使用及初始化 类 & 对象 什么是类&#xff1f;什么是对象&#xff1f;对于面向对象的…...

895. 最长上升子序列

题目&#xff1a; 895. 最长上升子序列 - AcWing题库 思路&#xff1a;dp 代码&#xff1a; #include<iostream> #include<cstdio> #include<cmath> using namespace std; typedef long long ll; const int N1010; int f[N];//表示以i结尾的最大上升子序列…...

岩土工程铁路桥梁监测中智能振弦传感器的应用方案

岩土工程铁路桥梁监测中智能振弦传感器的应用方案 智能振弦传感器是近年来岩土工程和桥梁监测领域的重要技术之一。它具有高灵敏度、高精度、高可靠性等优点&#xff0c;并且能够实时对结构物振动进行监测和分析。本文针对岩土工程铁路桥梁监测中智能振弦传感器的应用方案进行…...

【数智化人物展】觉非科技CEO李东旻:数据闭环,智能驾驶数智时代发展的新引擎...

李东旻 本文由觉非科技CEO李东旻投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 数智化的主要作用是帮助决策。它的核心是大数据&#xff0c;以大数据为基础&#xff0c;匹配合适的AI技术&#xff0c;促使数…...

字符型液晶显示器LCD 1602的显示控制(Keil+Proteus)

前言 趁机把LCD 1602的实验完成了&#xff0c;那个电路图有几个地方没弄懂&#xff0c;但是去掉也没有报错&#xff0c;就没管了。 LCD1602_百度百科 (baidu.com)https://baike.baidu.com/item/LCD1602/6014393?frge_ala LCD1602液晶显示屏通过电压来改变填充在两块平行板之…...

为什么我学了几天 STM32 感觉一脸茫然?

今日话题&#xff0c;为什么我学了几天 STM32 感觉一脸茫然&#xff1f;从51单片机过渡到STM32&#xff0c;首先需要理解“单片机”究竟是什么&#xff0c;编程语言虽然重要&#xff0c;但也需要深入理解。51单片机的控制相对简单&#xff0c;基本是函数调用&#xff0c;通过给…...

DC-DC降压芯片120V转12V5A大功率SL3038电源芯片

本文将介绍一款DC-DC降压芯片&#xff0c;将120V的电压转换为12V5A的大功率输出&#xff0c;使用SL3038电源芯片实现。在开始介绍之前&#xff0c;我们先来了解一下DC-DC降压芯片和SL3038电源芯片的基本原理和特点。 DC-DC降压芯片是一种常见的电源管理芯片&#xff0c;它可以将…...

CE认证木质玩具TUME外贸出口测试报告解析

木制玩具&#xff0c;顾名思义&#xff0c;使用木制原料制成的玩具。木制玩具具有牢固耐玩、安全卫生&#xff0c;摔不碎&#xff0c;不生锈&#xff0c;无锋利棱角的特点。深受大家的喜爱。木质玩具出口需办理CE认证。 CE认证是一种安全认证标志&#xff0c;代表欧盟认可的&a…...

oracle_19c 安装

oracle安装部署 1、安装docker,docker-compose环境。 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun curl -L "https://github.com/docker/compose/releases/download/1.14.0-rc2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/b…...

随时随地时时刻刻使用GPT类应用

疑问 很多人说GPT的广泛使用可能会使人们失业&#xff0c;会对一些互联网公司的存活造成挑战&#xff0c;那么这个说法是真的吗&#xff1f; 这个说法并不完全准确。虽然GPT等AI技术的广泛应用可能会对某些行业和职业产生影响&#xff0c;但并不意味着它会导致人们失业或互联网…...

运动检测辅助系统

运动检测辅助系统是一种结合了传感器技术、数据处理技术和智能算法的系统&#xff0c;旨在帮助用户监测、评估和改善其运动行为及健康状况。这类系统通常利用多种传感器&#xff08;如运动传感器、摄像头、心率监测器等&#xff09;采集用户的运动数据&#xff0c;并通过数据处…...

0002Java安卓程序设计-基于Uniapp+springboot菜谱美食饮食健康管理App

文章目录 开发环境 《[含文档PPT源码等]精品基于Uniappspringboot饮食健康管理App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功 编程技术交流、源码分享、模板分享、网课教程 &#x1f427;裙&#xff1a;776871563 功能介绍&#xff…...

LeetCode算法题解(回溯)|39. 组合总和、40. 组合总和 II、131. 分割回文串

一、39. 组合总和 题目链接&#xff1a;39. 组合总和 题目描述&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意…...

基于springboot实现招聘信息管理系统项目【项目源码+论文说明】

基于springboot实现招聘信息管理系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括招聘信息管理系统的网络应用&#xff0c;在外国招聘信息管理系统已经是很普遍的方式&#xff0c;不过国内的线上管理系统可能还…...

Freeswitch实现软电话功能

1.话务步骤 分机注册->登录->拨打电话-> /*<--注册分机-->*/ EslMessage eslMessage1 inboundClient.sendApiCommand("callcenter_config agent set contact", "21009default user/1000"); System.out.println("#####dial eslMessa…...

RMI初探

接口 import java.rmi.Remote; import java.rmi.RemoteException;public interface IFoo extends Remote {String say(String name) throws RemoteException; }import java.rmi.Remote; import java.rmi.RemoteException;public interface IBar extends Remote {String buy(Str…...

NLP之BM25:BM25算法的简介、相关库、案例应用之详细攻略

NLP之BM25:BM25算法的简介、相关库、案例应用之详细攻略 目录 相关文章 NLP之BM25:BM25算法的简介、相关库、案例应用之详细攻略 Py之rank_bm25:rank_bm25的简介、安装、使用方法 BM25算法的简介...

YOLOv5改进,全维动态卷积

目录 一、理论部分 网络结构 实验结果 二、应用到YOLOv5 代码 yaml配置文件...

TypeScript学习Ts的类型声明,关于类

TypeScript是什么&#xff1f; 以JavaScript为基础构建的语言一个JavaScript的超集可以在任何支持JavaScript的平台上执行TypeScript扩展了JavaScript并添加了类型TS不能被JS解析器直接执行 TypeScript开发环境搭建 下载Node.js安装Node.js使用npm全局安装TypeScript&#x…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...