Web 开发技术全景：从基础原理到全栈架构与未来趋势 | 极客日志

编程语言Node.jsNuctAI大前端java

Web 开发技术全景：从基础原理到全栈架构与未来趋势

综述由AI生成Web 开发技术全景涵盖了前端、后端及全栈的核心知识体系。内容详解 HTML/CSS/JavaScript 基础，React/Vue/Angular 框架，Python/Java/Node.js 后端语言，以及数据库与 API 设计。重点阐述工程化部署、性能优化、安全防护策略与职业发展路径。同时探讨 Web3.0、AI 辅助开发等前沿趋势。旨在为开发者提供从入门到进阶的系统性学习路线，强调底层逻辑与持续学习的重要性，助力构建高效稳定的互联网应用。

DockerOne发布于 2026/2/5更新于 2026/5/242.2K 浏览

Web 开发技术全景：从基础原理到全栈架构与未来趋势

一、Web 开发概述：重新理解'构建互联网的技术'

1.1 Web 的诞生：一个改变世界的'简单想法'

1989 年，欧洲核子研究组织（CERN）的物理学家蒂姆・伯纳斯 - 李（Tim Berners-Lee）为了解决'不同实验室的科学家如何共享数据'的问题，提出了一套基于'超文本'的信息交互方案——这便是 Web 的雏形。1991 年，他发布了第一个 Web 服务器（httpd）、第一个 Web 浏览器（WorldWideWeb，后改名为 Nexus）和第一个 Web 页面，正式拉开了 Web 时代的序幕。

最初的 Web 只有'静态页面'：页面内容由 HTML 编写，一旦发布便无法修改，用户只能被动浏览。但这个'让信息自由流动'的想法，迅速引爆了互联网——到 1995 年，全球 Web 服务器数量突破 10 万台，Netscape Navigator 浏览器市场份额超过 90%，Web 开发从'实验室技术'变成了'全民参与的领域'。

1.2 Web 开发的核心定义：不是'写网页'，而是'构建交互系统'

很多人误以为 Web 开发就是'做网页'，但实际上，现代 Web 开发的核心是'构建基于浏览器的交互系统'——它需要连接用户（前端）、数据（后端）和服务（基础设施），实现'用户操作→数据处理→结果反馈'的完整闭环。

举个例子：你在电商网站点击'加入购物车'，背后涉及的 Web 开发逻辑包括：

前端：监听点击事件、验证商品库存、显示加载动画；
后端：接收请求、查询数据库、更新购物车数据、返回结果；
基础设施：服务器负载均衡、数据库缓存、CDN 加速静态资源。

Web 开发的本质，就是将这些分散的技术模块整合，形成稳定、高效、易用的产品。

1.3 Web 开发的三大分支：前端、后端与全栈

1.3.1 前端开发：用户'看得到、摸得着'的层

前端开发（Frontend Development）负责'用户直接交互的界面'，核心目标是'让用户用得舒服'。比如：

手机端淘宝的商品列表滑动效果；
知乎回答页面的'点赞'动画；
在线文档的实时编辑功能。

前端开发的技术栈围绕'浏览器能识别的语言'展开，核心是 HTML（结构）、CSS（样式）、JavaScript（交互），再加上框架、工程化工具等扩展技术。

1.3.2 后端开发：用户'看不到，但离不开'的层

后端开发（Backend Development）负责'数据处理和逻辑运算'，核心目标是'让系统跑得稳定'。比如：

微信朋友圈的内容存储与权限校验；
外卖平台的订单分配与支付对接；
短视频平台的推荐算法与流量控制。

后端开发的技术栈围绕'服务器端语言'展开，核心是编程语言（如 Python、Java）、数据库（如 MySQL、Redis）、API 设计（如 RESTful），再加上服务器部署、性能优化等运维技术。

1.3.3 全栈开发：'打通前后端'的全能角色

全栈开发（Full-Stack Development）指同时掌握前端和后端技术的开发者，能独立完成'从界面到数据库'的完整产品开发。比如：

个人开发者开发独立博客；
创业团队的早期产品迭代；
小型项目的快速原型验证。

