software

老的有效，Juan！monolithic 足够，几乎总是。

发布: (2025年12月21日 GMT+8 05:41)
5 分钟阅读
原文: Dev.to

Source: Dev.to

介绍

有一句常说的话：“你需要尽快准备好 MVP（最小可行产品）。”

对于一个简单的着陆页，通常需要：

  • 一个捕获用户电子邮件和姓名的联系表单
  • 一个用于接收表单数据的 API 端点
  • 基本的健康检查路由

目标是在快速实现功能的同时，保持代码库的可维护性。

使用 React 和 Vite 的方法

如果你更喜欢现代的 JavaScript 技术栈，可以使用 Vite 来搭建一个 React 项目：

npm create vite@latest

项目结构

  • Header 组件
  • Footer 组件
  • MainContent 组件，用于包裹不同的页面区块

路由

使用路由库（例如 react-router-dom）可以将所有未知的 URL 重定向回首页：

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

{/* 示例路由配置 */}
<BrowserRouter>
  <Routes>
    {/* 在此添加你的路由 */}
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</BrowserRouter>

后端（Node.js）

创建一个小型的 Express 服务器，包含以下路由：

// server.js
import express from "express";
import cors from "cors";
import helmet from "helmet";
import xss from "express-xss-sanitizer";

const app = express();
app.use(cors());
app.use(helmet());
app.use(express.json());
app.use(xss());

app.post("/api/contact", (req, res) => {
  const { name, email } = req.body;
  // TODO: 发送邮件或存入数据库
  res.status(200).json({ message: "Contact received" });
});

app.get("/api/health", (req, res) => {
  res.status(200).json({ status: "OK" });
});

app.get("/", (req, res) => {
  res.send("API is running");
});

app.listen(3000, () => console.log("Server listening on port 3000"));

测试与安全

  • 安全性：express-xss-sanitizer 有助于减轻 XSS 攻击。
  • 测试：使用 Jest 对路由处理函数进行单元测试。

使用纯 HTML、Tailwind 和 GSAP 的更简洁方法

对于一个直接的着陆页，通常不需要 React。只需通过 CDN 加载 Tailwind CSS 和 GSAP（用于动画）的静态 HTML 文件，几分钟即可搭建完成。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landing Page</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
</head>
<body class="flex flex-col min-h-screen">

  <header class="bg-gray-800 text-white p-4">
    <h1 class="text-2xl">Welcome</h1>
  </header>

  <main class="flex-grow p-4">
    <form id="contactForm" class="space-y-4">
      <input type="text" name="name" placeholder="Name" class="border p-2 w-full" required />
      <input type="email" name="email" placeholder="Email" class="border p-2 w-full" required />
      <button type="submit" class="bg-blue-500 text-white p-2">Submit</button>
    </form>
  </main>

  <footer class="bg-gray-200 text-center p-4">
    © 2025 My Company
  </footer>

  <script>
    // Simple GSAP animation
    gsap.from("header", { y: -50, opacity: 0, duration: 0.8 });
    gsap.from("footer", { y: 50, opacity: 0, duration: 0.8 });

    // Form submission
    document.getElementById('contactForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData.entries());

      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (response.ok) {
        alert('Thank you! Your message has been sent.');
        e.target.reset();
      } else {
        alert('Something went wrong. Please try again.');
      }
    });
  </script>
</body>
</html>

为什么这样有效

  • 速度：无需构建步骤；直接打开 HTML 文件即可。
  • 简洁性：单文件，依赖最少。
  • 面向未来：如有需要，可 later 用 React 应用替换静态页面。

平衡 DRY 与 KISS

开发者常常强调 DRY（不要重复自己），但可能忽视 KISS（保持简单，傻瓜）。虽然避免重复很有价值，但过度工程化会拖慢交付。对于 MVP：

  1. 从简单开始 – 一个单页 HTML 加上一个小型后端。
  2. 迭代 – 仅在复杂度足以证明时才将其重构为组件或微服务。

结论

  • 如果你需要快速的 MVP，普通的 HTML/CSS 页面加上一个最小的 Node.js API 通常已经足够。
  • 当你预期需要更丰富的交互或更大的代码库时，使用 React 和 Vite。
  • 始终牢记 KISS 原则：简洁能够加快开发速度并减少错误。

祝编码愉快！ 🚀

Back to Blog

相关文章

阅读更多 »