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('服务已经启动...');
})