一篇入门Express
1、安装
Express 是一个 基于 Node.js 的简洁灵活的 Web 应用框架,为 Web 应用程序提供一组强大的功能
在阅读这篇文章之前,请确保您已经安装了 Node.js,并对其有一些基本的理解
如果需要了解 Node.js 的内容,可以参考我的另一篇文章 —— 一篇入门Node.js
下面介绍 安装 Express 框架 的步骤,这里介绍的是基于 Node.js 本地安装的方法:
Node.js 本地安装是指在当前文件夹中安装所需模块(Express),而不影响全局配置
可以使用 npm install express --save
命令安装 Express 到根目录中的 node_modules 目录下
2、Hello World
首先创建一个文件夹,该文件夹将作为 Web 项目的根目录
然后在该文件夹中打开命令行,使用 npm init
命令为该文件夹生成一个 package.json
文件
package.json 文件是项目的配置文件,里面列出了有关项目的相关信息
接着使用 npm install express --save
安装到根目录中的 node_modules 目录下
最后在根目录下创建 server.js 文件,并在文件中编写如下代码:
// 引入 Express 模块
var express = require('express');
// 创建 Express 实例
var app = express();
// 设置路由
app.get('/', function (req, res) {
res.send('Hello World');
})
// 启动服务器,监听端口 5000
var server = app.listen(5000);
上面是一个简单的应用程序,现在暂时还不需要理解其中的语法,等下将会逐一进行讲解
此时,打开命令行,使用 node server.js
运行程序
打开 http://127.0.0.1:5000/ 即可看到 Hello World 的问候语
3、基础路由设置
路由确定 应用程序如何响应特定端点的客户端请求
每个路由都可以有一个或多个处理函数,这些函数在路由匹配时执行,其语法格式如下:
app.METHOD(PATH, HANDLER)
- METHOD:HTTP 请求方法
- PATH:文件路径
- HANDLER:路由匹配时执行的功能
以下面代码为例,当客户端以 GET 方法请求根路径资源时,执行匿名函数,发送 Hello World 响应
app.get('/', function (req, res) {
res.send('Hello World');
})
(1)METHOD
METHOD 定义 HTTP 请求方法,Express 支持所有 HTTP 请求方法
例如,app.get(PATH, HANDLER)
用于为 PATH 路径上的 GET 请求方法添加处理函数 HANDLER
特殊的,app.all(PATH, HANDLER)
用于为 PATH 路径上的所有请求方法添加处理函数 HANDLER
(2)PATH
PATH 定义路径,它可以是字符串、字符串模式或正则表达式,下面将以例子进行说明
以下是基于 字符串 匹配的例子:
'/about'
匹配请求路径 /about
以下是基于 字符串模式 匹配的例子:
'/ab?cd'
匹配请求路径 /acd、/abcd(?:匹配 ? 前的字符 0 次或 1次)
'/ab+cd'
匹配请求路径 /abcd,/abbcd 等等(+:匹配 + 前的字符 1 次或多次)
'/ab*cd'
匹配请求路径 /abcd,/abRANDOMcd 等等(*:匹配任意字符串)
以下是基于 正则表达式 匹配的例子(在 / /
中写正则表达式):
/a/
匹配任意包含字符 a 的请求路径
/.*fly$/
匹配任意以 fly 结尾的请求路径
另外,我们还可以 在路径中指定参数
参数以 :
作为前缀,用于在 URL 中捕获指定位置的值,并将其保存在 req.params 中
例如,路由路径为:'/users/:userId/books/:bookId'
请求 URL 为:http://127.0.0.1:5000/users/34/books/8989
因此,得到的 req.params 为:{ "userId": "34", "bookId": "8989" }
(3)HANDLER
HANDLER 定义处理请求的方法,它可以是函数、函数数组或两者的组合形式
在使用多组函数时,必须确保使用 next()
方法将控制权传递给后续函数,否则将会直接终止
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})
var cb0 = function (req, res, next) {
console.log('CB0')
next()
}
var cb1 = function (req, res, next) {
console.log('CB1')
next()
}
var cb2 = function (req, res) {
console.log('CB2')
}
app.get('/test', [cb0, cb1, cb2])
var server = app.listen(5000);
一般情况下,函数带有两个参数,分别是 Request 和 Response 对象,用于处理请求和响应数据
Request 对象 常见的属性和方法有:
app
:对 Express 应用程序实例的引用ip
:IP 地址originalUrl
:原始 URLbaseURL
:基础 URLprotocol
:协议类型hostname
:主机名subdomains
:子域名path
:资源路径query
:查询字符串body
:请求主体route
:当前匹配的路由params
:路由参数cookies
:当使用 cookie-parser 中间件时,包含 Cookie 对象signedCookies
:当使用 cookie-parser 中间件时,包含已签名的 Cookie 对象get(field)
:获取指定的 HTTP 头
详细情况请参考:http://www.expressjs.com.cn/4x/api.html#req
Response 对象 常见的属性和方法有:
app
:对 Express 应用程序实例的引用set(field[,value])
:设置 HTTP 头get(field)
:返回 HTTP 头append(field[,value])
:添加 HTTP 头status()
:设置状态码redirect([status,]path)
:重定向cookie(name,value[,option])
:设置 CookieclearCookie(name[,options])
:清除 Cookiesend([body])
:传送响应sendStatus(code)
:传送状态吗sendFile(path[,options][,fn])
:传送文件json([body])
:传送 JSONend([data][,encoding])
:结束响应
详细情况请参考:http://www.expressjs.com.cn/4x/api.html#res
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World');
})
app.get('/:user', function (req, res) {
res.send('Hello ' + req.params['user']);
})
var server = app.listen(5000);
4、高级路由设置
(1)app.route()
如果需要为同一路径的不同请求方法定义不同的处理函数,app.route(path)
是一个不错的选择
app.route('/book')
.get(function (req, res) {
res.send('Get a book')
})
.post(function (req, res) {
res.send('Add a book')
})
.put(function (req, res) {
res.send('Update the book')
})
(2)express.Router()
express.Router([options])
可以用于创建路由器的实例,它又被称为 “迷你应用程序”,因为它就像 app 实例一样,可以为它添加中间件和路由,常用的方法如下:
METHOD(path[,callback ...])
:与app.METHOD(path,callback[,callback ...])
类似all(path,[callback ...])
:与app.all(path,callback[.callback ...])
类似route(path)
:与app.route(path)
类似
详细情况请参考:http://www.expressjs.com.cn/4x/api.html#router
可以创建一个路由文件 router.js,并在文件中编写如下代码:
var express = require('express')
var router = express.Router()
// 添加中间件
router.use(function timeLog (req, res, next) {
console.log('Time: ', Date.now())
next()
})
// 添加路由
router.get('/', function (req, res) {
res.send('Home page')
})
// 添加路由
router.get('/about', function (req, res) {
res.send('About page')
})
module.exports = router
然后,我们可以在应用程序 server.js 中加载路由文件:
var express = require('express');
var app = express();
var router = require('router')
// ...
app.use('/router', router)
5、静态文件
Express 的内置中间件函数 express.static()
可以 提供 图片、CSS 和 JS 之类的静态文件
其语法格式如下:
express.static(root, [options])
- root:储存静态文件的根目录路径
- options:对象,用于提供更详细的信息
例如,我们创建一个简单的文件结构如下:
app(应用程序根目录)
+-- node_module (储存模块的文件夹)
+-- public (储存资源的文件夹)
+-- images
+-- icon.png
+-- background.png
+-- hello.html
+-- style.css
+-- script.js
+-- package.json (用于配置的文件)
+-- server.js (主程序文件)
我们可以在 server.js 中声明 public 目录下内容开放访问,即客户端可以通过地址进行请求
例如 http://127.0.0.1:5000/images/icon.png、http://127.0.0.1:5000/hello.html 等
app.use(express.static('public'))
如果需要为提供的文件创建虚拟路径前缀,可以在 app.use()
方法的参数中进行指定
例如 http://127.0.0.1:5000/static/images/icon.png、http://127.0.0.1:5000/static/hello.html 等
app.use('/static',express.static('public'))
6、中间件
中间件 (Middleware) 实际上是一个 函数,可以访问请求对象 (req),响应对象 (res) 以及 next 函数
(1)应用程序级中间件
可以使用 app.METHOD()
和 app.use()
方法将应用程序级中间件绑定到 express()
实例
var express = require('express');
var app = express();
app.use(function (req, res, next) {
// 由于没有指定路径,所以每个请求都会执行该中间件函数的功能
console.log('Time:', Date.now()) // 中间件函数功能
next() // 将控制权传递给下一个路由,否则会终止请求-响应周期
})
app.get('/user/:id', function (req, res, next) {
res.send('USER') // 中间件函数功能
})
var server = app.listen(5000);
注意:中间件加载的顺序很重要,首先加载的中间件函数会先执行
(2)路由器级中间件
路由器级中间件的工作方式与应用程序级中间件的工作方式相同
区别在于路由器级中间件通过 router.METHOD()
和 router.use()
方法绑定到 Router()
实例
var express = require('express');
var app = express();
var router = express.Router();
router.use(function (req, res, next) {
// 由于没有指定路径,所以每个请求都会执行该中间件函数的功能
console.log('Time:', Date.now()) // 中间件函数功能
next() // 将控制权传递给下一个路由,否则会终止请求-响应周期
})
router.get('/user', function (req, res) {
res.send('USER') // 中间件函数功能
})
app.use('/virtual', router)
var server = app.listen(5000);
(3)错误处理中间件
与其它中间件函数的定义方式相同
区别在于错误处理中间件的参数总是有四个,对应是 function(err, req, res, next)
app.use(function (err, req, res, next) {
console.error(err.stack)
res.status(500).send('Error!')
})
(4)内置中间件
除了上面介绍的 express.static()
内置中间件函数外,还有两个比较常用的内置中间件函数:
express.json()
:使用 JSON 帮助解析传入的请求express.urlencoded()
:使用 RUL 编码帮助解析传入的请求
(5)第三方中间件
第三方中间件可以为 Express 应用程序添加功能,常用的第三方中间件可以参考下面的链接:
7、生成器
最后要介绍的一个内容就是 Express 生成器 express-generator,用于快速创建应用骨架
它包含 express 命令行工具,可以使用 npm install express-generator -g
命令安装
然后,我们就可以通过一个简单的命令创建一个应用的骨架
express --view=pug myapp
create : myapp\
create : myapp\public\
create : myapp\public\javascripts\
create : myapp\public\images\
create : myapp\public\stylesheets\
create : myapp\public\stylesheets\style.css
create : myapp\routes\
create : myapp\routes\index.js
create : myapp\routes\users.js
create : myapp\views\
create : myapp\views\error.pug
create : myapp\views\index.pug
create : myapp\views\layout.pug
create : myapp\app.js
create : myapp\package.json
create : myapp\bin\
create : myapp\bin\www
change directory:
> cd myapp
install dependencies:
> npm install
run the app:
> SET DEBUG=myapp:* & npm start
一篇入门Express的更多相关文章
- 第一篇 入门必备 (Android学习笔记)
第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具 ●Android之父 Android安迪·罗 ...
- Tp5安全篇入门
输入安全 设置public目录为唯一对外访问目录,不能把资源文件放入到应用目录: 使用框架提供的请求变量获取方法(Request类的param方法及input助手函数)而不是原生系统变量获取用户输入的 ...
- 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...
- 学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳 ...
- 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 ...
- Node.js入门教程 第五篇 (Express框架)
Express框架 Express是适用于Node.js web的框架,提供了大量实用功能,例如路由功能及http功能. Express 框架核心特性: 可以设置中间件来响应 HTTP 请求. 定义了 ...
- 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...
- 一篇入门 -- Scala
整体介绍 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. 联邦理工学院洛桑(EPFL)的Martin Odersky于2001 ...
- node入门 express ejs
hello.js var express = require("express"); var app = express(); app.get("/hello" ...
随机推荐
- hdoj--1877--又一版 A+B(水题)
又一版 A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- luogu3605晋升者计数
https://www.zybuluo.com/ysner/note/1282069 题面 给一颗带点权的树,求每个点的子树中比该点权值大的点的个数. \(n\leq10^5\) 解析 首先有个很无脑 ...
- 洛谷 P3121 [USACO15FEB]审查(黄金)Censoring (Gold) 【AC自动机+栈】
这个和bzoj同名题不一样,有多个匹配串 但是思路是一样的,写个AC自动机,同样是开两个栈,一个存字符,一个存当前点在trie树上的位置,然后如果到了某个匹配串的末尾,则弹栈 #include< ...
- 使用particles.js实现网页背景粒子特效
得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo ...
- less新手入门(四)—— Mixin Guards
八.Mixin Guards 有条件的 mixin 当您想要匹配表达式时,相对于简单的值或特性,Guards是有用的.如果您熟悉函数式编程,您可能已经遇到过它们. 为了尽可能地保持CSS的声明性质,在 ...
- base64编码上传图片java后台接收实例
原文地址:http://blog.csdn.net/tonyfreak/article/details/72522855 思路 前台传以data:image/jpeg;base64,开头的base64 ...
- Android 性能优化(13)网络优化( 9)Determining and Monitoring the Docking State and Type
Determining and Monitoring the Docking State and Type PreviousNext This lesson teaches you to Determ ...
- 网站开发综合技术 第二部分 CSS样式表
第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...
- struct结构的一些内容
srtuct结构的定义: 访问修饰符 struct 结构名{ //方法体 } 结构定义的特点: 1.结构中可以有字段(属性),也可以有方法 2.定义时,结构的字段不能被赋初值 3.结构和类一样都有默 ...
- 在C语言中模仿java的LinkedList集合的使用(不要错过哦)
在C语言中,多个数据的储存通常会用到数组.但是C语言的数组有个缺陷,就是固定长度,超过数组的最大长度就会溢出.怎样实现N个数储存起来而不被溢出呢. 学过java的都知道,java.util包里有一个L ...