全栈开发的核心不是'什么都会一点'，而是'理解前后端协作逻辑'——比如知道前端的'跨域问题'需要后端配置 CORS，后端的'接口性能'会影响前端的加载速度。

1.4 Web 技术栈的演进：从'简单脚本'到'复杂生态'

Web 开发的 30 多年里，技术栈经历了四次关键迭代，每一次都大幅提升了开发效率和产品能力：

阶段	时间	核心技术	产品特点
Web 1.0	1991-2004	HTML、CSS、静态页面	静态内容，用户只能浏览
Web 2.0

<header> <!-- 页头：标题 + 导航 --> <h1>我的博客</h1> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于我</a></li> </ul> </nav> </header> <main> <!-- 主体内容 --> <article> <!-- 文章内容 --> <h2>Web 开发的历史</h2> <p>1989 年，蒂姆·伯纳斯 - 李提出了 Web 的概念...</p> <section> <!-- 文章小节 --> <h3>Web 1.0 时代</h3> <p>核心是静态页面...</p> </section> </article> <aside> <!-- 侧边栏：相关推荐 --> <h3>推荐阅读</h3> <ul> <li><a href="/post/2">前端框架对比</a></li> </ul> </aside> </main> <footer> <!-- 页脚：版权信息 --> <p>© 2025 我的博客 版权所有</p> </footer>

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，每列宽度相等 */
  gap: 20px; /* 卡片之间的间距 */
}

.nav {
  display: flex;
  justify-content: space-between; /* 水平方向两端对齐 */
  align-items: center; /* 垂直方向居中 */
}

// Styled Components 示例：组件样式与逻辑绑定
import styled from 'styled-components';
const Button = styled.button`
  background-color: #3B82F6;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  &:hover {
    background-color: #2563EB;
  }
`;
// 使用时直接当作组件
function App() {
  return <Button>点击按钮</Button>;
}

<!-- Tailwind 示例：按钮无需写 CSS，直接用类名组合 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">点击按钮</button>

// Sass 示例：定义变量和混合
$primary-color: #3B82F6; // 主色调变量
@mixin button-style { // 按钮样式混合
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background-color: $primary-color;
  @include button-style; // 引用混合
}

// 回调函数（容易产生'回调地狱'，不推荐）
function fetchData(callback) {
  setTimeout(() => {
    callback("数据");
  }, 1000);
}
fetchData(data => {
  console.log(data); // 1 秒后输出'数据'
});

// Promise（解决回调地狱，推荐）
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("数据");
    }, 1000);
  });
}
fetchData().then(data => {
  console.log(data); // 1 秒后输出'数据'
});

// async/await（Promise 的语法糖，现代最佳实践）
async function getData() {
  const data = await fetchData(); // 等待 Promise 完成
  console.log(data); // 1 秒后输出'数据'
}
getData();

// 函数声明：适合独立函数
function add(a, b) {
  return a + b;
}

// 箭头函数：适合回调（如数组遍历）
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

const name = "张三"; // 不可修改
let age = 25; // 可修改
age = 26; // 正确
name = "李四"; // 错误：const 变量不能修改

<p id="text">这是一段文本</p>
<button id="btn">点击变色</button>
<script>
  // 1. 查找节点
  const text = document.getElementById("text");
  const btn = document.getElementById("btn");
  
  // 2. 绑定点击事件
  btn.addEventListener("click", () => {
    // 3. 修改样式：切换红色和黑色
    if (text.style.color === "red") {
      text.style.color = "black";
    } else {
      text.style.color = "red";
    }
  });
</script>

// React 组件示例：用 JSX 描述结构
function Button(props) {
  return (
    <button className="btn" onClick={props.onClick}>
      {props.text} {/* 动态显示文本 */}
    </button>
  );
}

import { useState } from 'react';

function Counter() {
  // 声明状态：count（值）和 setCount（修改函数）
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>加 1</button>
      <button onClick={() => setCount(count - 1)}>减 1</button>
    </div>
  );
}

<!-- Vue 组件示例：模板语法 -->
<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加 1</button> <!-- @click 是 v-on:click 的简写 -->
    <button @click="decrement">减 1</button>
  </div>
