Node.js 学习笔记 express框架

express

  • express 使用
    • express下载
    • express 初体验
  • express 路由
    • 什么是路由
    • 1路由的使用
      • 验证的方法
    • 2获取请求报文参数
    • 3获取路由参数
    • 4响应设置
      • 响应报文
  • express 中间件
    • 5中间件
      • 全局中间件
      • 路由中间件
    • 6静态资源中间件
      • 注意事项
      • 案例
    • 7请求体数据
    • 8防盗链
      • 实现防盗链
    • 9路由模块化
      • router
  • EJS 模板引擎
    • 初体验
    • EJS 常用语法
  • express-generator

尚硅谷node-express视频学习笔记

express 使用

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架,官方网址:https://www.expressjs.
com.cn/
简单来说,express 是一个封装好的工具包,封装了很多功能,便于我们开发 WEB 应用(HTTP 服务)

express下载

express 本身是一个 npm 包,所以可以通过 npm 安装

npm init
npm i express

express 初体验

  1. 创建 JS 文件,键入如下代码
//1. 导入 express
const express = require('express');//2. 创建应用对象
const app = express();//3. 创建路由规则
app.get('/home', (req, res) => {
res.end('hello express server');
});//4. 监听端口 启动服务
app.listen(3000, () =>{
console.log('服务已经启动, 端口监听为 3000...');
});
  1. 命令行下执行该脚本
node <文件名>
# 或者
nodemon <文件名>
  1. 然后在浏览器就可以访问 http://127.0.0.1:3000/home

express 路由

什么是路由

官方定义: 路由确定了应用程序如何响应客户端对特定端点的请求

1路由的使用

一个路由的组成有 请求方法 , 路径 和 回调函数 组成

express 中提供了一系列方法,可以很方便的使用路由,使用格式如下:

app.<method>(path,callback)
  • 代码示例
//导入 express
const express = require('express');//创建应用对象
const app = express();//创建 get 路由
app.get('/home', (req, res) => {
res.send('网站首页');
});//首页路由
app.get('/', (req,res) => {
res.send('我才是真正的首页');
});//创建 post 路由
app.post('/login', (req, res) => {
res.send('登录成功');
});//匹配所有的请求方法 不管是get还是post及其他
app.all('/search', (req, res) => {
res.send('1 秒钟为您找到相关结果约 100,000,000 个');
});//自定义 404 路由
app.all("*", (req, res) => {
res.send('<h1>404 Not Found</h1>')
});app.listen(3000,()=>{console.log('服务已经启动, 端口监听为 3000...');
})

验证的方法

① 浏览器输入 http://localhost:3000/home

可以验证get请求

② form表单

可以验证post请求
在这里插入图片描述

这里不涉及跨域问题,因为form没有使用ajax请求

2获取请求报文参数

express 框架封装了一些 API 来方便获取请求报文中的数据,并且兼容原生 HTTP 模块的获取方式

原生的HTTP模块的方法 method、url、httpVersion、headers

Express独有的方法path、query、ip、get

//导入 express
const express = require('express');//创建应用对象
const app = express();//获取请求的路由规则
app.get('/request', (req, res) => {//1. 获取报文的方式与原生 HTTP 获取方式是兼容的
console.log(req.method); //请求方法
console.log(req.url);//如果请求是http://localhost:3000/home 打印/home
console.log(req.httpVersion);
console.log(req.headers); //请求头//2. express 独有的获取报文的方式
console.log(req.path);//如果请求是http://localhost:3000/home 打印/home
console.log(req.query); //获取查询字符串 『相对重要』
console.log(req.ip);客户端ip
console.log(req.get('host')); // 获取指定的请求头
res.send('请求报文的获取');
});
//启动服务
app.listen(3000, () => {
console.log('启动成功....')
})

3获取路由参数

req.params.XXXXX

路由参数指的是 URL 路径中的参数(数据)

在这里插入图片描述

0240514111354211.png&pos_id=img-jDlrJAey-1715677072203)

