express框架（一）

express介绍

express是一个基于Node.js平台的极简、灵活的WEB应用开发框架，官方地址：https://www.expressjs.com.cn/
简单而言，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）

express使用

express安装

npm init
npm i express

体验express

新建项目，并执行以下命令初始化项目。

npm init

新建index.js

// 1. 引入模块
const express = require('express');

//2. 创建应用对象
const app = express();

// 3. 创建路由
app.get('/home', (req, res) => {
    // 请求方法是get,请求路径是home时，执行回调函数
    res.end('hello express');
});

// 4. 监听端口
app.listen(3000, () => {
    console.log('服务已经启动...');
})

可以发现与原生 Node.js HTTP 模块创建的模块相似，具体可以翻看前面的文章，当你使用原生 Node.js HTTP 模块时，你直接与 HTTP 协议交互。这意味着你需要手动处理诸如路由、中间件、错误处理等功能。express则在 HTTP 模块的基础上封装了一层，提供了一些额外的功能，比如路由管理、中间件支持、错误处理（后续会写到这些内容）等。所以，使用 Express 编写的应用程序通常更精简，也更容易维护。

const http = require('http');

const server = http.createServer((request, response) => {

    response.end('Hello Http Server');
});

server.listen(9000, () => {
    console.log('服务已启动');
});

express路由

官方定义： 路由确定了应用程序如何响应客户端对特定端点的请求，如何去理解这一段，举个例子：

你是一个餐馆老板，你的餐馆就是一个Web应用，而你雇佣了一些服务员（路由处理函数）来处理顾客（客户端）的需求。餐馆里有不同区域，比如甜品区、主食区和饮料区等，这些区域就像是Web应用中的不同端点（endpoints）或URL路径。
当顾客进来时（客户端发送请求），他们可能会直接说他们想要什么：“我要一份蛋糕”或者“给我一杯咖啡”。服务员会根据顾客的要求带他们到正确的区域，并处理他们的订单。

现在让我们把这个类比转换成Express中的路由概念：

• 顾客（客户端） - 这些是访问你网站的人或者应用程序。
• 订单（请求） - 顾客提出的具体需求，例如请求一个网页或API数据。
• 服务员（路由处理函数） - 当请求到达某个特定的URL时，Express中的路由处理函数会被触发，以处理该请求并返回相应的响应。
• 不同区域（端点/URL路径） - 这些是网站上的不同页面或者API的不同部分。例如 /users 可能是获取用户列表的页面，而 /posts/:id 则可能是获取特定帖子详情的页面。

所以，当你设置Express路由时，你实际上是在告诉服务器，“如果有人访问这个特定的URL，请运行这段代码（路由处理函数）。”

路由的使用

一个路由的组成有请求方法 ，路径 和 回调函数 组成
express 中提供了一系列方法，可以很方便的使用路由，使用格式如下：

app.<method>(path，callback)

代码示例：

// 1. 引入模块
const express = require('express');

//2. 创建应用对象
const app = express();

// 3. 创建路由
app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    // 请求方法是get,请求路径是home时，执行回调函数
    res.end('首页');
});

// post路由
app.post('/login', (req, res) => {
    res.end('login');
});

// 匹配所有的请求方法
app.all('/serach', (req, res) => {
    res.end('找到相关结果');
});

// 自定义404路由
app.all("*", (req, res) => {
    res.end('<h1>404 Not Found</h1>');
})


// 4. 监听端口
app.listen(3000, () => {
    console.log('服务已经启动...');
})

后端路由和前端路由的区别

相较于Vue.js中的router，Express 后端路由通常有以下几种作用：

作用	描述
处理HTTP请求	1. 在Express中，路由主要用于处理客户端发来的HTTP请求，这些请求可以使GET、POST、PUT、DELETE等HTTP方法。2. 每个路由都有一个对应的处理函数，用来决定如何处理请求以及生成响应。
服务端逻辑	路由通常涉及到服务端的业务逻辑，例如数据库操作、身份验证、授权。
返回HTTP响应	Express中的路由最终会返回一个HTTP相应给客户端，这个相应可以是JSON数据、HTML页面、图像文件等。
动态内容生成	路由可以动态生成相应，这意味着即使客户端请求相同的URL，也可能因为服务器端的状态变化而得到不同的响应。
状态无感知	除非使用session或者cookie来保存状态信息，否则Express路由通常是无状态的，即每次请求都是独立的。

vue.js前端路由

作用	描述
处理用户界面导航	Vue.js 中的路由主要用于处理用户界面上的导航，而不是真正的 HTTP 请求。当用户点击链接或使用浏览器的历史 API (如 pushState) 导航时，Vue Router 会更新应用的状态和视图，而不需要重新加载整个页面。
单页应用 (SPA)	Vue.js 应用通常是单页应用，这意味着页面不会完全刷新，而是通过 JavaScript 动态替换部分内容。
组件渲染	Vue Router 根据用户当前访问的 URL 路径，决定应该渲染哪个组件。这使得开发者可以根据 URL 路径展示不同的内容。
状态管理	- Vue Router 可以维护应用的状态，例如当前激活的路由、参数和查询字符串等。
导航守卫	Vue Router 提供了导航守卫功能，可以在路由跳转之前或之后执行一些逻辑，例如权限检查、加载数据等。

总结来讲：

• Express 路由 主要用于处理 HTTP 请求和响应，实现服务器端的逻辑。
• Vue.js 路由 主要用于在单页应用中处理用户的导航和组件的渲染，实现客户端的逻辑。

获取请求参数

// 1. 引入模块
const express = require('express');

//2. 创建应用对象
const app = express();

app.get('/request', (req, res) => {
    // 原生操作
    console.log(req.method);
    console.log(req.url);
    console.log(req.httpVersion);
    console.log(req.headers);

    // express 操作
    console.log(req.path); // = new URL...
    console.log(req.query); // 如query.keyword
    console.log(req.ip); // 获取ip
    console.log(req.get('host')); // 获取请求头
})

// 4. 监听端口
app.listen(3000, () => {
    console.log('服务已经启动...');
})

路由参数的提取

// 引入模块
const express = require('express');

// 创建应用对象
const app = express();

// 创建路由通配符 比如127.0.0.1:3000/100201.index,127.0.0.1:3000/100311.index
app.get('/:id', (req, res) => {
    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    // 获取路由参数 要和占位符一致
    console.log(req.params.id);
    res.end('商品详情');
});

// 监听端口
app.listen(3000, () => {
    console.log('服务已经启动...');
})