当前位置: 开发笔记 > 编程语言 > 正文

ExpressNodeJsWeb框架入门笔记

作者：0o墨滴成殇 | 来源：互联网 | 2023-05-28 10:50

Express是一个简洁而灵活的node.jsWeb应用框架,提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性：
可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

前提知识

NodeJs

NPM

创建项目

初始化

这里我们使用npm初始化一个项目,直接回车使用默认参数

$ mkdir ~/myExpress
$ cd ~/myExpress
$ npm init

安装Express

$ npm install express --save

创建入口文件app.js

$ touch app.js

基础示例

使用IDE打开项目(推荐Vscode或者WebStorm) 编辑app.js文件

// 引入依赖
var express = require('express')
var app = express()

// 定义port常亮
const port = 3030;

// 创建一个简单GET路由
app.get("/",function(req,res){
    res.send("Hello,World");
});

// 启动服务,第二个参数为callback() 
app.listen(port,function(){
    console.log(`Express 应用启动在${port} 端口`);
});

命令行切换到app.js目录下

$ node app.js

打印出Express 应用启动在3030 端口,在浏览器或者CURL访问http://localhost:3030即可看到Hello,World

$ curl -XGET http://localhost:3030/

路由设置

在上面的代码示例中我们使用了一个简单HelloWorld代码,使用了GET的请求方式,同样的Express也支持其他的Method,如POST,PATCH,DELETE等等,下面我们简单的写一下

// 引入依赖
var express = require('express')
var app = express()

// 定义port常亮
const port = 3030;

// 创建一个简单GET路由
app.get("/",function(req,res){
    res.send("Hello,World");
});

app.post("/post",function(req,res){
    var method = req.method;
    res.send(`发现${method} 请求`)
});

app.patch("/patch",function(req,res){
    var method = req.method;
    res.send(`发现${method} 请求`)
});

app.delete("/delete",function(req,res){
    var method = req.method.name;
    res.send(`发现${method} 请求`)
});

// 启动服务,第二个参数为callback() 
app.listen(port,function(){
    console.log(`Express 应用启动在${port} 端口`);
});

如果你需要添加全部的请求方式,可以使用app.all(path,callback);

由于POST等请求不能再浏览器输入地址访问,这里我们继续使用CURL来测试,没有这个工具的可以使用PostMan测试.

$ curl -XGET http://localhost:3030        
Hello,World

$ curl -XPOST http://localhost:3030/post   
发现POST 请求

$ curl -XPATCH http://localhost:3030/patch  
发现PATCH 请求

$ curl -XDELETE http://localhost:3030/delete
发现DELETE 请求

静态文件

Express可以设置某个目录为静态文件目录,里面的资源我们可以直接通过URL访问,在app.js同级目录下执行以下脚本

$ mkdir public && cd public
$ echo "这里是静态资源文件内容> ./static.html

修改app.js文件,添加以下代码

app.use(express.static('public'))

访问http://localhost:3030/static.html

$ curl -XGET http://localhost:3030/static.html
这里是静态资源文件内容

同样的,你也可以放入其他类型的资源,如JSON文件,图像,纯文本,CSS等.

Route模块

在上面示例中,我们可以使用下面的代码创建路由

var express = require('express')
var app = express()

app.get("/",function(req,res,next){})

app.get("/book",function(req,res,next){})

app.post("/book",function(req,res,next){})

显然这样并不利于我们的代码管理,因此这里引入express.Route模块来模块化处理路由,下面我们有如下需求:

创建 GET /
创建 GET /book/nodejs
创建POST /book/

其中 /book/**单独存放于路由模块中

app.js同级目录下创建book.js文件代码内容如下:

var express = require('express');
// 创建router
var router = express.Router();

// 在router中设置路由
router.get('/:id', function (req, res, next) {
    var book = {
        id: req.params.id,
        name: "深入浅出NodeJS"
    };
    res.send(JSON.stringify(book))
});

router.post("/", function (req, res, next) {
    res.send("POST /book")
});

// 对外暴露
module.exports = router;

同样的app.js则需要引入上面router文件

// 引入依赖
var express = require('express')
var app = express()

// 引入router
var book_router = require('./book')

// 定义port常亮
const port = 3030;


// app 使用该router
app.use('/book',book_router)

// 创建一个简单GET路由
app.get("/",function(req,res){
    res.send("Hello,World");
});


// 启动服务,第二个参数为callback() 
app.listen(port,function(){
    console.log(`Express 应用启动在${port} 端口`);
});

启动应用,在命令行中访问,即结果如下:

$ curl -XGET http://localhost:3030/             
Hello,World

$ curl -XGET http://localhost:3030/book/ISBN-123
{"id":"ISBN-123","name":"深入浅出NodeJS"}

$ curl -XPOST http://localhost:3030/book/       
POST /book

NodeJs中的中间件

中间件,英文middleWare ,假设我们需要在控制台打印所有请求的消耗的时间信息,以及URL,那么我们给每个路由都加上代码,显然是很愚蠢的,那么我们可以为这些路由请求设置中间件,利用中间件来而完成统计.

修改appjs代码为以下内容:

// 引入依赖
var express = require('express')
var app = express()

const port = 3030

/**
 *  定义中间件函数
 * @param req   ---> requesr
 * @param res   ---> response
 * @param next  ---> 将请求传递到下一个中间件函数
 */
