4202年的Node web框架和Express入门

本文主要介绍了Node.js Web服务器生态系统，包括服务端框架、服务端渲染（SSR）技术、全栈框架以及如何使用Express.js框架入门Web应用开发。

webserver生态

服务端框架

分类	名称	开源协议	GitHub地址	星标数量（约）
服务端框架	Express	MIT	expressjs/express	63.7k
服务端框架	Koa2	MIT	koajs/koa	34.8k
服务端框架	Hapi	BSD-3-Clause	hapijs/hapi	14.5k
服务端框架	Fastify	MIT	fastify/fastify	30.5k
服务端框架	NestJS	MIT	nestjs/nest	64.2k
SSR框架	Next.js	MIT	vercel/next.js	120k
SSR框架	Nuxt.js	MIT	nuxt/nuxt.js	51.8k
全栈框架	SvelteKit	MIT	sveltejs/kit	-
全栈框架	TSRPC	MIT	tsrpc/tsrpc	1.7k

请注意，SvelteKit作为Sapper的继任者，继续在Svelte的主仓库下发展，因此没有单独的星标数量。Svelte项目的GitHub地址是sveltejs/svelte，它包含了SvelteKit的代码。

sveltejs/svelte 当前约76.4k star

next的增长真是太恐怖了，能力只停留在hello word的层次严重阻碍了我的进步。找个机会也搞一搞next去

整个node相关的博客只会出现express/koa、fastify、next/nuxt以及TSPRC

截止时间：2024年04月19日12:19:16

大写注意！！！

还有一些框架就不写了，有兴趣可以自己去找一找教程学习

Express

Express是一个灵活的Node.js Web应用框架，提供了一系列强大的特性帮助创建各种Web应用和API。它是最流行的Node.js框架之一，以简单、灵活著称。

特点

简洁的API：Express提供了简洁而强大的API，使得开发Web应用变得非常直接和便捷。
中间件架构：通过使用中间件，可以轻松扩展Express应用的功能。
路由系统：Express的路由系统允许创建RESTful Web服务和应用。
高度可定制：Express几乎不对Node.js本身进行抽象，给开发者提供了极高的自由度和灵活性。
强大的社区支持：拥有庞大的社区，提供了丰富的插件和中间件，方便功能的扩展。

Express "Hello, World!" 示例

javascript 复制代码

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Express：Hello, World!');
});

app.listen(3000, () => {
  console.log('App listening on http://localhost:3000/');
});

Koa2

Koa2是由Express原班人马打造的一个新的Web框架，它更加轻量级，使用async/await关键字来避免回调地狱，提高代码的可读性和可维护性。

特点

现代化的语法：Koa2充分利用ES2017的async/await语法，使得异步代码更加清晰。
轻量级：Koa2本身非常轻量，核心模块只包含基础的功能。
错误处理优秀：通过中间件的上下文（ctx）机制，提供了更加强大和方便的错误处理方式。
高度可定制：和Express类似，Koa2也提供了高度的可定制性，可以根据需要添加各种插件和中间件。
优雅的API设计：Koa2的API设计简洁优雅，易于理解和使用。

Koa2 "Hello, World!" 示例

javascript 复制代码

const Koa = require("koa");
const app = new Koa();

app.use(async (ctx) => {
  ctx.body = "Koa：Hello, World!";
});

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000/");
});

Hapi

Hapi是一个强大的服务器框架，用于构建应用程序和服务。它允许开发者专注于编写可重用的应用逻辑，而不是花时间在低级协议处理上。

特点

丰富的功能：Hapi提供了丰富的功能，如输入验证、缓存、认证等，这些都是内置支持的。
插件系统：Hapi的一个核心概念是插件系统，它允许你轻松地将功能分割成独立的可重用模块。
配置导向：Hapi的配置导向特性使得路由和服务的配置变得非常直观。
社区支持：虽然社区规模不如Express，但Hapi拥有一群忠实的用户和贡献者，提供了许多高质量的插件。
用于大型应用：Hapi的设计理念适合构建大型应用和服务，提供了强大的工具和架构来支持复杂的应用需求。