</template>
<script>
export default {
  data() {
    // 声明状态：响应式数据，修改后自动更新视图
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加 1</button>
    <button @click="decrement">减 1</button>
  </div>
</template>
<script setup>
// 引入 ref 函数：创建响应式数据
import { ref } from 'vue';

// 声明响应式数据
const count = ref(0);

// 声明逻辑函数
function increment() {
  count.value++;
}
function decrement() {
  count.value--;
}
</script>

// 组件类
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter', // 组件选择器，在 HTML 中用<app-counter></app-counter>引用
  template: `
    <p>当前计数：{{ count }}</p>
    <button (click)="increment()">加 1</button>
    <button (click)="decrement()">减 1</button>
  `,
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
  decrement() {
    this.count--;
  }
}

框架	优势	劣势	适合场景
React	生态丰富、组件化强、灵活	配置复杂、需要学习 JSX	中大型应用、跨端开发（React Native）
Vue	易用性高、文档友好、渐进式	生态相对较小、企业级案例少	中小型应用、快速迭代项目
Angular	全功能、TypeScript 支持、稳定	学习成本高、体积大	大型企业级应用、团队协作项目

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成 HTML 文件的插件

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  module: {
    rules: [
      // 处理 CSS 文件：用 css-loader 和 style-loader
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      // 处理 JS 文件：用 babel-loader 将 ES6+ 转 ES5
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除 node_modules 目录
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // 生成 HTML 文件，自动引入打包后的 JS
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板 HTML
      filename: 'index.html', // 输出 HTML 文件名
    }),
  ],
  devServer: {
    port: 3000, // 开发服务器端口
    hot: true, // 启用热更新
  },
};

module.exports = {
  env: {
    browser: true, // 支持浏览器环境的全局变量（如 window、document）
    es2021: true, // 支持 ES2021 的语法
  },
  extends: [
    'eslint:recommended', // 使用 ESLint 的推荐规则
    'plugin:react/recommended', // 使用 React 的推荐规则（React 项目）
  ],
  rules: {
    'no-console': 'warn', // 禁止使用 console，警告级别
    'react/prop-types': 'off', // 关闭 React 的 prop-types 检查（可选）
  },
};

{
  "semi": true, // 语句末尾加分号
  "singleQuote": true, // 使用单引号
  "tabWidth": 2, // 缩进 2 个空格
  "trailingComma": "es5" // 对象和数组末尾加逗号（ES5 风格）
}

# FastAPI 示例：创建一个简单的 API
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

# 定义请求体模型（自动验证数据类型）
class Item(BaseModel):
    name: str
    price: float

@app.get("/hello")
def hello():
    return {"message": "Hello, FastAPI!"}

@app.post("/items")
def create_item(item: Item):
    return {"item_name": item.name, "item_price": item.price}

# 启动命令：uvicorn main:app --reload

# Flask 示例：创建一个简单的 API
from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/hello")
def hello():
    return jsonify({"message": "Hello, Flask!"})

if __name__ == "__main__":
    app.run()

# Django 示例：创建一个简单的 API
from django.http import JsonResponse
from django.views import View

class HelloView(View):
    def get(self, request):
        return JsonResponse({"message": "Hello, Django!"})

# 在 urls.py 中配置路由
from django.urls import path
from .views import HelloView

urlpatterns = [
    path("hello/", HelloView.as_view()),
]

from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker

# 1. 连接数据库
DATABASE_URL = "mysql+pymysql://user:password@host/dbname"
engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
Base = declarative_base()

# 2. 定义数据模型（对应数据库表）
class User(Base):
    __tablename__ = "users"
    id = Column(Integer, primary_key=True, index=True)
    name = Column(String(50), index=True)
    email = Column(String(100), unique=True, index=True)

# 3. 创建数据库表（第一次运行时执行）
Base.metadata.create_all(bind=engine)

# 4. 操作数据库
def get_db():
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()

# 添加用户
def create_user(db, name: str, email: str):
    db_user = User(name=name, email=email)
    db.add(db_user)
    db.commit()
    db.refresh(db_user)
    return db_user

