前端全栈之路

架构选型：

1. Nuxt 是"全栈框架"

代码示例：

javascript 复制代码

// --------文件：server/api/users.get.ts
// 自动成为 API 接口，无需配置路由
export default defineEventHandler(async () => {
  // 直接连数据库
  const users = await db.select('*').from('users');
  return users; 
});


// --------文件：pages/index.vue
<script setup>
// 同构请求，服务端渲染时直接在这里执行，无网络开销
const { data: users } = await useFetch('/api/users');
</script>

<template>
  <div v-for="user in users">{{ user.name }}</div>
</template>

特点：无跨域，无手动路由配置，类型自动推断。

2.Vue + Express or Koa是"组合式架构"

代码示例：

javascript 复制代码

// --------后端项目 (server.js)
const express = require('express');
const app = express();
const cors = require('cors'); // 必须手动处理跨域

app.use(cors()); 

app.get('/api/users', async (req, res) => {
  const users = await db.select('*').from('users');
  res.json(users);
});

app.listen(3001);



// ---------前端项目 (App.vue)
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const users = ref([]);

onMounted(async () => {
  // 必须发起 HTTP 请求，经历网络往返
  const res = await axios.get('http://localhost:3001/api/users');
  users.value = res.data;
});
</script>

特点：需手动配 CORS，需手动配 Axios，需手动配 Router，需维护两个端口。

3.核心架构差异

特性	方案 A: Nuxt.js (SSR/SPA 模式)	方案 B: Vue CLI/Vite + Express
项目结构	单体仓库 (Monorepo 风格) 前端代码 (`pages`, `components`) 和后端代码 (`server/api`) 在同一个项目中。	双体仓库 (Separate Repos) 项目 A: Vue 前端项目 B: Express 后端 (通常分两个 Git 仓库或两个文件夹)
路由系统	文件系统路由在 `pages/` 下创建 `about.vue` 自动变为 `/about` 路由。	手动配置前端需配置 `vue-router`；后端需在 Express 中手写 `app.get('/api/...')`。
数据获取	统一 API (`useFetch` / `useAsyncData`) 同构代码，服务端渲染时自动在服务端请求，客户端 hydration 时跳过。	完全分离前端用 `axios/fetch` 调用 HTTP 接口；后端用 Express 处理请求。
构建产物	智能构建自动代码分割，按需加载。若开启 SSR，输出 Node 服务；若关闭 SSR，输出静态文件。	独立构建前端构建为 `dist/` (静态文件)；后端构建为 Node 进程。
TypeScript	开箱即用自动推断类型，API 接口返回类型自动同步到前端。	需手动配置前后端需分别配置 TS，接口类型通常需共享文件或手动定义。

4.Nuxt 实现前后端分离:

使用 Nuxt.js时：

开发时：享受它的全栈便利（自动路由、内置 API、同构数据）。
部署时 ：通过配置 ssr: false 和 npm run generate，它可以完美变身为一个纯静态前端项目，与你独立的后端（无论是 Express、Java 还是 Go）进行标准的 HTTP API 交互。

Nuxt 是目前平衡"开发效率"与"部署灵活性"的最优解。 只有在后端逻辑极其庞大且必须由独立团队维护时，才考虑拆分出独立的 Express 项目。

Node.js 生态：

Express 、Koa 和 NestJS 是Node.js中最主流的三个后端框架。

Express：老牌经典，生态最丰富，适合快速上手和中小型项目。
Koa：Express 原班人马打造，更轻量、更现代（Async/Await），适合追求代码简洁和深度定制的开发者。
NestJS：后起之秀，架构严谨（类似 Angular/Spring），自带 TypeScript 和模块化，适合大型 enterprise 级项目和团队开发。

