1. 犀牛前端部落首页
  2. Express教程

Express入门教程

Express入门教程

Express介绍

Express是一个Node.js Web框架。

Node.js是构建网络服务和应用程序的神奇工具。

Express构建在其特性之上,以提供易于使用的功能,满足Web服务器用例的需求。它是开源的,免费的,易于扩展和非常高性能。还有很多很多预先构建的包,你可以直接使用它们来执行各种事情。

安装

您可以使用npm安装Express:

npm install express

或者使用yarn:

yarn add express

当是新项目时,这两个命令也可以在空目录下工作(尽管npm不创建包)。

如果要从头开始一个新项目,只需运行npm init或yarn init。

Hello World

我们已经准备好创建第一个Express Web服务器。

以下是一些代码:

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

app.get('/', (req, res) => res.send('Hello World!'))
app.listen(3000, () => console.log('Server ready'))

将其保存到项目根目录下的index.js文件中,然后使用:

node index.js

您可以在本地主机上打开浏览器到端口3000,您应该会看到Hello World!消息。

通过理解Hello World代码学习基本的Express

这4行代码在背后做了很多工作。

首先,我们将快递包导入到快递值。

我们通过调用express()方法实例化应用程序。

有了应用程序对象后,我们告诉它使用GET()方法监听/路径上的GET请求。

每个HTTP动词都有一个方法:get(), post(), put(), delete(), patch():

app.get('/', (req, res) => { /* */ })
app.post('/', (req, res) => { /* */ })
app.put('/', (req, res) => { /* */ })
app.delete('/', (req, res) => { /* */ })
app.patch('/', (req, res) => { /* */ })

这些方法接受一个回调函数——在请求启动时调用它——我们需要处理它。

我们传入一个箭头函数:

(req, res) => res.send('Hello World!')

Express在这个回调中给我们发送了两个对象,我们称之为req和res,它们表示请求和响应对象。

请求是HTTP请求。它为我们提供了所有的请求信息,包括请求参数、头、请求体等等。

Response是我们将发送给客户机的HTTP响应对象。

我们在这个回调中做的是发送’ Hello World!’字符串发送给客户端,使用Response.send()方法。

此方法将该字符串设置为主体,并关闭连接。

示例的最后一行实际启动了服务器,并告诉它监听端口3000。我们传入一个回调,该回调在服务器准备好接受新请求时调用。

请求参数

我提到了请求对象如何保存所有HTTP请求信息。

以下是你可能会用到的主要属性:

  • .app 持有一个对Express app对象的引用
  • . baseUrl 应用程序响应的基本路径
  • .body 包含在请求体中提交的数据(在访问它之前必须手动解析和填充)
  • cookies 包含请求发送的cookies(需要cookie解析器中间件)
  • .hostname 主机HTTP头值中定义的主机名
  • . ip 客户端IP
  • .method 使用的HTTP方法
  • .params 路由命名
  • .path URL路径
  • .protocol请求协议
  • .query包含请求中使用的所有查询字符串的对象
  • .secure true如果请求是安全的(使用HTTPS)
  • signedCookies 包含由请求发送的签名cookie(需要cookie解析器中间件)
  • .xhr 如果请求是XMLHttpRequest,则.xhr为真

发送一个响应

在Hello World示例中,我们使用response .send()方法发送一个简单的字符串作为响应,并关闭连接:

(req, res) => res.send('Hello World!')

如果传入一个字符串,它将内容类型头设置为text/html。

如果传入一个对象或数组,它将设置application/json内容类型头,并将该参数解析为json。

send()自动设置HTTP响应头的内容长度。

send()也会自动关闭连接。

发送一个JSON响应

Response.json()方法接受一个对象或数组,并在发送之前将其转换为JSON:

res.json({ username: 'Flavio' })

使用end()发送空响应

另一种发送响应的方法是使用response .end()方法:

res.end()

更改任何HTTP头值

你可以改变任何HTTP头值使用Response.set():

res.set('Content-Type', 'text/html')

但是,对于Content-Type头部有一个快捷方式:

res.type('.html')
// => 'text/html'

res.type('html')
// => 'text/html'

res.type('json')
// => 'application/json'

res.type('application/json')
// => 'application/json'

res.type('png')
// => image/png:

设置cookies

使用Response.cookie()方法来操作您的cookie。

例子:

res.cookie('username', 'Flavio')

此方法接受第三个参数,其中包含各种选项:

res.cookie('username', 'Flavio', { domain: '.flaviocopes.com', path: '/administrator', secure: true })

res.cookie('username', 'Flavio', { expires: new Date(Date.now() + 900000), httpOnly: true })

