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

个人简介

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

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

前言

前面我们进行了原生 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);
    // 请求的 ip
    console.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) => {
	// 获取请求路径中的 id
    const { id } = req.params;
     
    let result;
    names.forEach(item => {
        if (item.id == id) {
            result = item;
            return;
        }
    });

	// 未匹配到，显示 Not Found
    if (!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')

总结

本篇文章我们学习了如何搭建 Express 项目，并了解了请求报文、动态路由、响应等知识，在学习的过程中大家可以和原生 node 对比一下，看看有哪些不同！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

1. Node.js教程（菜鸟教程）
2. Node.js零基础视频教程（尚硅谷 · 李强）