特性	Express	Koa	NestJS
诞生时间	2010 (老牌)	2013 (现代)	2017 (新生代)
核心哲学	极简主义 "不 Opinionated"，给你工具，你自己决定怎么组织代码。	极致轻量剥离了 Express 的历史包袱，只保留核心，利用 Async/Await 简化流程。	架构优先 "强 Opinionated"，强制模块化、依赖注入、装饰器，类似 Java Spring 或 Angular。
异步处理	回调函数 / Promise / Mix (早期代码多为回调，新版支持 Promise)	Async / Await (原生) 彻底解决"回调地狱"，代码逻辑线性清晰。	Async / Await + RxJS 基于 Promise，同时支持响应式编程。
中间件模型	线性模型 (Line) 请求 -> 中间件1 -> 中间件2 -> 响应 (`next()` 之后无法再修改响应)	洋葱模型 (Onion) 请求 -> 中间件1(前) -> 中间件2 -> 响应 -> 中间件2(后) -> 中间件1(后) (可在 `await next()` 前后分别处理逻辑)	基于装饰器的管道类似 Angular 的 Guard/Interceptor/Pipe 机制。
TypeScript	支持 (需额外配置类型定义)	支持 (需额外配置)	原生内置 (First-class) 强制使用 TS (也支持 JS 但不推荐)，类型提示极佳。
学习曲线	⭐ (最简单)	⭐⭐ (简单，需理解洋葱模型)	⭐⭐⭐⭐ (较陡，需懂 OOP、装饰器、DI)
适用场景	快速原型、小型 API、微服务、SEO 服务端渲染 (SSR)	对性能有要求、喜欢函数式编程、需要精细控制中间件流程的项目	大型企业应用、复杂业务逻辑、多人协作团队、需要严格规范的项目
官方标语	"Fast, unopinionated, minimalist web framework"	"Next generation web framework for node.js"	"A progressive Node.js framework for building efficient and scalable server-side applications"

1. Express (生态之王)

特点 : 拥有最庞大的中间件生态系统（几乎你需要的所有功能都有现成的 express-xxx 包）。文档极其丰富，遇到问题随便搜都有答案。
缺点: 代码组织自由度过高，容易导致大型项目变成"意大利面条代码"；异步处理在老项目中混杂着回调风格。
代码风格:

javascript 复制代码

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

app.get('/user/:id', (req, res) => {
  // 直接操作 req/res
  res.json({ id: req.params.id });
});

app.listen(3000);

2. Koa (优雅轻量)

特点 : 由 Express 原班人马打造，解决了 Express 的一些历史设计缺陷。核心非常小（仅约 500 行），不包含路由和模板引擎（需自选），强制使用 async/await，利用 洋葱模型 让错误处理和流控制更强大。
缺点: 生态比 Express 稍小；需要自己组装路由、Body 解析等中间件（虽然这也被视为优点，因为你可以只选你需要的）。
代码风格:

javascript 复制代码

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

app.use(async (ctx, next) => {
  // ctx 封装了 req 和 res，更简洁
  if (ctx.path === '/user') {
    await next(); // 洋葱模型核心
    ctx.body = { message: 'Hello' };
  }
});

app.listen(3000);

3. NestJS (企业级架构)

特点 : 引入了 依赖注入 (DI) 、控制器 (Controller) 、模块 (Module) 、服务 (Service) 等概念。代码结构高度统一，非常适合多人协作。内置了对 TypeScript、GraphQL、Microservices、WebSockets 的完美支持。
缺点: 学习曲线陡峭，需要理解很多概念（装饰器、元数据、DI 容器）；对于简单的 Hello World 项目显得过于繁琐（"杀鸡用牛刀"）。
代码风格:

javascript 复制代码

// user.controller.ts
@Controller('users')
export class UserController {
  constructor(private userService: UserService) {} // 依赖注入

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.userService.findOne(id);
  }
}

https://nodejs.org/zh-cn/learn/getting-started/introduction-to-nodejs

https://nuxt.com.cn/

https://expressjs.com/?spm=5176.28103460.0.0.1e5b7551zniBY1

https://www.expressjs.com.cn/?spm=5176.28103460.0.0.1e5b7551zniBY1

https://nestjs.com/?spm=5176.28103460.0.0.1e5b7551zniBY1

https://docs.nestjs.cn/?spm=5176.28103460.0.0.1e5b7551zniBY1