Hapi "Hello, World!" 示例

javascript 复制代码

const Hapi = require('@hapi/hapi');

const init = async () => {
    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: (request, h) => {
            return '@hapi/hapi：Hello, World!';
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

init();

这些框架各有特色，选择哪个框架取决于项目需求、团队熟悉度以及对特定特性的需求。

Fastify

Fastify以其高性能为主要卖点，它专注于提供最快的路由和最低的延迟响应，适合构建高性能的Web应用和API。Fastify还提供了丰富的插件生态系统，方便扩展功能。

特点

高性能：Fastify设计时考虑到了高性能需求，其路由和响应处理非常快速。
低开销：通过高效的架构设计，Fastify尽量减少了额外的性能开销。
插件系统：Fastify拥有一个强大的插件生态系统，允许开发者轻松扩展框架功能。
模式验证：内置支持JSON Schema，提供了强大的路由请求和响应数据验证功能。
开发者友好：提供了详细的文档和清晰的开发体验，使得开发者可以快速上手和构建应用。

Fastify "Hello, World!" 示例

下面是一个使用Fastify创建的简单"Hello, World!"应用示例：

javascript 复制代码

const fastify = require("fastify")({ logger: true });

// 声明路由
fastify.get("/", async (request, reply) => {
  return "Fastify：hello word";
});

// 启动服务器
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
    fastify.log.info(`server listening on ${fastify.server.address().port}`);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};
start();

在这个示例中，首先通过调用fastify()函数创建了一个Fastify实例，其中启用了日志记录功能。然后，使用.get()方法声明了一个路由，当访问根路径(/)时，返回一个包含hello: 'world'的JSON对象。最后，通过调用start()函数启动服务器，监听3000端口。

NestJS

NestJS是一个用于构建高效、可靠的服务器端应用程序的框架。它主要使用TypeScript开发，但也支持纯JavaScript。NestJS以Angular的设计模式为灵感，提供了出色的模块化、面向切面编程（AOP）以及微服务支持。这使得构建复杂的后端应用更加系统化和模块化。NestJS可以基于Express或可选地基于Koa来运行，因此它结合了这两个框架的优点，并在此基础上提供了一个层次化的、综合性的框架。

特点

TypeScript支持：NestJS是以TypeScript为首选语言构建的，利用TypeScript的强类型和最新ECMAScript特性，提高了代码的质量和可维护性。
模块化：通过模块化的方式组织代码，每个模块负责一个独立的功能，有助于保持代码的整洁和可管理性。
面向切面编程（AOP）：支持面向切面编程，允许开发者切入应用的不同生命周期，例如日志记录、权限控制等，这增加了代码的复用性和灵活性。
微服务支持：内置了微服务模块，可以轻松创建微服务架构的应用，支持多种微服务传输层。
灵活性：虽然NestJS提供了许多约定，但它设计得非常灵活，可以根据需要轻松替换内部组件。
丰富的生态系统：拥有丰富的模块和库供选择，可以轻松集成各种功能，如数据库、身份验证、文件上传等。

NestJS的设计哲学和架构模式，尤其是其对TypeScript的深度集成和模块化的方式，使其成为构建复杂、大型后端应用的理想选择。它的这些特点尤其适合团队开发和企业级应用，可以帮助开发者和团队提高开发效率，同时保持代码的可维护性和可扩展性。

全栈框架

Sapper/SvelteKit

Sapper/SvelteKit 是基于 Svelte 的应用框架，旨在为构建高效的全栈应用提供工具和约定。SvelteKit 作为 Sapper 的继任者，带来了改进的路由、服务端渲染（SSR）和静态站点生成（SSG）功能。与 React 和 Vue 不同，Svelte 在构建时进行编译，生成高效的 JavaScript 代码，以减轻客户端的负担。

特点

高效的编译：在构建时将应用编译为高效的 JavaScript 代码，优化运行时性能。
全栈能力：提供一套完整的工具和约定，支持从前端到后端的全栈开发。
改进的路由和渲染：引入改进的路由系统和服务端渲染（SSR）/静态站点生成（SSG）功能，提升应用性能和SEO。
易于使用：设计简洁，易于学习和使用，适合各种规模的项目开发。

TSRPC

TSRPC 是一个基于 TypeScript 的高效、灵活的 RPC 框架，旨在提供一种类型安全的方式来构建客户端和服务器端的通信。它利用 TypeScript 的强类型特性，确保通信双方的数据类型一致性，从而减少运行时错误。TSRPC 适用于需要高性能通信的分布式系统、游戏服务器、实时应用等场景。

特点

类型安全：利用 TypeScript 提供的类型系统，实现请求和响应的类型安全，减少类型错误。
高性能：设计时考虑到性能，适用于需要高性能通信的场景。
易于使用：提供了简洁的 API 和清晰的文档，使得开发者可以快速上手。
跨平台：可以在多种平台和环境中使用，包括 Node.js、浏览器等。
灵活性：支持多种通信协议，如 HTTP/HTTPS、WebSocket 等，适应不同的应用需求。

服务端渲染（SSR）

Next.js 和 Nuxt.js

Next.js 和 Nuxt.js 分别是基于 React 和 Vue 的 SSR 框架。它们提供服务端渲染的能力，以改善 Web 应用的首次加载性能和 SEO。这两个框架均提供了一套完整的开发体验，包括路由、状态管理和构建工具，简化了 SSR 应用或静态站点的开发过程。

特点

服务端渲染：通过服务端渲染提升首次加载性能和 SEO。
完整的开发体验：提供路由、状态管理和构建工具等完整的开发体验。
易于上手：设计理念和文档齐全，便于新手学习和使用。
灵活的构建选项：支持静态站点生成（SSG）和服务端渲染（SSR），适应多种部署需求。

Express.js 框架入门

Express.js 是一个灵活的 Node.js Web 应用框架，提供了一系列强大的特性帮助你创建各种 Web 和移动设备应用。下面我们将通过基础概念、模板引擎、静态文件服务以及如何构建 RESTful API 来入门 Express.js。

基础概念：路由、中间件

路由（Routing）：

路由是Web应用的核心，它指定了应用如何响应客户端对特定端点的请求。端点是指URI（或路径）和特定的HTTP请求方法（如GET、POST等）的组合。

示例代码：

javascript 复制代码

const express = require('express');
const app = express();

// 定义一个简单的路由
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(3000, () => {
  console.log('App listening on port 3000');
});

中间件（Middleware）：

中间件是Express应用的核心，它可以访问请求对象（req）、响应对象（res）和应用的请求-响应循环中的下一个中间件函数。

示例代码：

javascript 复制代码

app.use((req, res, next) => {
  console.log('Time:', Date.now());
  next();
});

模板引擎和静态文件服务

模板引擎：

Express允许你使用模板引擎，从而可以在服务器端生成HTML，带有动态数据并发送到客户端。

示例代码（使用EJS模板引擎）：

javascript 复制代码

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Express Demo', message: 'Hello, Express with EJS!' });
});

静态文件服务：

Express提供了一个内置的中间件express.static来服务静态资源文件，如图片、CSS和JavaScript文件。

示例代码：

javascript 复制代码

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

构建 RESTful API

构建RESTful API意味着创建符合REST架构风格的Web服务。REST利用HTTP请求方法来表示操作，使得Web服务设计更加简洁和统一。

示例代码：

javascript 复制代码

// 获取所有资源
app.get('/api/resources', (req, res) => {
  res.send('List of resources');
});

// 创建一个新资源
app.post('/api/resources', (req, res) => {
  // 创建资源逻辑
  res.send('Resource created');
});

// 获取指定ID的资源
app.get('/api/resources/:id', (req, res) => {
  let id = req.params.id;
  // 根据id获取资源逻辑
  res.send(`Resource with id ${id}`);
});

通过以上示例，你可以看到Express.js如何简洁高效地支持Web应用开发，从基本的路由和中间件到复杂的RESTful API设计。Express的灵活性和简单性使其成为Node.js开发者的首选框架之一。