服务端会根据路径中的数字返回不同的商品

  • 示例
//路由参数
app.get('/10003.html',(req,res)=>{res.setHeader('content-type', 'text/html;charset=utf-8') //不乱码res.end('商品详情')
})
  • 问题是商品不止一个,通过/:id.html通配符一起配置
//路由参数
app.get('/:id.html',(req,res)=>{console.log(req.params.id) //这个id和上面id保持一致res.setHeader('content-type', 'text/html;charset=utf-8') //不乱码res.end('商品详情')
})

4响应设置

express 框架封装了一些 API 来方便给客户端响应数据,并且兼容原生 HTTP 模块的获取方式

//获取请求的路由规则
app.get("/response", (req, res) => {//1. express 中设置响应的方式兼容 HTTP 模块的方式res.statusCode = 404;res.statusMessage = 'xxx';res.setHeader('abc','xyz');res.write('响应体');res.end('xxx');//2. express 的响应方法res.status(500); //设置响应状态码res.set('xxx','yyy');//设置响应头res.send('中文响应不乱码');//设置响应体//连贯操作res.status(404).set('xxx','yyy').send('你好朋友')//3. 其他响应res.redirect('http://atguigu.com') // 跳转响应 重定向res.download(__dirname+'./package.json');//下载响应res.json();//响应 JSONres.sendFile(__dirname + '/home.html') //响应文件内容});

响应报文

在这里插入图片描述

  • 相应报文的组成

server:BWS/1.1记录了服务器所属的技术;content-type 记录了与响应body相关的一些内容,声明响应体的内容的格式与字符集。content-length记录了响应体内容的长度,单位是字节。

express 中间件

5中间件

什么是中间件

中间件(Middleware)本质是一个回调函数

中间件函数 可以像路由回调一样访问 请求对象(request) , 响应对象(response)

中间件的作用

中间件的作用 就是 使用函数封装公共操作,简化代码

中间件的类型

全局中间件

路由中间件

全局中间件

每一个请求 到达服务端之后 都会执行全局中间件函数。区别路由中间件,只有匹配到某一个路由才会访问路由中间件。

//中间件函数
let recordMiddleware = function(req,res,next){//实现功能代码let {url, ip} = req fs.appendFileSync(path.resolve(__dirname, './access.log'), `${url}, ${ip}\r\n`)//执行next函数(当如果希望执行完中间件函数之后,仍然继续执行路由中的回调函数,必须调用next)next();
}//使用中间件
app.use(recordMiddleware)

路由中间件

如果 只需要对某一些路由进行功能封装 ,则就需要路由中间件

在这里插入图片描述

6静态资源中间件

静态资源:内容长时间不发生改变的资源 CSS JS 图片

静态资源目录/也是网站根目录:浏览器把请求发送到服务端之后,服务端到哪个目录下找文件,哪个目录就是网站根目录。

const express = require('express')const app = express()//静态资源中间件设置
app.use(express.static(__dirname+'/public'))app.get('/home',(req,res)=>{// console.log(req.url);res.end('home')
})app.listen(3000,()=>{console.log('服务已经启动, 端口监听为 3000...');
})

在网址中输入http://localhost:3000/10_test.html

在这里插入图片描述

注意事项

  1. index.html 文件为默认打开的资源。

    http://localhost:3000/index.html简写为http://localhost:3000

  2. 如果静态资源与路由规则同时匹配,谁先匹配谁就响应

    路由规则的意思是app.get(‘/’,(req,res)=>{…})

    看这一句话和app.use的上下位置

  3. 路由响应动态资源,静态资源中间件响应静态资源

案例

7请求体数据

第一步:安装 npm i body-parser

第二步:导入 body-parser 包const bodyParser = require('body-parser');

第三步:获取中间件函数

请求体有两种格式。

//处理 querystring 格式的请求体
let urlParser = bodyParser.urlencoded({extended:false}));//处理 JSON 格式的请求体
let jsonParser = bodyParser.json();

第四步:设置路由中间件,然后使用 request.body 来获取请求体数据

app.post('/login', urlParser, (request,response)=>{
//获取请求体数据
//console.log(request.body);
//用户名
console.log(request.body.username);
//密码
console.log(request.body.userpass);
response.send('获取请求体数据');
});

获取到的请求体数据:

[Object: null prototype] { username: 'admin', userpass: '123456' }

  • 代码

用form表单发送post请求

  <form action="http://127.0.0.1:3000/login" method="post">用户名 <input type="text" name="username"><br>密码 <input type="password" name="password"> <br><button>登录</button></form>

node.js

const express = require('express')
const app = express()
//引入中间件
const bodyParser = require('body-parser')
let urlParser = bodyParser.urlencoded({extended:false})//客户端请求login界面的时候,把写好的11_form.html发给它
app.get('/login',(req,res)=>{res.sendFile(__dirname+'/11_form.html')
})//客户端在login界面提交表单的时候,服务端接收
//利用中间件,body-parser,路由中间件处理之后,req身上会多出一个body参数
app.post('/login',urlParser,(req,res)=>{console.log('123');console.log(req.body);res.send('获取用户数据')
})app.listen(3000,()=>{console.log('服务已经启动, 端口监听为 3000...');
})

8防盗链

禁止该域名之外的其他网站请求资源

网站通过报文请求头中的referer判断,如果不是相同域名,就会拒绝访问

实现防盗链

利用中间件

//导入 express
const express = require('express');//创建应用对象
const app = express();//声明中间件
app.use((req, res, next) => {//检测请求头中的 referer 是否为 127.0.0.1//获取 refererlet referer = req.get('referer');if(referer){//referer是完整的网站,这一不是为了提取出中间不同的部分let url = new URL(referer);//实例化let hostname = url.hostname;//获取 hostname//判断if(hostname !== '127.0.0.1'){//响应 404 res.status(404).send('<h1>404 Not Found</h1>');return;}}next();
});//静态资源中间件设置
app.use(express.static(__dirname + '/public'));//监听端口, 启动服务
app.listen(3000, () => {console.log('服务已经启动, 端口 3000 正在监听中....')
})

注意这里静态资源目录(根目录)

在这里插入图片描述

图片的src是有网址的

9路由模块化

上面是前台路由(展示数据),下面是后台路由(管理员查看)

在这里插入图片描述

router

借助到router

router: express 中的 Router 是一个完整的中间件和路由系统,可以看做是一个小型的 app 对象。

  • 拆分出前台路由:

在这里插入图片描述

EJS 模板引擎

模板引擎】:模板引擎是分离 用户界面和业务数据 的一种技术。

简单理解就是分离HTML和JS的,JS指的是服务端的JS

【EJS】:EJS 是一个高效的 Javascript 的模板引擎

官网: https://ejs.co/ 中文站:https://ejs.bootcss.com/

初体验

  • 下载安装EJS

npm i ejs --save

补充知识:npm下载的时候会向外寻找,所以只要是在同一个大文件中,不管在哪个小路径,npm i统一下载到一个地方。

  • 代码示例
//1.引入ejs
const ejs = require('ejs');
//2.定义数据
let person = ['张三','李四','王二麻子'];
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记,作用是输出当前表达式的执行结构
let res = ejs.render(<%= person.join(",") %>, {person:person});
//4.输出结果
console.log(res);//案例2
let china = '中国'
let res2 = ejs.render('我爱你 <%= china %>', {china:china})
  • 具体项目中使用

找到 <%= %>标识符,把后面的输入填入

在这里插入图片描述

EJS 常用语法

执行JS代码 <% code %>

输出转义的数据到模板上 <%= code %>

输出非转义的数据到模板上 <%- code %>

express-generator

  • npm i -g express-generator
  • express -e 15_generator: -e:添加EJS支持,目标文件夹

在这里插入图片描述

  • npm i 安装依赖

  • npm start 运行项目

其实入口文件是 bin/www

在这里插入图片描述

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

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

相关文章

【解决】Unity Build 应用程序运行即崩溃问题

开发平台&#xff1a;Unity 2021.3.7f1c1   一、问题描述 编辑器 Build 工程结束&#xff0c;但控制台 未显示 Build completed with a result of Succeeded [时间长度] 信息。该情况下打包流程正常&#xff0c;但应用程序包打开即崩溃。   二、问题测试记录 测试1&#xf…

CSS-flex布局

目录 flex布局组成 &#xff08;flexible box弹性布局&#xff09; display属性值&#xff1a;flex justify-content (主轴对齐方式) flex-start flex-end ​编辑 flex-center space-between 侧轴对齐方式 stretch center flex-end flex-direction (修改…

【C语言】4.C语言数组(1)

文章目录 1. 数组的概念2. 一维数组的创建和初始化2.1 数组创建2.2 数组的初始化2.3 数组的类型 3. 一维数组的使用3.1 数组下标3.2 数组元素的打印3.3 数组的输⼊ 4. 一维数组在内存中的存储5. sizeof计算数组元素个数 1. 数组的概念 数组是一组相同类型元素的集合。 数组分…

我和jetson-Nano的故事(10)——安装OpenCV3.2.0

1. 仓库地址 opencv https://opencv.org/releases/page/6/opencv_contrib https://github.com/opencv/opencv_contrib/tree/3.2.0 2. cmake-gui安装 安装指令 sudo apt-get install cmake-qt-gui如果安装过程中入到下面的问题 可以按照以下方法解决 sudo apt --fix-broke…

BakedSDF: Meshing Neural SDFs for Real-Time View Synthesis 论文阅读

&#xff08;水一篇博客&#xff09; 项目主页 BakedSDF: Meshing Neural SDFs for Real-Time View Synthesis 作者介绍 是 Mildenhall 和 Barron 参与的工作&#xff08;都是谷歌的&#xff09;&#xff0c;同时一作是 Lipman 的学生&#xff0c;VolSDF 的一作。本文引用…

旧手机-基于Termux配置服务器(不用拿去换钢盆了)

Hi&#xff0c;大家好&#xff0c;我是抢老婆酸奶的小肥仔。 大家用手机这么多年了&#xff0c;手上或多或少都有一两个被替换下来的旧手机&#xff0c;也不用拿去换啥钢盆了&#xff0c;使用Termux可以将旧手机改造成一个服务器。 不多说&#xff0c;直接开干。 1、安装app…

基于springboot+vue+Mysql的在线答疑系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

经纬恒润助力AR-HUD市场发展,国产供应商共筑行业新篇章

根据盖世汽车研究院数据显示&#xff0c;1-2月经纬恒润AR-HUD出货量已达到国产供应商前五。未来&#xff0c;经纬恒润将持续努力&#xff0c;推动AR-HUD发展&#xff0c;共筑行业新篇章&#xff01; 了解更多&#xff1a; 请致电 010-64840808转6115或发送邮件至market_depthi…

MySQL创建索引报错 Specified key was too long;max key length is 1000 bytes.

MySQL对创建索引的大小有限制&#xff0c;一般索引键最大长度总和不能超过1000个字节。 问题描述 MySQL创建索引时报错 Specified key was too long;max key length is 1000 bytes. 解决办法 (1) 修改存储引擎 InnoDB的索引字段长度限制大于MyISAM&#xff0c;可以尝试改成…

【面试必看】MySQL部分

MySQL 1. 基础 1. 什么是关系型数据库&#xff1f; 一种建立在关系模型的基础上的数据库。关系模型表明了数据库中所存储的数据之间的联系&#xff08;一对一、一对多、多对多&#xff09;。各种表中&#xff08;比如用户表&#xff09;&#xff0c;表中的每一行就存放着一条…

CAPL入门之使用CAPL记录测试Logging

0 前言 以往测试的log都是直接从trace导出&#xff0c;但是最近发现trace中能导出的数据是有限的&#xff0c;如果测试的时间过长&#xff0c;新的数据就会把之前的数据全部覆盖&#xff0c;并且对于长时间的测试&#xff0c;直接导出trace的内容也会造成查找效率低下的问题。因…

【计算机网络】HTTP协议详解实战抓包分析教程

文章目录 1.HTTP简介2.HTTP报文的结构3.HTTP协议中空行的作用4.uri和url的区别5.HTTP请求5.1 HTTP请求方法5.2 HTTP请求报头 6.HTTP响应6.1 状态码 7.HTTP位于应用层(基于TCP)8.非持久和持久连接8.1 非持久连接8.2 持久连接 1.HTTP简介 HTTP&#xff08;Hypertext Transfer Pr…

Springboot+mybatis-plus+dynamic-datasource+继承DynamicRoutingDataSource切换数据源

Springbootmybatis-plusdynamic-datasource继承DynamicRoutingDataSource切换数据源 背景 最近公司要求支持saas&#xff0c;实现动态切换库的操作&#xff0c;默认会加载主租户的数据源&#xff0c;其他租户数据源在使用过程中自动创建加入。 解决问题 1.通过请求中设置租…

用户页面触发点击事件和 js 执行点击事件的区别

文章目录 情景展示情况一&#xff1a;用户点击页面触发情况二&#xff1a;通过 js 触发点击 结果分析情况一情况二 其实这个谜底揭开之后&#xff0c;第一反应都是&#xff0c;哦~&#xff0c;非常简单&#xff0c;但是细节决定成败&#xff0c;我被这个细节毁掉了&#xff0c;…

【十大排序算法】----选择排序(详细图解分析+实现,小白一看就会)

目录 一&#xff1a;选择排序——原理 二&#xff1a;选择排序——分析 三&#xff1a;选择排序——实现 四&#xff1a;选择排序——优化 五&#xff1a;选择排序——效率 一&#xff1a;选择排序——原理 选择排序的原理&#xff1a;通过遍历数组&#xff0c;选出该数组…

精酿啤酒:精酿文化的传承者与创新者

在啤酒的世界中&#xff0c;精酿啤酒是一种与众不同的文化现象。这种文化源于对啤酒品质的追求和对传统工艺的尊重&#xff0c;但在不断发展中也不断涌现出创新。作为精酿啤酒的品牌&#xff0c;Fendi club啤酒不仅是这种文化的传承者&#xff0c;更是创新者。 Fendi club啤酒始…

香港电讯高效网络,助力新消费品牌抓住拓展香港市场新风口

自今年初香港与内地全面恢复通关&#xff0c;两地同胞跨境消费热潮持续升温。港人“北上”消费掀起风潮的同时&#xff0c;香港市场也成为内地新消费品牌拓展的热门目标。从糕点、茶饮、连锁餐饮到服饰&#xff0c;越来越多内地品牌进驻香港。新消费品牌要想在香港开设门店&…

QT部分学习笔记

文章目录 1.前言注意问题2.学习历程2.0 创建项目 快捷键&#xff1a;2.1 创建按钮2.2 对象树2.3 调试输出2.4 QT坐标系2.5 信号和槽 3.Qmainwindow3.1 窗口菜单栏创建3.2 工具栏3.3 状态栏3.4 铆接部件3.5 对话框 4. 1.前言 版本&#xff1a; 5.9.9 注意问题 Qstring类型通多…

算法课程笔记——蓝桥云课第11次直播

算法课程笔记——蓝桥云课第11次直播

ORA-28575: unable to open RPC connection to external procedure agent

环境&#xff1a; Oracle 11.2.0.4x64 RAC AIX6.1版本SDE for aix oracle11g版本10.0 x64 sde配置情况如下&#xff1a; 检查oracle和grid用户下的$ORACLE_HOME/hs/admin/extproc.ora文件均包含有如下&#xff1a; SET EXTPROC_DLLSANY 两个节点sde下的user_libraries都正常…