Node.js——express项目搭建、请求、响应

个人简介

👀个人主页：前端杂货铺
🙋‍♂️学习方向：主攻前端方向，正逐渐往全干发展
📃个人状态：研发工程师，现效力于中国工业软件事业
🚀人生格言：积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容	参考链接
Node.js（一）	Node.js——fs（文件系统）模块
Node.js（二）	Node.js——path（路径操作）模块
Node.js（三）	Node.js——http 模块（一）
Node.js（四）	Node.js——http 模块（二）

文章目录

- 前言
- 搭建 Express 项目
- 请求报文
- 动态路由
- 响应设置
- 其他响应
- 总结

前言

前面我们进行了原生 Node.js 相关知识的学习，比如文件系统模块、路径操作、http模块等；本篇文章我们学习 Node.js 最热门的框架 Express。

Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

搭建 Express 项目

首先我们创建一个名为 express-learn 的文件夹，在终端命令行中进行如下操作。

// 初始化项目
npm init -y

// 安装 express
npm install express --save

我们创建 01-expressDemo.js 的文件，添加如下代码并运行。

// 引入 express
const express = require('express');// 创建应用对象
const app = express();// 创建路由
app.get('/home', (req, res) => {res.end('hello express');
})// 监听端口
app.listen(3000, () => {console.log('服务已启动，端口 3000 正在监听中...');
})

浏览器打开 3000 端口的 home 路径，页面中即可显示 hello express；至此，最基础的服务已创建完毕。

在这里插入图片描述

请求报文

Express 对请求报文的相关内容的获取进行了一些封装，这使得我们获取一些信息会更加容易。

// 引入 express
const express = require('express');// 创建应用对象
const app = express();// 创建路由
app.get('/home', (req, res) => {// 请求路径console.log(req.path);// 请求查询的内容console.log(req.query);// 请求的 ipconsole.log(req.ip);// 获取请求的主机名console.log(req.get('host'));res.end('hello express');
})// 监听端口
app.listen(3000, () => {console.log('服务已启动，端口 3000 正在监听中...');
})

在浏览器中输入如下请求地址回车

在这里插入图片描述

查看控制台中打印的信息

在这里插入图片描述

动态路由

在下面等代码中，/name/:id 是一个动态路由，:id 是一个占位符，代表可以匹配任何路径的参数。

const express = require('express');
const { names } = require('./name.json');const app = express();// 定义一个动态路由，其中:id是动态的参数
app.get('/name/:id', (req, res) => {// 获取请求路径中的 idconst { id } = req.params;let result;names.forEach(item => {if (item.id == id) {result = item;return;}});// 未匹配到，显示 Not Foundif (!result) {res.end(`Not Found`);// 匹配成功，显示 id: name} else {res.end(`${result.id}: ${result.name}`);}    
})app.listen(3000, () => {console.log('服务已启动，端口 3000 正在监听中...');
})

在 name.json 中添加如下代码。

{"names": [{"id": "1","name": "zhangsan"},{"id": "2","name": "lisi"},{"id": "3","name": "wangwu"}]
}

在这里插入图片描述

响应设置

下面，我们与原生响应设置进行对比，认识 express 的响应写法

状态码：res.statusCode = 200 VS res.status(200)
响应头：res.setHeader('hello', 'express') VS res.set('hello', 'express')
响应体：res.end('hello world') VS res.send('hello world')

const express = require('express');const app = express();app.get('/response', (req, res) => {// 原生响应// res.statusCode = 404;// res.statusMessage = 'hello'; // 自定义状态消息// res.setHeader('hello', 'express');// res.end('response');// express 响应// 设置状态码res.status(200);// 设置响应头res.set('hello', 'express');// 设置响应体res.send('hello world')
})app.listen(3000, () => {console.log('服务已启动，端口 3000 正在监听中...');
})

在这里插入图片描述

其他响应

跳转响应：刷新页面时会跳转页面到指定网址，如下代码会跳转至百度网页。
下载响应：使用路径拼接，刷新页面时会下载指定文件内容。
JSON响应：刷新页面时响应 JSON 类型数据
响应文件内容：使用路径拼接，刷新页面时会响应 html 中的内容

    // 跳转（重定向）响应res.redirect('https://baidu.com')// 下载响应res.download(__dirname + '/package.json');// JSON 响应res.json({name: '前端杂货铺',slogon: '有一分热，发一分光'})// 响应文件内容res.sendFile(__dirname + '/test.html')