# 查询用户
def get_user(db, user_id: int):
    return db.query(User).filter(User.id == user_id).first()

# 使用示例
db = next(get_db())
new_user = create_user(db, name="张三", email="[email protected]")
user = get_user(db, user_id=new_user.id)
print(user.name) # 输出'张三'

// 1. 主应用类
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

// 2. 控制器类（处理 HTTP 请求）
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    // 处理 GET 请求
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }

    // 处理 POST 请求，接收 JSON 参数
    @PostMapping("/user")
    public User createUser(@RequestBody User user) {
        // 模拟保存用户
        user.setId(1L);
        return user;
    }
}

// 3. 实体类（对应 JSON 参数）
public class User {
    private Long id;
    private String name;
    private String email;

    // getter 和 setter 方法
    public Long getId() { return id; }
    public void setId(Long id) { this.id = id; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
}

// 1. 定义数据模型
import jakarta.persistence.*;

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY) // 自增主键
    private Long id;
    private String name;
    @Column(unique = true) // 唯一约束
    private String email;

    // getter 和 setter 方法
}

// 2. 定义 Repository 接口（Spring Data JPA 自动实现）
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
    // 按方法名自动生成 SQL：SELECT * FROM users WHERE email = ?
    User findByEmail(String email);
}

// 3. 在服务类中使用
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    // 添加用户
    public User createUser(User user) {
        return userRepository.save(user);
    }

    // 查询用户
    public User getUserByEmail(String email) {
        return userRepository.findByEmail(email);
    }
}

// NestJS 示例：创建一个简单的 API
// 1. 控制器
import { Controller, Get, Post, Body } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
    constructor(private readonly appService: AppService) {}
    
    @Get('hello')
    getHello(): string {
        return this.appService.getHello();
    }
    
    @Post('user')
    createUser(@Body() user: { name: string; email: string }) {
        return this.appService.createUser(user);
    }
}

// 2. 服务
import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
    getHello(): string {
        return 'Hello, NestJS!';
    }
    createUser(user: { name: string; email: string }) {
        return { id: 1, ...user };
    }
}

// 3. 模块
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
    imports: [],
    controllers: [AppController],
    providers: [AppService],
})
export class AppModule {}

// 4. 主应用
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    await app.listen(3000);
}
bootstrap();

// Express 示例：创建一个简单的 API
const express = require('express');
const app = express();

app.use(express.json()); // 解析 JSON 请求体

// 处理 GET 请求
app.get('/hello', (req, res) => {
    res.send('Hello, Express!');
});

// 处理 POST 请求
app.post('/user', (req, res) => {
    const { name, email } = req.body;
    res.json({ id: 1, name, email });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

// 1. 路由配置（routes/api.php）
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/hello', function () {
    return 'Hello, Laravel!';
});
Route::post('/user', [UserController::class, 'create']);

// 2. 控制器（app/Http/Controllers/UserController.php）
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class UserController extends Controller {
    public function create(Request $request) {
        // 验证请求参数
        $validated = $request->validate([
            'name' => 'required|string|max:50',
            'email' => 'required|email|unique:users',
        ]);
        
        // 模拟保存用户
        $user = [
            'id' => 1,
            'name' => $validated['name'],
            'email' => $validated['email'],
        ];
        return response()->json($user);
    }
}

-- 1. 创建数据库
CREATE DATABASE myapp;

-- 2. 使用数据库
USE myapp;

-- 3. 创建用户表
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY, -- 自增主键
    name VARCHAR(50) NOT NULL, -- 姓名，非空
    email VARCHAR(100) NOT NULL UNIQUE, -- 邮箱，非空且唯一
    age INT DEFAULT 0, -- 年龄，默认 0
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP -- 创建时间，默认当前时间
);

-- 4. 插入数据
INSERT INTO users (name, email, age) VALUES ('张三', '[email protected]', 25);

-- 5. 查询数据
SELECT * FROM users WHERE age > 20;

-- 6. 更新数据
UPDATE users SET age = 26 WHERE id = 1;