function logMiddleWare(req, res, next) {
    var url = req.originalUrl;
    // 记录开始执行时间
    var start = Date.now();
    // 向request中写入数据,在后面的中间件函数中可以获取到该参数
    req.start_time = start
    // 执行下一个中间件函数(在这里也就是路由的callback)
    next();
    // 记录完成时间
    var end = Date.now();
    // 打印日志
    console.log(`${url} 请求完成时间:`, end - start, "ms");
}

// 使用该中间件
app.use(logMiddleWare)

app.get("/time", function (req, res, next) {
    console.log(`获取到的参数start_time = ${req.start_time}`);
    res.send(`/${req.start_time}`);
});

// 服务启动
app.listen(port, function () {
    console.log(`服务启动在${port} 端口`);
});

我们测试以下:

curl -XGET http://localhost:3030/time 返回

`1541220185998`

,这里主要看一下控制台打印的信息

服务启动在3030 端口
获取到的参数start_time = 1541220185998
/time 请求完成时间: 6 ms

可以看到,首先是服务启动在3030 端口信息,接着我们开始请求/time,记录下了start_time,并写入到request中,接着在/time的回调函数中打印了该参数,执行完成之后,继续返回到 logMiddleWare 中记录下end_time,打印出耗时 6 ms

集成持久层(redis)

NodeJS支持多种数据库持久操作,比如常用的Redis,Mysql,MongoDB等等,那么这里我们简单的使用redis作为测试以下.首先说一下需求:

创建一个请求为 POST /redis/:content 将content写入到redis中
创建一个请求为 GET /redis 用户获取之前的设置

Ps: 这里我是用了docker来部署了一个redis服务器,如下

$ docker pull redis
$ docker run -d -p 6379:6379 --name redis_6379 redis
$ docker ps # 观察Redis运行情况
# 重启redis  `docker restart redis_6379`

首先你需要安装redis依赖,项目目录下执行npm install redis --save安装即可,修改app.js内容如下

// 引入依赖
var express = require('express');
var redis = require('redis')
var app = express()

const port = 3030
const redis_port = 6379

// 创建Redis client 端口为6379
var client = redis.createClient(redis_port,'localhost');

/**
 * 设置Redis的回调事件,当redis出现连接失败的时候,执行之
 */
client.on('error',function (error) {
    console.log("Redis 连接出现异常")
});


app.post("/redis/:content",function (req, res, next) {
    var cOntent= req.params.content;
    // 设置字符串到redis中 KV结构
    client.set('KEY',content)
    res.send("Redis设置完成")
})

app.get("/redis",function (req, res, next) {
    client.get('KEY',function (err, value) {
        res.send(value)
    })
})

// 服务启动
app.listen(port, function () {
    console.log(`服务启动在${port} 端口`);
});

测试内容如下

$ curl -XPOST http://localhost:3030/redis/Keep_it_simple_and_stupid
Redis设置完成

$curl -XGET http://localhost:3030/redis 
Keep_it_simple_and_stupid

当然也可以在Redis客户端中查询数据

推荐阅读

web
基于Node.js的高性能实时消息推送系统：利用Socket.IO与Express实现高并发消息转发

基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架，实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线，并确保消息的实时性和可靠性，适用于需要即时通信的应用场景。 ... [详细]

蜡笔小新 2024-11-01 11:20:11
web
基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具：首阶段——Vue.js项目初始化及开发环境配置

在近期的一个H5游戏开发项目中，需要将Excel数据转换为JSON格式。经过调研，市面上缺乏合适的工具满足需求。因此，决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段，即Vue.js项目的初始化及开发环境的配置过程，详细阐述了如何搭建高效的前端开发环境，确保后续功能开发的顺利进行。 ... [详细]

蜡笔小新 2024-10-26 07:41:45
range
利用 Gmail API 实现 Node.js 定时自动发送邮件功能

