Express框架快速入门(二)

简介: Express框架快速入门

没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件:


const express = require('express')
// 创建express实例
const app=express();
const router = express.Router();
// 没有挂载路径的中间件,通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
    console.log('Time:', Date.now())
    next()
})
// 将路由挂载至应用
app.use('/', router)
app.listen(3000,()=>{
    console.log("server start")
})


一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息:


const express = require('express')
// 创建express实例
const app=express();
const router = express.Router();
// 一个中间件栈,显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
    console.log('Request URL:', req.originalUrl)
    next()
}, function (req, res, next) {
    console.log('Request Type:', req.method)
    next()
})
// 将路由挂载至应用
app.use('/', router)
app.listen(3000,()=>{
    console.log("server start")
})

路由级中间件也一样,如果需要在中间件栈中跳过剩余中间件,调用 next(‘route’) 方法将控制权交给下一个路由。


const express = require('express')
// 创建express实例
const app=express();
const router = express.Router();
// 一个中间件栈,处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
    // 如果 user id 为 0, 跳到下一个路由
    if (req.params.id == 0) next('route')
    // 负责将控制权交给栈中下一个中间件
    else next() //
}, function (req, res, next) {
    // 渲染常规页面
    res.send('aaa')
})
// 处理 /user/:id, 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
    console.log(req.params.id)
    res.send('bbb')
})
// 将路由挂载至应用
app.use('/', router)
app.listen(3000,()=>{
    console.log("server start")
})

(3) 错误处理中间件


错误处理中间件有 4 个参数,定义错误处理中间件时必须使用这 4 个参数。即使不需要 next 对象,也必须在签名中声明它,否则中间件会被识别为一个常规中间件,不能处理错误。一般放在所有写的中间件的后面,当其他中间件有错误时会执行。


app.use(function(err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})


(4) 内置中间件


比如 express.static 这个 Express内置的中间件。它基于 serve-static,负责在 Express 应用中提托管静态资源。每个应用可有多个静态目录。参数 root 指提供静态资源的根目录,可选的 options 参数拥有如下属性:


image.png

下面的例子使用了 express.static 中间件:

let options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now())
  }
}
app.use("/public".express.static('public', options))

每个应用可有多个静态目录,如:


app.use("/public",express.static('public'))
app.use("/uploads",express.static('uploads'))
app.use("/files",express.static('files'))

(5) 第三方中间件


通过使用第三方中间件从而为 Express 应用增加更多功能。


安装所需功能的 node 模块,并在应用中加载,可以在应用级加载,也可以在路由级加载。


下面的例子安装并加载了一个解析 cookie 的中间件: cookie-parser


npm install cookie-parser
const express = require('express')
const app = express()
const cookieParser = require('cookie-parser')
// 加载用于解析 cookie 的中间件
app.use(cookieParser())


4. 获取请求的参数


如果前端的请求传来了get请求参数,那怎么拿到呢?

我们可以通过res.query来拿到请求传来的参数:


app.get("/",(req, res) => {
    console.log(req.query);
    res.send("aaa")
})

当我前端传来参数时,如http://localhost:3000?username=haiexijun&password=123456 ,就能获取到。


53d94e5d950a43ff8a17ee01a96d7dca.png


如果是post请求的话,只要改成app.post()就好了,但要在里面配置一下相关中间件。当然,不仅仅是app.post()这种应用级中间件哈,router.get() 、router.post()等中间件也能这样获取。


const express = require('express')
// 创建express实例
const app=express();
const router = express.Router();
//配置解析post参数,不用下载第三方中间件,有一个内置的可以使用
app.use(express.urlencoded({extended:false}));
router.post("/",(req, res) => {
    console.log(req.body);
    res.send({message:"ok"})
})
app.listen(3000,()=>{
    console.log("server start")
})

5. 利用 Express 托管静态文件


通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript 文件等。


将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 static 目录放置了图片、CSS 和 JavaScript 文件,你就可以:


app.use("/static",express.static('static'))
app.use("/image",express.static('image'))


现在,/image 和 /static 目录下面的文件就可以访问了。

访问localhost:3000/image/dog.gif:


33355436bff94ddfba130e984e4105d0.png

6. 在 Express 中使用模板引擎

服务端渲染:


4bcb230c366042cc82ab2f6e335f089a.png


我们先安装ejs模板引擎:


npm install ejs


需要在应用中进行如下设置才能让 Express 渲染模板文件:


1.创建views文件夹 , 用于放模板文件的目录,比如: app.set(‘views’, ‘./views’)

2.配置view engine, 模板引擎,比如: app.set(‘view engine’, ‘ejs’)

3.views文件夹下面创建test.ejs模板文件,用res.render( )来渲染模板。


下面简单演示一下:

编写test.ejs模板:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<h1>姓名:<%=name%></h1>
<h1>年龄:<%=age%></h1>
</body>
</html>


然后编写index.js:


const express = require('express')
// 创建express实例
const app=express();
app.set('views','./views')
app.set('view engine','ejs')
app.get("/test",(req, res) => {
    //渲染模板返回给前端,第一个参数传模板的名字,第二个参数传渲染的动态数据(这里模拟一下)
    res.render("test",{name:"害恶细君",age:20})
})
app.listen(3000,()=>{
    console.log("server start")
})

ab4decb00a0642f6a603759d61ea1fa8.png

模板引擎的使用就体验到这里了,如果想体验更多模板的语法,请参考ejs的官方文档


7. Express 应用程序生成器


通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。

安装生成器:


npm install -g express-generator


安装好后,就可以使用express命令来生成项目底座了。


40b090d6b6784b6d95fc8bf021b57926.png


express生成器默认使用jade模板引擎,jade对新手很不友好。如果我要创建一个基于ejs模板引擎的底座,可以在运行express命令时指定一些参数来创建。比如:


express myapp --view=ejs

然后会得到如下的项目结构:


├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
  ├── error.ejs
  └── index.ejs


然后我们在改项目的根目录下运行 npm i 安装一下依赖。


npm i


然后我们运行命令启动项目:


npm start


然后在浏览器中打开 http://localhost:3000/ 网址就可以访问这个应用了。关于生成的底座内部的代码细节,我认为没有必要过多要介绍解释,以后结合一个具体的小项目来具体讲。


虽然本文并没有完全总结express里的所有api,但本文的内容却很基础和重要。至于express的更多用法,里面大多数api其实查看文档都能看明白的。

相关文章
|
2月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
17天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
2月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
56 1
|
29天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
1月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
30 0
|
2月前
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
33 2
|
2月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
2月前
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
51 3
|
3月前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
54 3
|
3月前
|
JSON JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的完美结合
【9月更文挑战第28天】在现代Web开发中,Node.js和Express框架的结合为创建高性能、易扩展的应用提供了强有力的支持。本文将深入探讨如何利用这两种技术构建一个简单但功能强大的Web服务,同时提供代码示例以加深理解。