Node.js 学习笔记 express框架

已于 2024-05-14 17:07:35 修改
阅读量1k 收藏 13
点赞数 29
分类专栏： Node.js 文章标签： node.js
于 2024-05-14 17:07:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yavlgloss/article/details/138861676
版权

express

尚硅谷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();//响应 JSON
  res.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
  //获取 referer
  let 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

在这里插入图片描述

aPurpleBerry
关注
  • 29
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs开发——express框架学习
乞力马扎罗的雪CYF的博客
01-31 3138
在我们实际开发项目时，总是会用一些框架，而不是自己从头开始开发。而在nodejs中，express框架就是一个使用频率最高的一个框架。本篇主要来讲解express的使用。加载express框架       由于express不是系统框架，所以需要手动加载，在项目目录下使用命令“npm install express --save”   ，就可以在项目中集成express框架，使用--save参数是
express框架学习
weixin_45842954的博客
03-12 466
提供了方便简洁的路由定义方式 对获取HTTP请求参数进行了简化处理 对模板引擎支持程度高，方便渲染动态HTML页面 提供了中间件机制有效控制HTTP请求 拥有大量第三方中间件对功能进行扩展 //expess基础使用 // 引入express模块 const express = require('express'); // 创建应用对象 const app = express(); // 路由的设置 app.get('/',(request,response)=>{ response.end('
Node.js学习笔记
05-26
本学习笔记旨在深入解析Node.js的核心概念、特性以及常见应用，帮助你高效地掌握这一强大的开发工具。 1. **事件驱动模型** Node.js采用非阻塞I/O和事件驱动模型，使得它在处理高并发请求时表现出色。这种模型通过...
node.js学习笔记之koa框架和简单爬虫练习
01-01
Koa — 基于 Node.js 平台的下一代 web 开发框架 koa是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，可以免除重复繁琐的回调函数嵌套， 并极大地...
node.zip 笔记 ppt express koa mysql
06-20
“node.js”标签进一步确认了这个压缩包的核心内容是围绕Node.js这一JavaScript运行环境的，可能涵盖了Node.js的基础知识、开发工具、模块系统、异步编程等方面。 【压缩包子文件的文件名称列表】 由于未提供具体的...
前端学习笔记-Node.js
05-26
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它让JavaScript得以在服务器端执行，开启了前后端同语言的时代。Node.js利用非阻塞I/O和事件驱动模型，使其在处理高并发场景时表现出高效性能。在黑马程序员的...
Node.js-Nodejs学习笔记以及经验总结
08-09
本学习笔记和经验总结将深入探讨Node.js的核心概念、主要特性、常用模块以及实战技巧，帮助你从零基础到熟练掌握Node.js。 一、Node.js核心概念 1. 非阻塞I/O模型：Node.js采用事件驱动、非阻塞I/O模型，提高了...
Node.js历险记之express框架入门篇
weixin_34372728的博客
03-06 249
打开微信扫一扫，关注微信公众号【数据与算法联盟】 转载请注明出处：http://blog.csdn.net/gamer_gyt 博主微博：http://weibo.com/234654758 Github：https://github.com/thinkgamer 写在前面的话 Express 是一种保持最低程度规模...
Node.js学习之Express框架(一)
道阻且长
05-04 502
Node.js学习之Express框架(一)
彻底学懂express框架
贤蛋大眼萌
05-15 627
学懂express框架，为自己写管理系统的接口做准备
Express框架
就是记笔记用的
04-16 1946
官方定义：路由确定了应用程序如何响应客户端对特定端点的请求中间件（MiddleWare）本质是一个回调函数中间件可以像路由回调一样访问请求对象，响应对象（response）每一个请求到达服务端之后，都会执行全局中间件函数// 记录每个请求的url 与 IP地址 const express = require("express");// 声明中间件函数 function recordMiddleware(req , res , next) {// 获取url,ip let {
express框架的学习与基本使用
就是有点怕怕的博客
02-18 377
1. 认识express框架 Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性： 提供了方便简洁的路由定义方式 对获取HTTP请求参数进行了简化处理 对模板引擎支持程度高，方便渲染动态HTML页面 提供了中间件机制有效控制HTTP请求 拥有大量第三方中间件对功能进行扩展 以下为express框架的基本使用： // 引入express框架 const expre...
express框架
u010180452的博客
06-28 715
express Node 核心框架 express是一个功能极简, 完全是由路由和中间件构成的一个web开发框架,是非侵入式的框架 1. 为什么要学习 express ? - express 是 Node 的核心框架 - express 可以帮助我们快速构建 web 服务器 / api 服务器 - express 提供了一个快速生成工具 express-generator - 快速生成...
Node.js Express 框架学习笔记（一）入门篇
BloodyMandoo的博客
05-03 7830
初心：开始学习Node.js Express框架主要是为了能自己学会去搭建一个完整的网站，其次是由于个人的技术比较杂，从最初的前端HTML、CSS、JS、React、Vue到改学后台用C#、.net开发，直到慢慢的接触到数据库设计、服务器部署等方面的知识，也希望自己能慢慢的走上全栈的路，不管技术怎么样，一直学总是会有提高的总是会达到心中的标准的，于是，开始自己一人学习独立开发一款APP,想要把自己...
nodejs学习计划--（七）express框架
我愿化作繁星
01-27 1214
express是一个基于Node.js平台的极简、灵活的WEB简单来说，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）中间件（Middleware）本质是一个回调函数中间件函数可以像路由回调一样访问请求对象（request）响应对象（response）
node.js学习笔记
最新发布
04-28
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它能够在服务器端运行JavaScript代码。以下是学习Node.js的一些笔记： 1. 安装Node.js：首先需要安装Node.js，可以去官网下载对应的安装包，安装过程中需要注意选择合适的安装路径和配置环境变量。 2. Node.js的基本语法：学习Node.js的第一步是了解它的基本语法，包括变量、运算符、控制语句等。 3. 模块化编程：Node.js支持模块化编程，可以将代码按照功能拆分成不同的模块，利用require函数进行引用。 4. Node.js的核心模块：Node.js内置了许多核心模块，例如fs模块、http模块等，可以用于实现文件操作、网络编程等功能。 5. 第三方模块：除了内置模块外，Node.js还有丰富的第三方模块可供使用，可以使用npm命令进行安装和管理。 6. 异步编程：Node.js采用异步编程模型，可以通过回调函数、Promise、async/await等方式实现异步操作。 7. Express框架：Express是一个基于Node.js的Web开发框架，可以快速搭建Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值