功能：利用Node每天定时发送邮件给指定邮箱。需要的npm包:nodemailernode-schedule实现步骤:配置nodemailer发送邮件开启定时邮件发送 ... [详细]

蜡笔小新 2024-10-23 13:43:42
header
如何在 Node.js 环境中将 CSV 数据转换为标准的 JSON 文件格式？

如何在 Node.js 环境中将 CSV 数据转换为标准的 JSON 文件格式？ ... [详细]

蜡笔小新 2024-11-02 17:32:17
import
深入解析React组件的概念与应用

React组件是构成用户界面的基本单元，每个组件都封装了特定的功能和逻辑，具备高度的独立性和可复用性。通过将不同大小和功能的组件组合在一起，可以构建出复杂且功能丰富的页面，类似于拼图游戏中的各个部分，最终形成一个完整的视觉效果。 ... [详细]

蜡笔小新 2024-10-31 19:30:43
datetime
MySQL 错误：检测到死锁，在尝试获取锁时；建议重启事务（Node.js 环境）

在 Node.js 环境中，MySQL 数据库操作时遇到了“检测到死锁，在尝试获取锁时；建议重启事务”的错误。本文将探讨该错误的原因，并提供有效的解决策略，包括事务管理优化和锁机制的理解。 ... [详细]

蜡笔小新 2024-10-31 16:30:01
io
npm 发布 WhalMakeLink 包：链接管理与优化的新选择

WhalMakeLink 是一个强大的 npm 工具，专为项目管理和优化而设计。它能够自动在项目的 README 文件中生成当前工程目录下所有子项目的链接地址，极大提升了开发效率和文档维护的便捷性。通过简单的 `npm init` 命令即可快速启动和配置该工具，适用于各种复杂项目结构。示例演示了其基本用法和功能。 ... [详细]

蜡笔小新 2024-10-28 10:14:48
post
首次探索 Koa 框架：初学者的入门指南

本文为初学者提供了 Koa 框架的入门指南，通过实例代码展示了如何初始化 Koa 应用及使用中间件。例如，通过 `app.use` 方法添加一个简单的日志中间件，记录每个请求的详细信息，帮助开发者更好地理解和掌握 Koa 的核心功能。 ... [详细]

蜡笔小新 2024-10-26 15:04:16
import
使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能

使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]

蜡笔小新 2024-10-26 12:04:20
web
Node.js 中 fs.linkSync() 方法的深入解析与应用

Node.js 中 fs.linkSync() 方法的深入解析与应用 ... [详细]

蜡笔小新 2024-10-25 11:32:19
post
PHP 大文件分割与分片上传的实现方法及代码示例

在处理大文件上传时，服务端为何无法直接接收？这主要与 PHP 配置文件 `php.ini` 中的几个关键参数有关，如 `upload_max_filesize` 和 `post_max_size`。这些参数分别限制了单个文件的最大上传大小和整个 POST 请求的数据量。为了实现大文件的高效上传，可以通过文件分割与分片上传的方法来解决。本文将详细介绍这一实现方法，并提供相应的代码示例，帮助开发者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-10-24 13:46:22
java
利用TensorFlow.js在网页浏览器中实现高效的人脸识别JavaScript接口

作者|VincentMühle编译|姗姗出品|人工智能头条（公众号ID：AI_Thinker）【导读】随着深度学习方法的应用，浏览器调用人脸识别技术已经得到了更广泛的应用与提升。在 ... [详细]

蜡笔小新 2024-10-23 10:50:38
java
90.bower解决js的依赖管理

转自：https:blog.csdn.netu011537073articledetails52951122前言一个新的web项目开始，我们总是很自然地 ... [详细]

蜡笔小新 2024-10-13 15:51:47
web
深入浅出Webpack：第五章进阶指南

本章节深入探讨了 Webpack 命令的高级功能，涵盖了官方快速入门教程中未涉及的细节。通过实际操作和案例分析，对官方文档进行了详细解读与补充，帮助读者更好地理解和应用这些进阶技巧。 ... [详细]

蜡笔小新 2024-10-29 15:50:25
future
Linux 设备驱动深入解析：设备模型与 devicedriverbus 机制（下篇）

在上篇文章的基础上，本文将继续探讨 Linux 设备驱动中的设备模型与 `devicedriverbus` 机制。在将设备注册到总线之前，需要先创建 `device` 对象。可以通过静态定义 `device` 结构体变量，并调用 `device_register` 函数来完成这一过程。此外，文章还将详细解析设备模型的内部工作机制，以及 `devicedriverbus` 机制如何实现设备与驱动的自动匹配和管理。 ... [详细]

蜡笔小新 2024-10-26 14:47:15