Express框架基本的使用

最新推荐文章于 2022-07-01 11:20:15 发布
最新推荐文章于 2022-07-01 11:20:15 发布
阅读量388 收藏 3
点赞数
分类专栏： Node.js Express 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53431161/article/details/112952517
版权
本文详细介绍了Express.js的基础知识，包括其特性、中间件的工作原理和使用，以及错误处理中间件的实现。讲解了app.use中间件的使用，展示了不同类型的请求参数获取方法，如get和post，还涵盖了路由参数和静态资源的处理。此外，文章还探讨了express-art-template模板引擎的使用，以及如何在Express中设置和使用模板引擎。
摘要由CSDN通过智能技术生成

文章目录

Express是什么？

Express是基于Node平台的web应用开发框架，帮助创建各种web应用

Express特性

  • 提供了方便简洁的路由定义方式
  • 对获取HTTP请求参数进行了简化处理
  • 对模板引擎支持程度高，方便渲染动态HTML页面
  • 提供了中间件机制有效控制HTTP请求
  • 拥有大量第三方中间件对功能进行扩展

基本使用语法

  • 注意：send方法只可使用一次，不可重复使用
// 引入express框架
const express = require('express')
// 用框架创建web服务器
const app = express()

// 用户以get方式访问/index路由
app.get('/index', (req, res) => {
    // 向客户端响应
    // 1.send方法内部会检测响应内容类型
    // 2.send方法会自动设置htpp状态码
    // 3.send方法会自动设置响应内容类型以及编码
    // res.send('hello express')
    // res.send('你好！')
    // res.send(12) 如果响应一个数字，它被当成状态码，会报错
    // res.send('<h1>hello express</h1>')
    // data = [2, 3, 4, 65]
    data = {name:'zhangsan',age:18}
    res.send(data)
})

// 监听端口
app.listen(3000)

中间件

什么是中间件

中间件就是一堆方法，可以接收客户端发来的请求、可以对请求做出响应，也可以将请求继续交给下一个中间件继续处理。

在这里插入图片描述

 可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。
 默认情况下，请求从上到下依次匹配中间件，一旦匹配成功，终止匹配。
 可以调用next方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

// 引入express框架
const express = require('express')
// 用框架创建web服务器
const app = express()

// 用户以get方式访问/index路由
app.get('/index', (req, res,next) => {
    // 向客户端响应
    req.name = '张三'
    next() //继续往下进行中间件的匹配
})
app.get('/index', (req,res) => {
    req.age = 20
    res.send(req.name+','+req.age)
})
// 监听端口
app.listen(3000)
  • 中间件主要由两部分构成，中间件方法以及请求处理函数
  • 中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求
app.get('请求路径', '处理函数')   // 接收并处理get请求
app.post('请求路径', '处理函数')  // 接收并处理post请求

app.use中间件的使用

  • app.use 匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求
app.use((req, res, next) => {
    res.send('欢迎来到首页')
})
  • app.use 第一个参数也可以传入请求地址，代表不论什么请求方式(相对路由中间件)，只要是这个请求地址就接收这个请求。
app.use('/index', (req, res, next) => {
    res.send('欢迎来到首页')
})
应用示例
  • 路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面。
app.use('/index', (req, res, next) => {
    let isLogin = false // 用户登录状态
    if (isLogin) { 
        next() // 登录了向下执行
    }else {
        res.send('请先登录后访问') // 未登录时拦截
    }
})

app.use('/index', (req, res) => {
    res.send('访问成功')
})
  • 网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端做出响应，网站正在维护中。