-- 7. 删除数据
DELETE FROM users WHERE id = 1;

-- 8. 创建索引（提高查询速度）
CREATE INDEX idx_users_email ON users(email);

from pymongo import MongoClient

# 1. 连接 MongoDB
client = MongoClient("mongodb://user:password@host:port/")
db = client["myapp"] # 选择数据库
collection = db["articles"] # 选择集合

# 2. 插入文档
article = {
    "title": "Web 开发的历史",
    "content": "1989 年，蒂姆·伯纳斯 - 李提出了 Web 的概念...",
    "author": "张三",
    "tags": ["Web 开发", "历史"],
    "created_at": "2025-01-01T12:00:00Z"
}
result = collection.insert_one(article)
print(result.inserted_id) # 输出插入的文档 ID

# 3. 查询文档
# 查询作者为'张三'的文档
articles = collection.find({"author": "张三"})
for article in articles:
    print(article["title"])

# 4. 更新文档
# 将标题为'Web 开发的历史'的文档作者改为'李四'
collection.update_one(
    {"title": "Web 开发的历史"},
    {"$set": {"author": "李四"}}
)

# 5. 删除文档
# 删除标题为'Web 开发的历史'的文档
collection.delete_one({"title": "Web 开发的历史"})

# 6. 创建索引
collection.create_index("title") # 为 title 字段创建索引

import redis

# 1. 连接 Redis
r = redis.Redis(host='host', port=6379, password='password', db=0)

# 2. String 操作：存储用户 Token
r.set('user:1:token', 'abc123', ex=3600) # 过期时间 3600 秒
token = r.get('user:1:token')
print(token.decode('utf-8')) # 输出'abc123'

# 3. Hash 操作：存储用户信息
r.hset('user:1', mapping={
    'name': '张三',
    'age': 25,
    'email': '[email protected]'
})
user_name = r.hget('user:1', 'name')
print(user_name.decode('utf-8')) # 输出'张三'

# 4. List 操作：存储消息队列
r.lpush('messages', '消息 1', '消息 2', '消息 3') # 从左边插入
message = r.rpop('messages') # 从右边弹出
print(message.decode('utf-8')) # 输出'消息 1'

# 5. Set 操作：存储用户标签
r.sadd('user:1:tags', 'Web 开发', 'Python', 'Redis')
tags = r.smembers('user:1:tags')
print([tag.decode('utf-8') for tag in tags]) # 输出 ['Web 开发', 'Python', 'Redis']

# 6. Sorted Set 操作：存储排行榜
r.zadd('rank', {'张三': 100, '李四': 90, '王五': 80})
rank = r.zrevrange('rank', 0, -1, withscores=True) # 按分数降序排列
print([(name.decode('utf-8'), score) for name, score in rank]) # 输出 [('张三', 100.0), ('李四', 90.0), ('王五', 80.0)]

API 地址	HTTP 方法	功能	请求体	响应体
`/v1/users`	GET	查询所有用户	-	`{"code":200,"data":[{"id":1,"name":"张三"},...]}`
`/v1/users/1`	GET	查询 ID 为 1 的用户	-	`{"code":200,"data":{"id":1,"name":"张三","email":"..."}}`
`/v1/users`	POST	创建新用户	`{"name":"张三","email":"..."}`	`{"code":201,"data":{"id":1,"name":"张三","email":"..."}}`
`/v1/users/1`	PUT	更新 ID 为 1 的用户	`{"name":"李四","email":"..."}`	`{"code":200,"data":{"id":1,"name":"李四","email":"..."}}`
`/v1/users/1`	DELETE	删除 ID 为 1 的用户	-	`{"code":200,"message":"删除成功"}`

# 前端查询：只获取用户的姓名和邮箱，以及用户的前 5 个订单的 ID 和金额
query {
  user(id: 1) {
    name
    email
    orders(limit: 5) {
      id
      amount
    }
  }
}

# 后端返回：只包含前端指定的字段
{
  "data": {
    "user": {
      "name": "张三",
      "email": "[email protected]",
      "orders": [
        {"id": 1, "amount": 99.9},
        {"id": 2, "amount": 199.9}
      ]
    }
  }
}

