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('服务已经启动...');
})
相关推荐
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端李易安13 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
远之喵17 小时前
@tinyhttp/app VS express
express
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山1 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
老攀呀1 天前
安装多个nodejs版本(nvm)
node.js
佚名程序员1 天前
【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用
安全·node.js
zxg_神说要有光2 天前
快速入门 AI:调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员2 天前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js