您可以设置的最有用的参数是:

  • domain cookie域名
  • expires 设置cookie过期日期。如果缺少或为0,则该cookie是会话cookie。
  • httpOnly 将cookie设置为仅由web服务器访问。
  • maxAge 设置相对于当前时间的过期时间,以毫秒表示。
  • path 路径cookie路径。默认为/
  • secure 标记cookie仅为HTTPS
  • signed 将cookie设置为签名

cookie可以被清除:

res.clearCookie('username')

设置HTTP响应状态

使用Response.status ():

res.status(404).end()

res.status(404).send('File not found')

sendStatus()是一个快捷方式:

res.sendStatus(200)
// === res.status(200).send('OK')

res.sendStatus(403)
// === res.status(403).send('Forbidden')

res.sendStatus(404)
// === res.status(404).send('Not Found')

res.sendStatus(500)
// === res.status(500).send('Internal Server Error')

处理重定向

重定向在Web开发中很常见。你可以使用Response.redirect()方法创建一个重定向:

res.redirect('/go-there')

这将创建一个302重定向。

301重定向是这样做的:

res.redirect(301, '/go-there')

您可以指定一个绝对路径(/go-there),一个绝对url (https://anothersite.com),一个相对路径(go-there)或使用..回到一层:

res.redirect('../go-there')
res.redirect('..')

您还可以使用重定向返回到Referer HTTP头值(默认为/如果没有设置):

res.redirect('back')

发送一个要下载的文件

download()方法允许您发送附加到请求的文件。浏览器不会显示页面,而是将文件保存到磁盘。

res.download('/file.pdf')

res.download('/file.pdf', 'user-facing-filename.pdf')

支持 JSONP

JSONP是一种使用来自客户端JavaScript的跨源api的方法。

你可以在你的API中使用Response.jsonp()方法来支持它,它类似于Response.json()但是处理JSONP回调:

res.jsonp({ username: 'Flavio' })

路由

在Hello World示例中,我们使用了以下代码:

app.get('/', (req, res) => { /* */ })

这将创建一个路由,该路由将访问根域URL /映射到我们希望提供的响应。

命名参数

如果我们想侦听自定义请求,该怎么办?也许我们想创建一个接受字符串的服务,然后用大写返回该字符串。如果我们不希望参数作为查询字符串发送,而是作为URL的一部分,我们使用命名参数:

app.get('/uppercase/:theValue', (req, res) => res.send(req.params.theValue.toUpperCase()))

如果我们发送一个请求到/大写/test,我们将在响应体中获得test。

您可以在同一个URL中使用多个命名参数,它们都将存储在req.params中。

使用正则表达式匹配路径

您可以使用正则表达式来匹配多条路径与一条语句:

app.get(/post/, (req, res) => { /* */ })

将匹配/post, /post/first, /thepost, /post/ something,等等。

中间件

中间件是一个函数,它连接到路由过程并在某个点执行操作,这取决于我们希望它做什么。

它通常用于编辑请求或响应对象,或在请求到达路由处理程序代码之前终止请求。

它像这样被添加到执行堆栈中:

app.use((req, res, next) => { /* */ })

这与定义路由类似,但是除了请求和响应对象实例之外,我们还拥有对next中间件函数的引用,我们将其分配给变量next。

我们总是在中间件函数的末尾调用next(),以便将执行传递给下一个处理程序,除非我们想提前结束响应并将其发送回客户机。

您通常使用npm包形式的预制作中间件。一份可供选择的大名单在这里。

一个示例是cookie-parser,它用于将cookie解析为请求。cookie对象。你使用npm安装cookie-parser,你可以这样使用它:

const express = require('express')
const app = express()
const cookieParser = require('cookie-parser')

app.get('/', (req, res) => res.send('Hello World!'))

app.use(cookieParser())
app.listen(3000, () => console.log('Server ready'))

你也可以设置一个中间件函数来运行特定的路由,通过使用它作为路由定义的第二个参数:

const myMiddleware = (req, res, next) => {
  /* ... */
  next()
}

app.get('/', myMiddleware, (req, res) => res.send('Hello World!'))

如果需要存储在中间件中生成的数据,以便将其传递给后续中间件函数或请求处理程序,则可以使用请求。当地人对象。它将附加该数据到当前请求:

req.locals.name = 'Flavio'

静态资源

这是常见的有图像,CSS和更多在一个公共子文件夹,并将它们暴露给根级别:

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

app.use(express.static('public'))

/* ... */

app.listen(3000, () => console.log('Server ready'))

如果在public/中有一个index.html文件,那么现在点击根域URL (http://localhost:3000)就会提供该文件。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4724.html

发表评论

登录后才能评论