# 构建镜像并启动容器
docker-compose up -d

# 查看容器状态
docker-compose ps

# 查看应用日志
docker-compose logs -f api

version: '3'
services:
  # 后端应用容器
  api:
    build: .
    ports:
      - "8000:8000"
    depends_on:
      - db
    environment:
      - DATABASE_URL=mysql+pymysql://user:password@db:3306/myapp
  # MySQL 容器
  db:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=rootpassword
      - MYSQL_DATABASE=myapp
      - MYSQL_USER=user
      - MYSQL_PASSWORD=password
    volumes:
      - mysql-data:/var/lib/mysql # 数据卷：持久化 MySQL 数据

volumes:
  mysql-data:

fastapi==0.104.1
uvicorn==0.24.0
pymysql==1.1.0
sqlalchemy==2.0.23

# 基础镜像：Python 3.10
FROM python:3.10-slim

# 设置工作目录
WORKDIR /app

# 复制依赖文件
COPY requirements.txt .

# 安装依赖
RUN pip install --no-cache-dir -r requirements.txt

# 复制应用代码
COPY . .

# 暴露端口（FastAPI 默认端口 8000）
EXPOSE 8000

# 启动命令
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

# 为 example.com 生成证书，并自动配置 Nginx
sudo certbot --nginx -d example.com -d www.example.com

# Ubuntu 系统安装 Certbot
sudo apt update
sudo apt install certbot python3-certbot-nginx

# /etc/nginx/nginx.conf
http {
    upstream api_servers {
        # 多台应用服务器的地址
        server 10.0.0.1:8000;
        server 10.0.0.2:8000;
        server 10.0.0.3:8000;
        # 负载均衡策略：默认轮询，可配置 weight（权重）、ip_hash 等
        ip_hash; # 按客户端 IP 哈希，确保同一客户端访问同一服务器（适合会话存储）
    }
    server {
        listen 443 ssl;
        server_name api.example.com;
        # HTTPS 证书配置
        ssl_certificate /etc/letsencrypt/live/api.example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/api.example.com/privkey.pem;
        # 将请求转发到应用服务器集群
        location / {
            proxy_pass http://api_servers;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

openapi: 3.0.0
info:
  title: 用户 API
  version: 1.0.0
paths:
  /users/{userId}:
    get:
      summary: 获取用户信息
      parameters:
        - name: userId
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: 成功
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: integer
        name:
          type: string
        email:
          type: string
          format: email

# 生成 TypeScript 接口
npx openapi-generator-cli generate -i openapi.yaml -g typescript-fetch -o src/api

export interface User {
  id: number;
  name: string;
  email: string;
}

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

// 从接口获取数据后验证
fetch('/api/users/1')
  .then(res => res.json())
  .then(data => {
    const user = UserSchema.parse(data); // 验证失败会抛出错误
    console.log(user.name);
  });

// pages/api/products/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  // 从数据库获取商品数据（模拟）
  const product = {
    id,
    name: "示例商品",
    price: 99,
    image: "/product.jpg",
  };
  res.status(200).json(product);
}

// pages/products/[id].js
export async function getStaticPaths() {
  // 构建时生成所有商品的路径
  const products = await fetch('https://api.example.com/products').then(res => res.json());
  return {
    paths: products.map(p => ({ params: { id: p.id.toString() } })),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // 为每个商品生成静态数据
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());
  return {
    props: { product },
  };
}

export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
      <img src={product.image} alt={product.name} />
    </div>
  );
}

// server/api/comments/[postId].js
export default async (req, res) => {
  const { postId } = req.params;
  // 从数据库获取评论（模拟）
  const comments = [
    { id: 1, content: "好文章！" },
    { id: 2, content: "受益匪浅" },
  ];
  res.json(comments);
};

<!-- pages/posts/[id].vue -->
<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </article>
</template>
<script>
export default {
  async asyncData({ params, $content }) {
    // 从内容管理系统获取文章（$content 由 Nuxt Content 模块提供）
    const post = await $content('posts', params.id).fetch();
    return { post };
  },
};
</script>

