一篇入门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" ...
随机推荐
- 【Silverlight】Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps
[Silverlight]Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps 上个月微软必应地图(Bing Maps) ...
- xubuntu 17.04 和 iphone 6互传文件方法——使用libimobiledevice就可以像u盘一样操作文件了
I need to preface this by saying I'm also new to Linux, but I've got it working I think. The instruc ...
- SPOJ BEADS 最小字符串表示
SPOJ BEADS 给一个字符串(环) 问从哪个字符开始,字典序最小. 可以脑补到很多线性的解法,不过以下这个是最简单的,代码非常简单,就不解释了. #include<iostream> ...
- fck 属性配置大全
优化FCKeditor文件夹和文件: 下载FCKeditor并解压之后,会产生_samples和 editor两个文件夹和几个文件,全部删除以_开头的文件夹和文件,因为这些都是FCKeditor的一些 ...
- bzoj 1626: [Usaco2007 Dec]Building Roads 修建道路【最小生成树】
先把已有的边并查集了,然后MST即可 记得开double #include<iostream> #include<cstdio> #include<algorithm&g ...
- P3258[JLOI2014]松鼠的新家(LCA 树上差分)
P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他 ...
- 略微讲讲最近的 webpack 该如何加快编译
首先假设 基础的环境是有 creat-react-app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的 ...
- JS 九宫格算法 用原生js实现
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...
- Visual Studio Code 扩展工具集,记录
编码 提高效率及校验 Auto Close Tag 自动闭合标签 Auto Rename Tag 自动更改HTML/XML标签,不需要再进行二次修改,减少50%的工作量! Path Intellise ...
- mysql left join 出现的结果会重复
left join 基本用法 MySQL left join 语句格式 A LEFT JOIN B ON 条件表达式 left join 是以A表为基础,A表即左表,B表即右表. 左表(A)的记录会全 ...