// 网站公告
app.use((req, res, next) => {
 	res.send('当前网站正在维护...')
})
  • 自定义404页面(代码一般放在其他中间件之后）
app.use((req, res) => {
    // 不设置状态码时，默认是200
    res.status(404).send('当前访问的网页不存在')
})
错误处理中间件
  • 在程序运行过程中，不可避免出现不可预料的错误。如文件读取失败，数据库连接失败，错误处理中间件可以集中处理这些错误
  • 当程序出现错误时，错误信息可通过参数的形式传递给next()方法，即可触发错误处理中间件。
// 引入express框架
const express = require('express')
const fs = require('fs')
// 用框架创建web服务器
const app = express()

app.use('/index', (req, res, next) => {
    fs.readFile('./01.js','utf8', (err, result) => {
        if(err != null) {
            next(err)
        }else {
            res.send(result)
        }
    })
})

// 错误处理中间件
app.use((err, req, res) => {
    res.status(500).send(err)
})
// 监听端口
app.listen(3000)
错误信息捕获
  • 在node.js中，异步API的错误信息都是通过回调函数获取的，支持Promise对象的异步API发生错误可以通过catch方法捕获。异步函数执行如果发生错误要如何捕获错误呢？
  • try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能其他类型的API发生的错误。
// 引入express框架
const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
const readFile = promisify(fs.readFile);
// 创建网站服务器
const app = express();

app.get('/index', async (req, res, next) => {
	try {
		await readFile('./aaa.js')
	}catch (ex) {
		next(ex);
	}
})

// 错误处理中间
app.use((err, req, res, next) => {
	res.status(500).send(err.message);
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

请求参数获取

get请求参数获取

Express框架中使用req.query即可获取GET参数，框架内部会将GET参数转换为对象并返回。

// 引入express框架
const express = require('express')
const fs = require('fs')
// 用框架创建web服务器
const app = express()

// get请求参数获取
app.get('/login', (req, res) => {
    res.send(req.query)
})
// 监听端口
app.listen(3000)

结果：
在这里插入图片描述

post请求获取参数

Express中接收post请求参数需要借助第三方包 body-parser
使用第三方包后，可通过req.body的方式获取参数

js代码：

// 引入express框架
const express = require('express')
const bodyParser = require('body-parser')
// 用框架创建web服务器
const app = express()
// 配置body-parser模板
app.use(bodyParser.urlencoded({ extended: false }))

// post请求参数获取
app.post('/login', (req, res) => {
    res.send(req.body)
})
// 监听端口
app.listen(3000)

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://localhost:3000/login" method="post">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" name="" />
    </form>
  </body>
</html>

结果：
在这里插入图片描述

路由参数

参数获取：req.params

// 引入express框架
const express = require('express')
// 用框架创建web服务器
const app = express()

app.get('/login/:name/:age', (req, res) => {
    res.send(req.params)
})
// 监听端口
app.listen(3000)

在这里插入图片描述

静态资源的处理

通过Express内置的express.static可以方便地托管静态文件

// 引入express框架
const express = require('express')
const path = require('path')
// 用框架创建web服务器
const app = express()

app.use(express.static(path.join(__dirname,'public')))

// 监听端口
app.listen(3000)

这样处理后可方便访问静态资源
例如访问css文件夹下的base.css文件
在这里插入图片描述

express-art-template模板引擎

  • 为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。
  • 使用npm install art-template express-art-template命令进行安装。
// 引入express框架
const express = require('express')
const path = require('path')
const app = express()

// 设置express框架中使用什么模板引擎渲染什么后缀的模板文件
// 参数1：模板文件后缀
// 参数2：模板引擎
app.engine('html',require('express-art-template'))
// 设置模板文件地址
app.set('views', path.join(__dirname, 'views'))
// 设置模板文件的默认后缀,注意细节view没有s
app.set('view engine', 'html')

app.get('/index', (req, res) => {
    res.render('index', {
        msg:'模板引擎的使用'
    })
})

// 监听端口
app.listen(3000)

res.render都干了些什么？

  • 拼接模板路径
  • 拼接模板后缀
  • 指定要拼接模板和数据
  • 将拼接结果响应给客户端

对于公共数据可使用app.locals对象
将变量设置到app.locals对象下面，这个数据在所有的模板中都可以获取到

  • js代码：
// 引入express框架
const express = require('express')
const path = require('path')
const app = express()

// 设置express框架中使用什么模板引擎渲染什么后缀的模板文件
app.engine('html',require('express-art-template'))
// 设置模板文件地址
app.set('views', path.join(__dirname, 'views'))
// 设置模板文件的默认后缀
app.set('view engine', 'html')

app.locals.user = [{
	name: 'zhangsan',
	age: 20
},{
	name: '李四',
	age: 30
}]

app.get('/index', (req, res) => {
	res.render('index', {
		msg: '首页'
	})
});

app.get('/list', (req, res) => {
	res.render('list', {
		msg: '列表页'
	});
})

// 监听端口
app.listen(3000)
  • index.html
{{msg}}
<ul>
  {{each user}}
  <li>{{$value.name}} {{$value.age}}</li>
  {{/each}}
</ul>
  • list.html
{{msg}}
<ul>
  {{each user}}
  <li>{{$value.name}} {{$value.age}}</li>
  {{/each}}
</ul>
  • 结果：
    在这里插入图片描述

在这里插入图片描述

一个大西瓜28
关注
专栏目录
Express框架基本使用
彭世瑜的博客
03-14 1180
用法和Flask 很相似文档： 英文：http://expressjs.com/ 中文：https://www.expressjs.com.cn/ 项目结构 简单示例 server.js 运行 http://127.0.0.1:5000/配置package.json 热重载模式启动 数据交互 接收参数，返回json 请求测试 request对象 文档 http://expressjs.com/en/api.html#reqrequest 对象的属性 request 对象的方法
Express 框架的使用（详细）
segegefe的博客
03-08 1193
文章目录 Express 框架 1.1 Express框架是什么 1.2 Express 框架特性 1.3 原生 node.js 与 Express 框架对比 1.4 基本使用（入门代码） 2. 中间件 2.1 什么是中间件 2.2 中间件的基本使用 2.3 app.use 中间件用法 2.4 中间件应用 2.5 错误处理中间件 2.6 捕获错误 3. express 请求处理 3.1 构建模块化路由 3.2 GET参数的获取 3.3 POST参数的请求 3.4 app.use（）方法的进
Express框架
Han_Zhou_Z的博客
02-25 2071
目录 一、Express框架 1、Express简介 2、Express的优势 3、安装Express 4、创建Web服务器的步骤 （1）引入express模块 （2）调用express()方法创建服务器对象 （3）调用get()方法定义GET路由 （4）启动监听：调用listen()方法 5、Express的中间件(Middleware) （1）中间件机制可以实现的用 （2）中间件主要由中间件方法和请求处理函数这两个部分构成。 （3）常用的中间件方法有app.get()、app.
nodejs框架express快速开始
weixin_30486037的博客
05-07 160
认识express 创建应用 get请求 简述中间件 all方法 use方法1 use方法2 回调函数 获取主机、路径名 Get请求 - query Get请求 - param Get请求 - params send Express介绍 npm提供了大量的第三方模块，其中不乏许多Web框架，比如我们本章节要讲述的一个轻量级的Web框架 ——— Expr...
Express 框架 以及特性
weixin_41984072的博客
04-21 2770
Express框架 Express框架是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。 我们可以使用npminstallexpress命令进行下载 Express框架特性 提供了方便简洁的路由定义方式 对获取HTTP请求参数进行了简化处理 对模版引擎支持程度高，方便渲染动态HTML页面 提供了中间件机制有效控制HTTP请求 ...
Node.js Express 框架：Express 框架中的请求和响应、Express 中间件、Express 请求处理、express-art-template 模板引擎
icemwj的博客
10-12 2949
8、Node.js Express 框架 8.1 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架，提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。 提供了方便简洁的路由定义方式 对获取HTTP请求参数进行了
Express框架安装与基本使用
qq_45737326的博客
02-17 1769
express框架简单使用
node.js express框架简介与实现
10-16
接下来，我们将详细介绍Express框架的基本概念、重要特性、安装方法、入门示例程序以及其中的关键API函数app.use和app.get/app.post的用法。 Express框架主要特性如下： 1. 中间件的使用：Express允许开发者在响应...
基于Express框架的后台管理系统
09-21
这是一个运行在nodeJs，基于Express框架的教学后台管理系统，实现了学生信息管理，教师信息管理等，每个表中也实现了分页及回调地址callBackUrl等功能。
Nodejs学习之旅--Express框架的基本使用（入门级）--钩子函数--art-template模板引擎的使用
听雨少年的博客
07-21 451
一、Express框架简介 在前面Node基础中我们学习了 Node.js 中的 http 模块，虽然知道使用 Node.js 中的 http 模块是可以开发 Web 应用的，处理静态资源，处理动态资源，请求分发（路由）等等，也可以让开发者对 HTTP 协议的理解更加清晰，但是使用起来比较复杂，开发效率低。 npm 提供了大量的第三方模包，其中不乏许多 Web 框架，我们没有必要重复发明轮子，因而选择使用 Express 作为开发框架，因为它是目前最稳定、使用最广泛，而且 Node.js 官方推荐的唯一一个
node.js学习笔记（五）之项目中引入express模块方法
qq_45515863的博客
11-25 2013
express可以为开发者们提供很大的方便，下面介绍一下安装方法。 一、cd到项目目录。 二、npm init --yes 或npm init 创建package.json文件。 三、安装express。 npm install express --save 或 cnpm install express --save 四、引入express使用。 var express=require('e...
node中express引用
qq_41293573的博客
05-11 502
在命令窗口下载express框架 var express=require("express"); var app=express(); app.get("/",function(req,res){ res.send("你好"); }) app.get("/haha",function(req,res){ res.send("哈哈哈哈"); }) app.listen(3000,"127.0....
node引入express的路由router
txun123的博客
04-19 864
// app.js 首页 const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const mysql = require('mysql'); const router = require('./router/index') // 引入路由 // 开启数据库 const connection = mysql.createConnection({
express
Wang_0_的博客
01-14 1728
express 1.创建方式 （1）导入express模块 var express=require('express'); （2） 调用方法，返回app var app=express(); （3）端口监听 最后执行 app.listen(55555);//异步 2.定义方式 根据不同的客户端请求，返回不同的响应 3.app上的方法（app本质：请求监听函数） get app
day4.Express
qq_45801179的博客
04-18 323
初识express Express是基于node.js平台，快速、开放、极简的Web开发框架 通俗理解：Express的作用相当于node.js的内置模块http，是专门用来创建web服务器的。 Express本质：就是一个npm上的第三方包，提供了快速创建Web服务器的方法 中文官网地址：https://www.expressjs.com.cn/ http内置模块用起来比较复杂，开发效率低。而Express是基于内置的http模块进一步封装出来的，能够极大地提高开发效率 1.Express能做什么？ ..
express 概要
H5_zhoujun的博客
06-21 734
1.express是什么？ Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能 2. express的优点? express可以帮助我们快速构建web服务器 / api服务器 express提供了一个快速生成工具 express-generator 快速生成工具： 帮助我们快速创建一个项目的工具 3. 安装...
Node.js之Express详解
热门推荐
WikY
11-11 1万+
Express Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架 使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器。 express的基本使用 安装 npm install express npm i express@最新版本号 创建基本的web服务器 导入express模块 创建web服务器 调用app.listen()函数启动服务器 //1.导入express模块 const express = require('ex
【Node.js】--Express框架
qq_26843541的博客
07-01 585
Express框架使用教程
Express框架的使用
最新发布
06-13
以下是使用Express框架的基本步骤： 1. 安装Express：在命令行中使用npm安装Express模块，命令如下： ``` npm install express ``` 2. 导入Express模块：在Node.js应用程序中导入Express模块，代码如下： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值