// LoginPage.jsx
import { useMutation } from 'react-query';

function LoginPage() {
  const loginMutation = useMutation(
    async (credentials) => {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        body: JSON.stringify(credentials),
        headers: {
          'Content-Type': 'application/json',
        },
      });
      return res.json();
    },
    {
      onSuccess: (data) => {
        localStorage.setItem('token', data.token);
        window.location.href = '/dashboard';
      },
    }
  );

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const email = e.target.email.value;
      const password = e.target.password.value;
      loginMutation.mutate({ email, password });
    }}>
      <input type="email" name="email" placeholder="邮箱" />
      <input type="password" name="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
}

// auth.controller.ts
@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Post('login')
  login(@Body() credentials: { email: string; password: string }) {
    const token = this.authService.login(credentials);
    return { token };
  }
}

# 前端构建阶段
FROM node:18 AS frontend-build
WORKDIR /app/frontend
COPY frontend/package*.json ./
RUN npm install
COPY frontend/ ./
RUN npm run build

# 后端运行阶段
FROM node:18 AS backend
WORKDIR /app/backend
COPY backend/package*.json ./
RUN npm install
COPY backend/ ./
# 复制前端构建产物到后端静态目录
COPY --from=frontend-build /app/frontend/build /app/backend/public
EXPOSE 3000
CMD ["node", "server.js"]

# 后端 Deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: myapp/backend:v1.0
          ports:
            - containerPort: 3000

# 前端 Deployment（若前端为静态文件，可直接用 Nginx）
apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
spec:
  replicas: 3
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: nginx:alpine
          ports:
            - containerPort: 80
          volumeMounts:
            - name: frontend-build
              mountPath: /usr/share/nginx/html
volumes:
  - name: frontend-build
    configMap:
      name: frontend-build

# Service：暴露后端服务
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 3000
      targetPort: 3000

# Ingress：路由外部请求到前端/后端
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myapp-ingress
spec:
  rules:
    - host: myapp.example.com
      http:
        paths:
          - path: /api
            pathType: Prefix
            backend:
              service:
                name: backend-service
                port:
                  number: 3000
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend-service
                port:
                  number: 80

name: Fullstack CI/CD
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      # 构建前端
      - name: Build Frontend
        run: |
          cd frontend
          npm install
          npm run build
      # 构建后端
      - name: Build Backend
        run: |
          cd backend
          npm install
      # 运行测试
      - name: Run Tests
        run: |
          cd backend
          npm test
      # 构建 Docker 镜像
      - name: Build Docker Image
        uses: docker/build-push-action@v4
        with:
          context: .
          push: true
          tags: myregistry/myapp:${{ github.sha }}
  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      # 部署到 K8s 集群
      - name: Deploy to Kubernetes
        uses: steebchen/[email protected]
        with:
          config: ${{ secrets.KUBECONFIG }}
          command: set image deployment/backend backend=myregistry/myapp:${{ github.sha }}

# FastAPI 中集成 Prometheus
from fastapi import FastAPI
from prometheus_fastapi_instrumentator import Instrumentator

app = FastAPI()
Instrumentator().instrument(app).expose(app)

@app.get("/users/{user_id}")
async def get_user(user_id: int):
    # 业务逻辑
    return {"id": user_id, "name": "张三"}

