Express框架入门

已于 2022-09-21 20:38:40 修改
阅读量928 收藏
点赞数
分类专栏： # Vue 文章标签： 前端 node.js javascript
于 2021-11-15 16:05:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45815776/article/details/121313742
版权

文章目录

一、入门Express框架实例

var express = require('express');
//引入express包，返回值是一个函数
var app = express();
//调用函数得到一个对象
 
app.get('/', function (req, res) {
   res.send('Hello World');
})
//调用getAPI监听路由，这里监听根路径的，当有根路径请求时，返回Hello World。request 和 response 对象来处理请求和响应的数据。
 
var server = app.listen(8081, function () {
//监听的端口，服务启动后，触发回调函数，打印监听的IP和端口
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

结果是cmd里打印ip和端口，localhost的8081在浏览器打开有Hello World
也可以写作：

var app = require('express')();
app.get('/',  (req, res)=> {
   res.send('Hello World');
}).listen(8081,()=>{
	console.log("running……")
})

二、托管静态文件（静态服务中间件）

什么是托管静态文件
html，js, css, image 都是存放在服务端的资源，当在浏览器中输入网址的后，我们就是向服务器请求这些资源，相对应的服务端就要有对应的路由来处理这些请求，否则就是404 not found 错误。

对于这些静态文件的路由处理，代码逻辑都是一致的，就是返回请求的文件。我们每写一个网站的服务端，都要处理这些静态文件的请求， 因为几乎所有的html文件是都包括js, css, image 文件。把这些一致的处理逻辑抽离出来，形成一个单独的组件，直接使用组件这就是express.static 中间件。

它处理js, css, image等静态文件的请求，它把我们对静态文件的路由处理封装起来。 它的参数是一个文件夹，就是当有请求过来的时候，直接到该文件来下寻找资源。我们直接把静态文件放到该文件夹，就不用写这些静态文件的路由了。（了解一下前端路由和后端路由）

这里还要注意一点，express.static 中间件的使用，要放到其它处理请求逻辑的前面， 因为页面在渲染的过程中首先请求的就是html, css, js 文件。

const express = require("express");
const app = express();
//实现静态资源服务，写入文件夹名，如public就可以访问其下的html，js, css, image等资源
let server = app.use(express.static("public"));
server.listen(3000,()=>{
	console.log("running……");
})

在这里插入图片描述在这里插入图片描述let server = app.use('/abc',express.static("public"))
还可以加一个虚拟路径，就是不存在的，访问的时候就不是上图的localhost:3000/hello.html而是变成localhost:3000/abc/hello.html

三、路由

路由决定了由谁(指定脚本)去响应客户端请求。

//http常用请求方式
const express = require("express");
const app = express();

//查询
app.get('/', (req, res)=>{
   res.send('get data');
});

//添加
app.post('/', (req, res)=>{
   res.send('post data');
});

//更新
app.put('/', (req, res)=>{
   res.send('put data');
});

//删除
app.delete('/', (req, res)=>{
   res.send('delete data');
});

直接使用use分发可以处理所有路由请求

app.use('/', (req, res)=>{
   res.send('okk');
});

四、中间件

先放个官方文档的中文链接，里面有案例，可以简单理解为处理过程中的一个环节。

1.应用层中间件

const express = require("express");
const app = express();
let total = 0;

app.use('/user',(req,res,next)=>{
	//记录访问时间
	console.log(Date.now()); 
	// next方法的作用就是把请求传递到下一个中间件
	next();
});
app. use('/user',(req, res , next)=>{
	//记录访问日志
	console.log('访问了/user');
	next();
});
app.use('/user', (req,res)=>{
	total++;
	console.log(total);
	res.send('result');
});

最后页面会显示result，每个函数都会被执行，因为next()；这个属于应用级别的中间件。

2.路由中间件

如果不写next()会无法打印2，网页一直请求直到超时报错。

const express = require('express');
const app = express();

app.get('/abc',(req,res,next)=>{
	console.log(1);
	next(); 
}, (req,res)=>{
	console.log(2);
	res.send('abc');
});

app.listen(3000,()=>{
	console.log('running...');
});

下面这种情况，网页有hello，会打印13，不会打印2。因为一个路由是指通过get、post、use等方法绑定的方法，1和2算作一个路由里的两个中间件。

const express = require(' express' );
const app = express();

app.get('/abc',(req,res,next)=>{
	console.log(1);
	//跳转到下一个路由
	next('route');
}，(req,res)=>{
	console.log(2);
	res.send('abc');
});

app.get(' /abc',(req,res)=>{
	console.log(3);
	res.send('hel1o');
});

app.listen(3000,()=>{
console.1og(' running...');
});

3.第三方中间件

详见这里，需要额外下载嚯。
用post去提交参数时：

const express = require('express');
const app = express(); 
const bodyParser = require('body-parser')

//挂载内置中间件
app.use(express . static('publid'));

//挂载参数处理中间件
app.use(bodyParser.urlencoded({ extended: false}));
app.post('/login',(req,res)=>{
	let data = req.body;
	if(data.username == 'admin' && data. password == '123' ){
		res.send('success');
	}else{
		res.send('failure');
	}
});

app.listen(3000,()=>{
	console.log('running...');
});

<body>
	<form action="http://localhost: 3000/login" method="post" >
		用户名: <input type="text" name="username"><br>
		密码: <input type="password" name=" password"><br>
		<input type="submit" value=" 提交">
	</form>
</body>

将form的method改为get，用get提交参数使用query对象

//处理get提交参数
app.get('/login' ,(req,res)=>{
	let data = req.query;
	console.log(data);
	res.send('get data');
});

以上为该参考视频的笔记
可以参考帮助理解的小案例

搭车去柏林<‘^′>
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10 【Express基本使用】
DSelegent的博客
11-12 1042
10 【Express基本使用】
express使用总结，中间件示例
qq_27314517的博客
03-03 443
/ 获得数据的content-type， content-length res . setHeader('content-type' , response . headers [ 'content-type' ]);} }
express的使用
weixin_46104231的博客
12-04 1459
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。 上手： var express = require("express"); var app
Express知识点以及案例总结
最新发布
guai_guai_guai的博客
05-21 999
广义上来讲，路由就是映射关系例如:人工客服中的每个按键都对应不同的服务，在这里，路由就是按键与服务之间的映射关系// 定义一个最简单的中间件函数// console.log('这是最简单的中间件函数')// 把流转关系，转交给下一个中间件或路由// next()// }// 将 mw 注册为全局生效的中间件// 这是定义全局中间件的简化形式console.log('这是最简单的中间件函数')next()})console.log('调用了 / 这个路由')})
【Node.js】Node.js入门（五）：Express路由
郭老二
10-31 513
路由指的是web服务端通过客户端发来的不同的url来响应客户不同的请求。对应到代码最简单的理解就是：一组字符串和一组函数接口的键值对对应，解析url中不同字符调取不同的函数接口。Express中有四种种路由接口再啰嗦几句：这些路由方法指定一个回调函数(有时称为“处理函数”)，当应用程序接收到对指定路由(端点)和HTTP方法的请求时调用。换句话说，应用程序“监听”匹配指定路由和方法的请求，当它检测到匹配时，它调用指定的回调函数。路由方法可以有多个回调函数作为参数。
Express框架
小毛驴的博客
10-30 647
1 Express框架的概况● 原生Node开发，会发现有很多问题。比如： ■ 呈递静态页面很不方便，需要处理每个HTTP请求，还要考虑304问题 ■ 路由处理代码不直观清晰，需要写很多正则表达式和字符串函数 ■ 不能集中精力写业务，要考虑很多其他的东西 ● EXPRESS框架致力于解决上述问题。它非常像前端框架jQuery，改变了我们书写程序的习惯。 ●
从零开始学习后端开发：Node.js与Express框架入门教程
04-19
本教程将带领你从零基础开始学习后端开发，并通过一个简单的案例来展示如何将所学知识应用到实际项目中。我们将使用Node.js作为后端开发的工具，并结合Express框架来快速搭建一个功能完善的应用程序。
express入门笔记
10-09
本入门笔记将深入讲解Express的基础知识和核心特性，帮助你从零开始掌握这个强大的框架。 一、Express简介 Express是一个轻量级的Web应用程序框架，遵循CommonJS规范，提供了丰富的HTTP工具和中间件系统，让开发者...
node.js Web应用框架Express入门指南
10-25
主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
Koa框架基础快速入门
01-27
Koa框架是Node.js领域中的一个轻量级Web应用框架，由Express团队创建，旨在提供更加简洁、高效且强大的功能。Koa的主要目标是通过使用ES6的Generator特性（在较新版本的Node.js中为async/await）来解决回调函数的...
JavaScript学习笔记（四十八）——Node.js之Express
qq_45268602的博客
10-18 785
以下内容转载编辑自菜鸟教程 提醒：该篇文章里面的操作方式可能与你的操作方式不太一样，注意要用你的方式去执行代码。希望通过该篇文章能对express有一定的了解。 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。
Node.js中express框架的使用
beekim的博客
11-17 1392
1.入门 1.1 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站 1.2 核心 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML页面。 1.3 安装依赖 首先确定有正确安装好node和npm 安装express 局部安装 npm install --save
Node组件——Express简介
编程三昧
05-30 1573
概述 Express是目前最流行的基于Node.js的Web开发框架，可以快速地搭建一个完整功能的网站。 Express上手非常简单，首先新建一个项目目录，假定叫做hello-world。 $ mkdir hello-world 进入该目录，新建一个package.json文件，内容如下。 { "name": "hello-world", "description": "hello world test app",
express开发简单实例
qq_43934844的博客
11-05 464
express开发简单实例
Express框架项目开发实例
04-18 829
第二个参数是回调函数，它的req参数表示客户端发来的HTTP请求，res参数代表发向客户端的HTTP回应，这两个参数都是对象。在回调函数内部，使用HTTP回应的send方法，表示向浏览器发送一个字符串。另外，向服务器发送信息的方法，从send变成了sendfile，后者专门用于发送文件。相应的，还有app.post、app.put、app.del（delete是JavaScript保留字，所以改叫del）方法。这时，运行下面的命令，就可以在浏览器访问http://127.0.0.1:3000。
【Node.js】Node.js入门（四）：常用函数接口、模块
郭老二
10-29 768
本篇博客用来记录初次浏览Node.js、Express的代码时，遇到的函数接口和模块。根据遇到先后顺序并且是感兴趣的，随即记录下。因此本篇博客比较杂乱。Node.js官网手册：https://nodejs.org/zh-cn/docs/Express官网手册：https://www.expressjs.com.cn/4x/api.html。
express框架
mapbar_front的博客
05-19 637
express框架是基于node环境的一个用于web应用开发的服务端框架。 学习express之前，最好对node的基本模块有一定的了解。 下载express npm install --save express 搭配使用的库 body-parser：用于处理JSON、Raw、Text和Url编码的数据。 cookie-parser：解析Cookie的工具，通过req.cookie...
Node.js与Express框架入门教程
"本书《Node与Express开发》是关于使用Node.js和Express框架进行Web开发的教程，由Ethan Brown撰写并由吴海星、苏文翻译。内容涵盖了Express 4.0，详细介绍了如何利用JavaScript栈开发动态Web应用程序。书中讲解了从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值