/* 电脑端（屏幕>1200px）：3 列布局 */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 平板端（768px<屏幕<1200px）：2 列布局 */
@media (max-width: 1200px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 手机端（屏幕<768px）：1 列布局 */
@media (max-width: 768px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

Web 开发技术全景：从基础原理到全栈架构与未来趋势

Web 开发技术全景：从基础原理到全栈架构与未来趋势

一、Web 开发概述：重新理解'构建互联网的技术'

1.1 Web 的诞生：一个改变世界的'简单想法'

1.2 Web 开发的核心定义：不是'写网页'，而是'构建交互系统'

1.3 Web 开发的三大分支：前端、后端与全栈

1.3.1 前端开发：用户'看得到、摸得着'的层

1.3.2 后端开发：用户'看不到，但离不开'的层

1.3.3 全栈开发：'打通前后端'的全能角色

1.4 Web 技术栈的演进：从'简单脚本'到'复杂生态'

二、前端开发：从'三驾马车'到'生态体系'

2.1 前端基础：HTML、CSS、JavaScript 的'底层逻辑'

2.1.1 HTML：网页的'骨架'，不是'样式工具'

2.1.2 CSS：网页的'皮肤'，从'样式表'到'设计系统'

（1）CSS 的核心概念：盒模型与布局

（2）CSS 的进阶工具：从预处理器到工具类

2.1.3 JavaScript：网页的'大脑'，从'脚本'到'编程语言'

（1）JS 的核心概念：变量、函数与异步

（2）JS 的 DOM 操作：连接代码与页面

2.2 前端框架：从'手动操作 DOM'到'数据驱动视图'

2.2.1 React：组件化与虚拟 DOM 的'标杆'

（1）React 的核心概念：JSX 与虚拟 DOM

（2）React 的状态管理：从 useState 到 Redux

2.2.2 Vue：易用性与渐进式的'代表'

（1）Vue 的核心概念：模板与响应式

（2）Vue 3 的升级：Composition API

2.2.3 Angular：企业级应用的'全能选手'

2.2.4 框架选择：没有'最好'，只有'最合适'

2.3 前端工程化：从'写代码'到'系统化开发'

2.3.1 构建工具：从 Webpack 到 Vite

（1）Webpack：功能全面的'老牌工具'

（2）Vite：极速启动的'新一代工具'

2.3.2 代码规范：从 ESLint 到 Prettier

2.3.3 版本控制：Git 与协作流程

三、后端开发：从'数据处理'到'系统架构'

3.1 后端基础：编程语言与开发范式

3.1.1 Python：快速开发的'多面手'

（1）Python 的 Web 框架：从 Django 到 FastAPI

（2）Python 的 ORM：不用写 SQL 也能操作数据库

3.1.2 Java：企业级应用的'标杆'

（1）Java 的 Web 框架：Spring Boot

（2）Java 的 ORM：MyBatis 与 Spring Data JPA

3.1.3 Node.js：前后端同构的'新选择'

（1）Node.js 的 Web 框架：Express 与 NestJS

3.1.4 PHP：Web 开发的'老大哥'

3.2 数据库：后端开发的'数据仓库'

3.2.1 关系型数据库：结构化数据的'首选'

（1）MySQL：最流行的开源关系型数据库

（2）PostgreSQL：功能强大的开源关系型数据库

3.2.2 非关系型数据库：非结构化数据的'解决方案'

（1）MongoDB：文档型数据库

（2）Redis：内存数据库

3.3 API 设计：前后端交互的'桥梁'

3.3.1 RESTful API：最流行的 API 设计规范

3.3.2 GraphQL：解决 RESTful API'过度获取'的问题

3.4 后端部署：从'本地开发'到'线上运行'

3.4.1 服务器选择：云服务器是主流

3.4.2 环境配置：从手动配置到 Docker

（1）Docker 的核心概念：

（2）Docker 部署示例：部署一个 FastAPI 应用

3.4.3 域名与 HTTPS：让用户安全访问

（1）域名配置：

（2）HTTPS 配置：

3.4.4 负载均衡与高可用：应对高流量

（1）负载均衡：

（2）高可用：

四、全栈开发：打通前后端的'全能之路'

4.1 前后端协作：从'接口文档'到'全链路协同'

4.1.1 接口联调：从'口头约定'到'自动化验证'

（1）接口设计工具：OpenAPI 与 Swagger

（2）Mock 与契约测试：'前后端并行开发'

4.1.2 数据流转：从'各自解析'到'类型共享'

（1）TypeScript 与后端类型同步

（2）运行时数据验证：'防御性编程'

4.2 全栈框架：'一体化'开发的革命

4.2.1 Next.js：React 生态的'全栈标杆'

（1）核心能力：

（2）示例：全栈电商商品页

4.2.2 Nuxt.js：Vue 生态的'全栈首选'

（1）核心能力：