引言：为什么选择前端开发作为职业起点

前端开发是现代Web互联网的核心技术领域之一，它直接决定了用户在网页上看到的内容和交互体验。随着HTML5标准的普及和前端技术的飞速发展，前端工程师已成为IT行业中最热门的职业之一。根据2023年的行业数据显示，前端开发岗位的需求量持续增长，平均薪资水平在IT行业中名列前茅。

对于零基础的学习者来说，前端开发具有以下显著优势：

  • 入门门槛相对较低：只需掌握HTML、CSS和JavaScript三大基础技术即可开始开发工作
  • 学习反馈即时：编写代码后可以立即在浏览器中看到效果，学习成就感强
  • 就业方向广泛：可以从事Web开发、移动端开发、小程序开发、大屏可视化等多个方向
  • 技术生态活跃：拥有React、Vue、Angular等成熟的框架体系，以及丰富的工具链支持

第一阶段：Web基础入门（2-4周）

1.1 HTML5基础语法与结构

HTML（HyperText Markup Language）是构建网页的骨架。HTML5作为最新的标准，引入了许多语义化标签和新特性。

核心知识点：

  • 文档结构：<!DOCTYPE html>、<html>、<head>、<body>
  • 语义化标签：<header>、<nav>、<main>、<article>、<section>、<footer>
  • 表单元素：<input>、<select>、<textarea>、<button>
  • 多媒体标签：<video>、<audio>、<canvas>
  • 元数据：<meta>标签的viewport设置

实战代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5基础页面结构</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一个段落文本，用于展示HTML5的语义化结构。</p>
            <section>
                <h3>章节标题</h3>
                <p>章节内容...</p>
            </section>
        </article>
        
        <aside>
            <h3>侧边栏</h3>
            <p>相关链接或信息</p>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 我的网站. 保留所有权利。</p>
    </footer>
</body>
</html>

1.2 CSS3样式与布局基础

CSS（Cascading Style Sheets）负责网页的视觉呈现。CSS3引入了强大的选择器、动画效果和布局系统。

核心知识点：

  • 选择器：元素选择器、类选择器、ID选择器、伪类选择器、属性选择器
  • 盒模型：margin、border、padding、width、height
  • 布局技术：Flexbox弹性布局、Grid网格布局
  • 响应式设计：媒体查询@media、相对单位（rem、em、vw、vh）
  • CSS3特性：过渡transition、动画animation、变换transform

Flexbox布局实战代码：

/* Flexbox容器设置 */
.container {
    display: flex;
    justify-content: space-between; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 元素间距 */
    padding: 20px;
    background-color: #f5f5f5;
}

/* Flex项目设置 */
.item {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.item:hover {
    transform: translateY(-5px);
}

/* 响应式媒体查询 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 小屏幕改为垂直布局 */
    }
    
    .item {
        flex: 1 1 100%; /* 小屏幕占满宽度 */
    }
}

1.3 JavaScript基础编程

JavaScript是前端开发的核心编程语言，负责网页的交互逻辑。

核心知识点：

  • 变量声明：let、const、var的区别
  • 数据类型：Number、String、Boolean、Object、Array、Function
  • 控制结构：if/else、switch、for循环、while循环
  • 函数：函数声明、箭头函数、高阶函数
  • DOM操作：获取元素、修改内容、事件处理

DOM操作实战代码：

// 获取DOM元素
const button = document.getElementById('myButton');
const output = document.querySelector('.output');

// 事件监听
button.addEventListener('click', function() {
    // 创建新元素
    const newParagraph = document.createElement('p');
    newParagraph.textContent = '这是动态创建的段落！';
    newParagraph.style.color = '#2c3e50';
    
    // 修改现有元素
    output.innerHTML = '<strong>按钮被点击了！</strong>';
    output.appendChild(newParagraph);
    
    // 样式操作
    this.style.backgroundColor = '#27ae60';
    this.textContent = '已点击';
});

// 数组操作示例
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 异步操作示例
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('获取数据失败:', error);
        output.textContent = '数据加载失败，请重试。';
    }
}

第二阶段：现代前端工具链（3-5周）

2.1 版本控制工具 Git

Git是现代开发的标准工具，用于代码版本管理和团队协作。

核心操作命令：

# 初始化仓库
git init

# 添加文件到暂存区
git add .

# 提交更改
git commit -m "feat: 添加用户登录功能"

# 查看状态
git status

# 查看提交历史
git log --oneline

# 分支操作
git branch feature/login
git checkout feature/login
# 或者使用新版命令
git switch -c feature/login

# 远程仓库操作
git remote add origin https://github.com/username/repo.git
git push -u origin main

# 拉取远程更新
git pull origin main

# 合并分支
git merge feature/login

2.2 包管理器 npm/yarn

npm常用命令：

# 初始化项目
npm init -y

# 安装依赖
npm install jquery

# 安装开发依赖
npm install --save-dev webpack

# 全局安装
npm install -g @vue/cli

# 查看已安装包
npm list

# 运行脚本
npm run build

2.3 代码编辑器 VS Code 配置

推荐插件：

  • ESLint：代码规范检查
  • Prettier：代码格式化
  • Live Server：本地服务器预览
  • Auto Rename Tag：自动重命名配对标签
  • GitLens：Git增强工具

VS Code 设置示例（settings.json）：

{
    "editor.fontSize": 14,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "files.autoSave": "afterDelay",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "eslint.validate": ["javascript", "html", "vue"],
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "liveServer.settings.donotShowInfoMsg": true
}

第三阶段：核心框架与工程化（6-12周）

3.1 Vue.js 3.x 框架（推荐初学者）

Vue.js以其渐进式框架设计和优秀的中文文档成为初学者的首选。

Vue 3组合式API示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 计数器示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
        .counter { font-size: 2em; color: #42b983; margin: 20px 0; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 5px; }
        .info { background: #f0f9ff; padding: 15px; border-radius: 8px; margin-top: 20px; }
    </style>
</head>
<body>
    <div id="app">
        <h1>Vue 3 计数器应用</h1>
        <div class="counter">当前计数: {{ count }}</div>
        <div>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
            <button @click="reset">重置</button>
        </div>
        
        <div class="info">
            <h3>计算属性示例</h3>
            <p>双倍计数: {{ doubleCount }}</p>
            <p>奇偶判断: {{ isEven ? '偶数' : '奇数' }}</p>
        </div>
        
        <div class="info">
            <h3>列表渲染</h3>
            <ul>
                <li v-for="item in items" :key="item.id">
                    {{ item.name }} - 价格: ¥{{ item.price }}
                </li>
            </ul>
        </div>
        
        <div class="info">
            <h3>表单绑定</h3>
            <input v-model="message" placeholder="输入消息" style="padding: 8px; width: 200px;">
            <p>实时显示: {{ message }}</p>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, reactive } = Vue;
        
        createApp({
            setup() {
                // 响应式数据
                const count = ref(0);
                const message = ref('');
                const items = reactive([
                    { id: 1, name: '苹果', price: 5 },
                    { id: 2, name: '香蕉', price: 3 },
                    { id: 3, name: '橙子', price: 4 }
                ]);
                
                // 方法
                const increment = () => count.value++;
                const decrement = () => count.value--;
                const reset = () => count.value = 0;
                
                // 计算属性
                const doubleCount = computed(() => count.value * 2);
                const isEven = computed(() => count.value % 2 === 0);
                
                return {
                    count,
                    message,
                    items,
                    increment,
                    decrement,
                    reset,
                    doubleCount,
                    isEven
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

3.2 React 18.x 框架（进阶选择）

React在大型项目和复杂状态管理方面具有优势。

React Hooks示例：

import React, { useState, useEffect, useMemo } from 'react';

// 自定义Hook：获取窗口大小
function useWindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };
        
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}

// 主组件
function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');
    const { width } = useWindowSize();

    // 添加待办事项
    const addTodo = () => {
        if (inputValue.trim()) {
            setTodos([...todos, {
                id: Date.now(),
                text: inputValue,
                completed: false
            }]);
            setInputValue('');
        }
    };

    // 切换完成状态
    const toggleTodo = (id) => {
        setTodos(todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    };

    // 删除待办事项
    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    // 计算属性：统计信息
    const stats = useMemo(() => ({
        total: todos.length,
        completed: todos.filter(t => t.completed).length,
        remaining: todos.filter(t => !t.completed).length
    }), [todos]);

    return (
        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
            <h1>React 待办事项 ({width}px)</h1>
            
            <div style={{ marginBottom: '20px' }}>
                <input
                    type="text"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && addTodo()}
                    placeholder="输入待办事项..."
                    style={{ padding: '8px', width: '70%', marginRight: '10px' }}
                />
                <button onClick={addTodo} style={{ padding: '8px 16px' }}>添加</button>
            </div>

            <div style={{ marginBottom: '10px', padding: '10px', background: '#f0f0f0' }}>
                <strong>统计：</strong> 总数: {stats.total} | 已完成: {stats.completed} | 剩余: {stats.remaining}
            </div>

            <ul style={{ listStyle: 'none', padding: 0 }}>
                {todos.map(todo => (
                    <li key={todo.id} style={{
                        padding: '10px',
                        margin: '5px 0',
                        background: todo.completed ? '#d4edda' : '#f8f9fa',
                        borderLeft: `4px solid ${todo.completed ? '#28a745' : '#007bff'}`,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}>
                        <span style={{ 
                            textDecoration: todo.completed ? 'line-through' : 'none',
                            opacity: todo.completed ? 0.6 : 1 
                        }}>
                            {todo.text}
                        </span>
                        <div>
                            <button 
                                onClick={() => toggleTodo(todo.id)}
                                style={{ marginRight: '5px', padding: '4px 8px' }}
                            >
                                {todo.completed ? '取消' : '完成'}
                            </button>
                            <button 
                                onClick={() => deleteTodo(todo.id)}
                                style={{ background: '#dc3545', color: 'white', border: 'none', padding: '4px 8px' }}
                            >
                                删除
                            </button>
                        </div>
                    </li>
                ))}
            </ul>

            {todos.length === 0 && (
                <p style={{ textAlign: 'center', color: '#666' }}>暂无待办事项，请添加！</p>
            )}
        </div>
    );
}

export default TodoApp;

3.3 工程化配置

Webpack基础配置示例：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 模式：development 或 production
    mode: 'development',
    
    // 入口文件
    entry: './src/index.js',
    
    // 输出配置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash].js',
        publicPath: '/'
    },
    
    // 模块规则
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[hash][ext][query]'
                }
            }
        ]
    },
    
    // 插件配置
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    
    // 开发服务器配置
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 8080,
        open: true,
        hot: true,
        historyApiFallback: true
    },
    
    // 源码映射
    devtool: 'source-map'
};

第四阶段：高级技术栈（13-20周）

4.1 TypeScript 类型系统

TypeScript为JavaScript添加了静态类型检查，是大型项目的必备技能。

TypeScript核心示例：

// 接口定义
interface User {
    id: number;
    name: string;
    email: string;
    role: 'admin' | 'user' | 'guest';
    profile?: {
        avatar?: string;
        bio?: string;
    };
}

// 泛型函数
function wrapInArray<T>(value: T): T[] {
    return [value];
}

// 类和继承
class Animal {
    constructor(public name: string) {}
    
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    
    bark() {
        console.log('Woof! Woof!');
    }
}

// 类型守卫
function isAdmin(user: User): user is User & { role: 'admin' } {
    return user.role === 'admin';
}

// 实际应用示例
const users: User[] = [
    { id: 1, name: 'Alice', email: 'alice@example.com', role: 'admin' },
    { id: 2, name: 'Bob', email: 'bob@example.com', role: 'user', profile: { bio: 'Developer' } }
];

// 使用泛型
const stringArray = wrapInArray('hello');
const numberArray = wrapInArray(42);

// 类型检查
users.forEach(user => {
    if (isAdmin(user)) {
        console.log(`${user.name} 是管理员`);
    } else {
        console.log(`${user.name} 是普通用户`);
    }
});

// 工具类型示例
type PartialUser = Partial<User>; // 所有属性可选
type RequiredUser = Required<User>; // 所有属性必选
type UserWithoutEmail = Omit<User, 'email'>; // 排除指定属性

4.2 状态管理方案

Pinia（Vue推荐）示例：

// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
    // 状态
    const currentUser = ref<User | null>(null);
    const isAuthenticated = ref(false);
    
    // 计算属性
    const userName = computed(() => currentUser.value?.name || '访客');
    const isAdmin = computed(() => currentUser.value?.role === 'admin');
    
    // Actions
    async function login(credentials: { email: string; password: string }) {
        try {
            // 模拟API调用
            const response = await fetch('/api/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(credentials)
            });
            
            const data = await response.json();
            currentUser.value = data.user;
            isAuthenticated.value = true;
            return data;
        } catch (error) {
            console.error('登录失败:', error);
            throw error;
        }
    }
    
    function logout() {
        currentUser.value = null;
        isAuthenticated.value = false;
    }
    
    function updateProfile(profile: Partial<User['profile']>) {
        if (currentUser.value) {
            currentUser.value.profile = { ...currentUser.value.profile, ...profile };
        }
    }
    
    return {
        currentUser,
        isAuthenticated,
        userName,
        isAdmin,
        login,
        logout,
        updateProfile
    };
});

Redux Toolkit（React推荐）示例：

// slices/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartItem {
    id: string;
    name: string;
    price: number;
    quantity: number;
}

interface CartState {
    items: CartItem[];
    total: number;
}

const initialState: CartState = {
    items: [],
    total: 0
};

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        addItem: (state, action: PayloadAction<Omit<CartItem, 'quantity'>>) => {
            const existingItem = state.items.find(item => item.id === action.payload.id);
            if (existingItem) {
                existingItem.quantity++;
            } else {
                state.items.push({ ...action.payload, quantity: 1 });
            }
            state.total += action.payload.price;
        },
        removeItem: (state, action: PayloadAction<string>) => {
            const index = state.items.findIndex(item => item.id === action.payload);
            if (index > -1) {
                state.total -= state.items[index].price * state.items[index].quantity;
                state.items.splice(index, 1);
            }
        },
        updateQuantity: (state, action: PayloadAction<{ id: string; quantity: number }>) => {
            const item = state.items.find(item => item.id === action.payload.id);
            if (item) {
                const priceDiff = (action.payload.quantity - item.quantity) * item.price;
                state.total += priceDiff;
                item.quantity = action.payload.quantity;
            }
        },
        clearCart: (state) => {
            state.items = [];
            state.total = 0;
        }
    }
});

export const { addItem, removeItem, updateQuantity, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

4.3 CSS-in-JS 与 Tailwind CSS

Styled Components示例：

import styled, { keyframes, css } from 'styled-components';

// 动画定义
const rotate = keyframes`
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
`;

const fadeIn = keyframes`
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
`;

// 基础按钮组件
const Button = styled.button<{ $primary?: boolean; $size?: 'small' | 'medium' | 'large' }>`
    background: ${props => props.$primary ? '#007bff' : '#6c757d'};
    color: white;
    border: none;
    padding: ${props => {
        switch(props.$size) {
            case 'small': return '8px 16px';
            case 'large': return '16px 32px';
            default: return '12px 24px';
        }
    }};
    border-radius: 4px;
    cursor: pointer;
    font-size: ${props => props.$size === 'small' ? '12px' : '14px'};
    transition: all 0.3s ease;
    
    &:hover {
        background: ${props => props.$primary ? '#0056b3' : '#545b62'};
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
`;

// 特殊样式按钮
const IconButton = styled(Button)`
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    ${props => props.$primary && css`
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        &:hover {
            background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
        }
    `}
`;

// 动画组件
const Spinner = styled.div`
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: ${rotate} 1s linear infinite;
`;

// 使用示例
const Card = styled.div`
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    animation: ${fadeIn} 0.5s ease-out;
    
    &:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
`;

// 组合使用
const LoadingButton = ({ loading, children, ...props }) => (
    <Button {...props} disabled={loading}>
        {loading && <Spinner />}
        {children}
    </Button>
);

Tailwind CSS配置示例：

// tailwind.config.js
module.exports = {
    content: [
        "./src/**/*.{html,js,jsx,ts,tsx,vue}",
        "./public/index.html"
    ],
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                },
                accent: {
                    500: '#ec4899',
                    600: '#db2777',
                }
            },
            spacing: {
                '18': '4.5rem',
                '88': '22rem',
            },
            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
                mono: ['Fira Code', 'monospace'],
            },
            animation: {
                'bounce-slow': 'bounce 3s infinite',
                'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            }
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

第五阶段：全栈能力拓展（21-28周）

5.1 Node.js 与 Express 后端

Express RESTful API示例：

// server.js
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const morgan = require('morgan');

const app = express();
const PORT = process.env.PORT || 3000;

// 中间件
app.use(helmet()); // 安全头
app.use(cors()); // 跨域
app.use(morgan('dev')); // 日志
app.use(express.json()); // JSON解析

// 模拟数据库
let users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' }
];

// 路由
// GET /api/users - 获取所有用户
app.get('/api/users', (req, res) => {
    res.json(users);
});

// GET /api/users/:id - 获取单个用户
app.get('/api/users/:id', (req, res) => {
    const user = users.find(u => u.id === parseInt(req.params.id));
    if (!user) {
        return res.status(404).json({ error: '用户未找到' });
    }
    res.json(user);
});

// POST /api/users - 创建用户
app.post('/api/users', (req, res) => {
    const { name, email } = req.body;
    
    if (!name || !email) {
        return res.status(400).json({ error: '姓名和邮箱为必填项' });
    }
    
    const newUser = {
        id: users.length + 1,
        name,
        email
    };
    
    users.push(newUser);
    res.status(201).json(newUser);
});

// PUT /api/users/:id - 更新用户
app.put('/api/users/:id', (req, res) => {
    const user = users.find(u => u.id === parseInt(req.params.id));
    if (!user) {
        return res.status(404).json({ error: '用户未找到' });
    }
    
    const { name, email } = req.body;
    if (name) user.name = name;
    if (email) user.email = email;
    
    res.json(user);
});

// DELETE /api/users/:id - 删除用户
app.delete('/api/users/:id', (req, res) => {
    const index = users.findIndex(u => u.id === parseInt(req.params.id));
    if (index === -1) {
        return res.status(404).json({ error: '用户未找到' });
    }
    
    users.splice(index, 1);
    res.status(204).send();
});

// 错误处理中间件
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).json({ error: '服务器内部错误' });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

5.2 数据库操作

MongoDB + Mongoose 示例：

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, '用户名不能为空'],
        trim: true,
        minlength: [2, '用户名至少2个字符']
    },
    email: {
        type: String,
        required: [true, '邮箱不能为空'],
        unique: true,
        lowercase: true,
        match: [/^\S+@\S+\.\S+$/, '邮箱格式不正确']
    },
    password: {
        type: String,
        required: true,
        minlength: [6, '密码至少6位']
    },
    role: {
        type: String,
        enum: ['admin', 'user', 'guest'],
        default: 'user'
    },
    profile: {
        avatar: String,
        bio: String,
        website: String
    },
    isActive: {
        type: Boolean,
        default: true
    }
}, {
    timestamps: true // 自动创建createdAt和updatedAt
});

// 静态方法
userSchema.statics.findByEmail = function(email) {
    return this.findOne({ email });
};

// 实例方法
userSchema.methods.comparePassword = function(candidatePassword) {
    // 实际项目中应该使用bcrypt比较哈希密码
    return this.password === candidatePassword;
};

// 虚拟字段
userSchema.virtual('fullName').get(function() {
    return `${this.name} (${this.email})`;
});

module.exports = mongoose.model('User', userSchema);

// 使用示例
// controllers/userController.js
const User = require('../models/User');

// 创建用户
async function createUser(userData) {
    try {
        const user = new User(userData);
        await user.save();
        return user;
    } catch (error) {
        throw new Error(`创建用户失败: ${error.message}`);
    }
}

// 查询用户
async function getUserById(id) {
    const user = await User.findById(id).select('-password'); // 排除密码字段
    if (!user) throw new Error('用户不存在');
    return user;
}

// 更新用户
async function updateUser(id, updateData) {
    const user = await User.findByIdAndUpdate(
        id,
        updateData,
        { new: true, runValidators: true }
    );
    if (!user) throw new Error('用户不存在');
    return user;
}

5.3 API 接口设计与测试

使用 Postman 测试 API：

// 测试脚本示例（在Postman的Tests标签页中）
// 检查状态码
pm.test("Status code is 201", function () {
    pm.response.to.have.status(201);
});

// 检查响应时间
pm.test("Response time is less than 500ms", function () {
    pm.expect(pm.response.responseTime).to.be.below(500);
});

// 检查JSON响应
pm.test("Response has user data", function () {
    const jsonData = pm.response.json();
    pm.expect(jsonData).to.have.property('id');
    pm.expect(jsonData).to.have.property('name');
    pm.expect(jsonData).to.have.property('email');
});

// 保存变量
pm.test("Save user ID to environment", function () {
    const jsonData = pm.response.json();
    pm.environment.set("userId", jsonData.id);
});

第六阶段：实战项目开发（29-36周）

6.1 项目一：个人博客系统（Vue3 + Node.js）

前端页面结构：

<!-- src/views/Home.vue -->
<template>
    <div class="home">
        <Header />
        
        <main class="container">
            <div class="hero">
                <h1>我的技术博客</h1>
                <p>分享前端开发经验与技术实践</p>
            </div>
            
            <div class="filters">
                <button 
                    v-for="tag in tags" 
                    :key="tag"
                    @click="filterByTag(tag)"
                    :class="{ active: selectedTag === tag }"
                >
                    {{ tag }}
                </button>
            </div>
            
            <div class="article-grid">
                <ArticleCard 
                    v-for="article in filteredArticles" 
                    :key="article.id"
                    :article="article"
                    @click="goToArticle(article.id)"
                />
            </div>
            
            <div class="pagination">
                <button 
                    @click="loadMore" 
                    :disabled="currentPage >= totalPages"
                >
                    加载更多
                </button>
            </div>
        </main>
        
        <Footer />
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import ArticleCard from '@/components/ArticleCard.vue';
import { useArticleStore } from '@/stores/article';

const router = useRouter();
const articleStore = useArticleStore();

const selectedTag = ref('');
const currentPage = ref(1);
const pageSize = 10;

const tags = computed(() => articleStore.tags);
const articles = computed(() => articleStore.articles);
const totalPages = computed(() => Math.ceil(articleStore.total / pageSize));

const filteredArticles = computed(() => {
    if (!selectedTag.value) return articles.value;
    return articles.value.filter(article => 
        article.tags.includes(selectedTag.value)
    );
});

const filterByTag = (tag) => {
    selectedTag.value = selectedTag.value === tag ? '' : tag;
    currentPage.value = 1;
};

const loadMore = async () => {
    currentPage.value++;
    await articleStore.fetchArticles(currentPage.value, pageSize);
};

const goToArticle = (id) => {
    router.push(`/article/${id}`);
};

onMounted(async () => {
    await articleStore.fetchArticles(1, pageSize);
});
</script>

<style scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.hero {
    text-align: center;
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 3em;
    color: #2c3e50;
    margin-bottom: 10px;
}

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.filters button {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.filters button.active {
    background: #42b983;
    color: white;
    border-color: #42b983;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.pagination {
    text-align: center;
}

.pagination button {
    padding: 12px 24px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

.pagination button:disabled {
    background: #ccc;
    cursor: not-allowed;
}
</style>

后端API路由：

// routes/articles.js
const express = require('express');
const router = express.Router();
const Article = require('../models/Article');
const auth = require('../middleware/auth');

// GET /api/articles - 获取文章列表
router.get('/', async (req, res) => {
    try {
        const { page = 1, limit = 10, tag, search } = req.query;
        const skip = (page - 1) * limit;
        
        let query = { status: 'published' };
        
        if (tag) query.tags = tag;
        if (search) {
            query.$or = [
                { title: { $regex: search, $options: 'i' } },
                { content: { $regex: search, $options: 'i' } }
            ];
        }
        
        const [articles, total] = await Promise.all([
            Article.find(query)
                .populate('author', 'name avatar')
                .sort({ createdAt: -1 })
                .skip(skip)
                .limit(parseInt(limit)),
            Article.countDocuments(query)
        ]);
        
        res.json({
            data: articles,
            meta: {
                total,
                page: parseInt(page),
                limit: parseInt(limit),
                totalPages: Math.ceil(total / limit)
            }
        });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// GET /api/articles/:id - 获取单篇文章
router.get('/:id', async (req, res) => {
    try {
        const article = await Article.findById(req.params.id)
            .populate('author', 'name avatar bio')
            .populate('comments.user', 'name avatar');
            
        if (!article) {
            return res.status(404).json({ error: '文章不存在' });
        }
        
        // 增加浏览量
        article.views++;
        await article.save();
        
        res.json(article);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// POST /api/articles - 创建文章（需要认证）
router.post('/', auth, async (req, res) => {
    try {
        const { title, content, tags, category } = req.body;
        
        if (!title || !content) {
            return res.status(400).json({ error: '标题和内容为必填项' });
        }
        
        const article = new Article({
            title,
            content,
            tags: tags || [],
            category: category || 'tech',
            author: req.user.id
        });
        
        await article.save();
        res.status(201).json(article);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// PUT /api/articles/:id - 更新文章
router.put('/:id', auth, async (req, res) => {
    try {
        const article = await Article.findOneAndUpdate(
            { _id: req.params.id, author: req.user.id },
            req.body,
            { new: true, runValidators: true }
        );
        
        if (!article) {
            return res.status(404).json({ error: '文章不存在或无权修改' });
        }
        
        res.json(article);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// DELETE /api/articles/:id - 删除文章
router.delete('/:id', auth, async (req, res) => {
    try {
        const article = await Article.findOneAndDelete({
            _id: req.params.id,
            author: req.user.id
        });
        
        if (!article) {
            return res.status(404).json({ error: '文章不存在或无权删除' });
        }
        
        res.status(204).send();
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// POST /api/articles/:id/comments - 添加评论
router.post('/:id/comments', auth, async (req, res) => {
    try {
        const { content } = req.body;
        
        if (!content) {
            return res.status(400).json({ error: '评论内容不能为空' });
        }
        
        const article = await Article.findById(req.params.id);
        if (!article) {
            return res.status(404).json({ error: '文章不存在' });
        }
        
        article.comments.push({
            user: req.user.id,
            content
        });
        
        await article.save();
        res.status(201).json(article.comments[article.comments.length - 1]);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

module.exports = router;

6.2 项目二：电商后台管理系统（React + TypeScript）

商品管理组件：

// src/components/ProductManager.tsx
import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, InputNumber, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { UploadFile } from 'antd/es/upload/interface';

interface Product {
    id: string;
    name: string;
    price: number;
    stock: number;
    category: string;
    description: string;
    images: string[];
    status: 'active' | 'inactive';
}

const ProductManager: React.FC = () => {
    const [products, setProducts] = useState<Product[]>([]);
    const [loading, setLoading] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [editingProduct, setEditingProduct] = useState<Product | null>(null);
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    const [form] = Form.useForm();

    // 加载商品列表
    const fetchProducts = async () => {
        setLoading(true);
        try {
            const response = await fetch('/api/products');
            const data = await response.json();
            setProducts(data);
        } catch (error) {
            message.error('加载商品失败');
        } finally {
            setLoading(false);
        }
    };

    // 删除商品
    const handleDelete = async (id: string) => {
        Modal.confirm({
            title: '确认删除',
            content: '确定要删除这个商品吗？',
            onOk: async () => {
                try {
                    await fetch(`/api/products/${id}`, { method: 'DELETE' });
                    message.success('删除成功');
                    fetchProducts();
                } catch (error) {
                    message.error('删除失败');
                }
            }
        });
    };

    // 编辑商品
    const handleEdit = (record: Product) => {
        setEditingProduct(record);
        form.setFieldsValue(record);
        setModalVisible(true);
    };

    // 提交表单
    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            const formData = new FormData();
            
            // 添加商品信息
            Object.keys(values).forEach(key => {
                formData.append(key, values[key]);
            });
            
            // 添加图片
            fileList.forEach(file => {
                if (file.originFileObj) {
                    formData.append('images', file.originFileObj);
                }
            });

            const url = editingProduct 
                ? `/api/products/${editingProduct.id}`
                : '/api/products';
            const method = editingProduct ? 'PUT' : 'POST';

            await fetch(url, {
                method,
                body: formData
            });

            message.success(editingProduct ? '更新成功' : '创建成功');
            setModalVisible(false);
            setEditingProduct(null);
            setFileList([]);
            form.resetFields();
            fetchProducts();
        } catch (error) {
            message.error('操作失败');
        }
    };

    // 表格列定义
    const columns: ColumnsType<Product> = [
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
            width: 200
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
            render: (price: number) => `¥${price.toFixed(2)}`,
            sorter: (a, b) => a.price - b.price
        },
        {
            title: '库存',
            dataIndex: 'stock',
            key: 'stock',
            sorter: (a, b) => a.stock - b.stock
        },
        {
            title: '分类',
            dataIndex: 'category',
            key: 'category'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: string) => (
                <span style={{ 
                    color: status === 'active' ? '#52c41a' : '#ff4d4f',
                    fontWeight: 'bold'
                }}>
                    {status === 'active' ? '在售' : '下架'}
                </span>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <Button 
                        type="link" 
                        onClick={() => handleEdit(record)}
                    >
                        编辑
                    </Button>
                    <Button 
                        type="link" 
                        danger 
                        onClick={() => handleDelete(record.id)}
                    >
                        删除
                    </Button>
                </>
            )
        }
    ];

    // 上传配置
    const uploadProps = {
        onRemove: (file: UploadFile) => {
            setFileList(prev => prev.filter(item => item.uid !== file.uid));
        },
        beforeUpload: (file: UploadFile) => {
            setFileList(prev => [...prev, file]);
            return false; // 阻止自动上传
        },
        fileList,
        multiple: true,
        accept: 'image/*'
    };

    useEffect(() => {
        fetchProducts();
    }, []);

    return (
        <div style={{ padding: '24px' }}>
            <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
                <h2>商品管理</h2>
                <Button 
                    type="primary" 
                    onClick={() => {
                        setEditingProduct(null);
                        form.resetFields();
                        setFileList([]);
                        setModalVisible(true);
                    }}
                >
                    添加商品
                </Button>
            </div>

            <Table 
                columns={columns} 
                dataSource={products} 
                rowKey="id"
                loading={loading}
                pagination={{
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total, range) => 
                        `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
                }}
            />

            <Modal
                title={editingProduct ? '编辑商品' : '添加商品'}
                open={modalVisible}
                onOk={handleSubmit}
                onCancel={() => {
                    setModalVisible(false);
                    setEditingProduct(null);
                    setFileList([]);
                    form.resetFields();
                }}
                width={600}
                destroyOnClose
            >
                <Form
                    form={form}
                    layout="vertical"
                    initialValues={{ status: 'active', stock: 0, price: 0 }}
                >
                    <Form.Item
                        label="商品名称"
                        name="name"
                        rules={[{ required: true, message: '请输入商品名称' }]}
                    >
                        <Input placeholder="输入商品名称" />
                    </Form.Item>

                    <Form.Item
                        label="价格"
                        name="price"
                        rules={[{ required: true, message: '请输入价格' }]}
                    >
                        <InputNumber 
                            style={{ width: '100%' }} 
                            min={0} 
                            precision={2} 
                            placeholder="输入价格"
                        />
                    </Form.Item>

                    <Form.Item
                        label="库存"
                        name="stock"
                        rules={[{ required: true, message: '请输入库存' }]}
                    >
                        <InputNumber 
                            style={{ width: '100%' }} 
                            min={0} 
                            placeholder="输入库存"
                        />
                    </Form.Item>

                    <Form.Item
                        label="分类"
                        name="category"
                        rules={[{ required: true, message: '请输入分类' }]}
                    >
                        <Input placeholder="输入分类" />
                    </Form.Item>

                    <Form.Item
                        label="描述"
                        name="description"
                    >
                        <Input.TextArea rows={4} placeholder="输入商品描述" />
                    </Form.Item>

                    <Form.Item
                        label="状态"
                        name="status"
                        rules={[{ required: true }]}
                    >
                        <Input.Group>
                            <Button 
                                type={form.getFieldValue('status') === 'active' ? 'primary' : 'default'}
                                onClick={() => form.setFieldsValue({ status: 'active' })}
                            >
                                在售
                            </Button>
                            <Button 
                                type={form.getFieldValue('status') === 'inactive' ? 'primary' : 'default'}
                                onClick={() => form.setFieldsValue({ status: 'inactive' })}
                            >
                                下架
                            </Button>
                        </Input.Group>
                    </Form.Item>

                    <Form.Item label="商品图片">
                        <Upload {...uploadProps}>
                            <Button icon={<UploadOutlined />}>选择图片</Button>
                        </Upload>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default ProductManager;

6.3 项目三：实时聊天应用（Vue3 + Socket.io）

前端聊天组件：

<!-- src/components/ChatRoom.vue -->
<template>
    <div class="chat-container">
        <div class="chat-header">
            <h3>实时聊天室</h3>
            <div class="status">
                <span :class="{ online: isConnected, offline: !isConnected }">
                    {{ isConnected ? '已连接' : '未连接' }}
                </span>
            </div>
        </div>

        <div class="messages" ref="messagesRef">
            <div 
                v-for="msg in messages" 
                :key="msg.id"
                :class="['message', msg.type]"
            >
                <div class="message-header">
                    <span class="username">{{ msg.username }}</span>
                    <span class="time">{{ formatTime(msg.timestamp) }}</span>
                </div>
                <div class="message-content">{{ msg.content }}</div>
            </div>
        </div>

        <div class="input-area">
            <input 
                v-model="inputMessage"
                @keypress.enter="sendMessage"
                placeholder="输入消息..."
                :disabled="!isConnected"
            />
            <button 
                @click="sendMessage" 
                :disabled="!isConnected || !inputMessage.trim()"
            >
                发送
            </button>
        </div>

        <div class="users-list">
            <h4>在线用户 ({{ onlineUsers.length }})</h4>
            <div 
                v-for="user in onlineUsers" 
                :key="user.id"
                class="user-item"
            >
                <span class="status-dot"></span>
                {{ user.username }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { io } from 'socket.io-client';

const socket = ref(null);
const isConnected = ref(false);
const messages = ref([]);
const onlineUsers = ref([]);
const inputMessage = ref('');
const messagesRef = ref(null);
const username = ref(`用户${Math.floor(Math.random() * 1000)}`);

// 连接服务器
const connect = () => {
    socket.value = io('http://localhost:3000', {
        auth: {
            username: username.value
        }
    });

    // 监听连接
    socket.value.on('connect', () => {
        isConnected.value = true;
        addSystemMessage('已连接到聊天室');
    });

    // 监听断开
    socket.value.on('disconnect', () => {
        isConnected.value = false;
        addSystemMessage('与服务器断开连接');
    });

    // 接收消息
    socket.value.on('message', (data) => {
        messages.value.push({
            id: Date.now(),
            type: data.username === username.value ? 'self' : 'other',
            username: data.username,
            content: data.content,
            timestamp: data.timestamp
        });
        scrollToBottom();
    });

    // 系统消息
    socket.value.on('system', (data) => {
        addSystemMessage(data.content);
    });

    // 用户列表更新
    socket.value.on('users', (users) => {
        onlineUsers.value = users;
    });

    // 历史消息
    socket.value.on('history', (history) => {
        messages.value = history.map(msg => ({
            id: msg.id,
            type: msg.username === username.value ? 'self' : 'other',
            username: msg.username,
            content: msg.content,
            timestamp: msg.timestamp
        }));
        scrollToBottom();
    });
};

// 发送消息
const sendMessage = () => {
    if (!inputMessage.value.trim() || !isConnected.value) return;

    socket.value.emit('message', {
        username: username.value,
        content: inputMessage.value,
        timestamp: Date.now()
    });

    inputMessage.value = '';
};

// 添加系统消息
const addSystemMessage = (content) => {
    messages.value.push({
        id: Date.now(),
        type: 'system',
        username: '系统',
        content,
        timestamp: Date.now()
    });
    scrollToBottom();
};

// 滚动到底部
const scrollToBottom = async () => {
    await nextTick();
    if (messagesRef.value) {
        messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
    }
};

// 格式化时间
const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
    });
};

// 断开连接
const disconnect = () => {
    if (socket.value) {
        socket.value.disconnect();
    }
};

onMounted(() => {
    connect();
});

onUnmounted(() => {
    disconnect();
});
</script>

<style scoped>
.chat-container {
    max-width: 800px;
    margin: 20px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;
}

.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status span {
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
}

.status .online {
    background: #52c41a;
}

.status .offline {
    background: #ff4d4f;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

.message {
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.username {
    font-weight: bold;
    font-size: 14px;
}

.time {
    font-size: 12px;
    color: #999;
}

.message-content {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 70%;
    word-wrap: break-word;
}

.message.self .message-content {
    background: #007bff;
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message.other .message-content {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}

.message.system .message-content {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    text-align: center;
    margin: 0 auto;
    max-width: 80%;
    font-size: 13px;
}

.input-area {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 10px;
}

.input-area input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.input-area input:focus {
    border-color: #007bff;
}

.input-area input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.input-area button {
    padding: 12px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s;
}

.input-area button:hover:not(:disabled) {
    background: #0056b3;
}

.input-area button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.users-list {
    background: #f8f9fa;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    max-height: 150px;
    overflow-y: auto;
}

.users-list h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #666;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #52c41a;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (max-width: 768px) {
    .chat-container {
        margin: 0;
        border-radius: 0;
        height: 100vh;
    }
}
</style>

后端Socket.io服务器：

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
    cors: {
        origin: "http://localhost:5173", // Vite开发服务器
        methods: ["GET", "POST"]
    }
});

app.use(cors());
app.use(express.json());

// 存储在线用户和消息历史
const onlineUsers = new Map();
const messageHistory = [];

// Socket.io连接处理
io.on('connection', (socket) => {
    console.log(`用户连接: ${socket.id}`);

    // 用户加入
    socket.on('join', (data) => {
        const user = {
            id: socket.id,
            username: data.username,
            joinedAt: Date.now()
        };
        
        onlineUsers.set(socket.id, user);
        
        // 发送欢迎消息
        socket.emit('system', {
            content: `欢迎 ${data.username} 加入聊天室！`,
            timestamp: Date.now()
        });
        
        // 通知其他用户
        socket.broadcast.emit('system', {
            content: `${data.username} 已加入聊天室`,
            timestamp: Date.now()
        });
        
        // 更新用户列表
        io.emit('users', Array.from(onlineUsers.values()));
        
        // 发送历史消息
        socket.emit('history', messageHistory.slice(-50)); // 最近50条
    });

    // 接收消息
    socket.on('message', (data) => {
        const user = onlineUsers.get(socket.id);
        if (!user) return;

        const message = {
            id: Date.now(),
            username: data.username,
            content: data.content,
            timestamp: data.timestamp,
            userId: socket.id
        };

        // 保存到历史
        messageHistory.push(message);
        if (messageHistory.length > 1000) {
            messageHistory.shift(); // 保持最近1000条
        }

        // 广播给所有用户
        io.emit('message', message);
    });

    // 用户断开连接
    socket.on('disconnect', () => {
        const user = onlineUsers.get(socket.id);
        if (user) {
            console.log(`用户断开: ${user.username}`);
            
            // 通知其他用户
            io.emit('system', {
                content: `${user.username} 已离开聊天室`,
                timestamp: Date.now()
            });
            
            // 移除用户
            onlineUsers.delete(socket.id);
            
            // 更新用户列表
            io.emit('users', Array.from(onlineUsers.values()));
        }
    });
});

// HTTP API - 获取在线用户
app.get('/api/users', (req, res) => {
    res.json(Array.from(onlineUsers.values()));
});

// HTTP API - 获取历史消息
app.get('/api/messages', (req, res) => {
    const limit = parseInt(req.query.limit) || 50;
    res.json(messageHistory.slice(-limit));
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
});

第七阶段：面试准备与职业发展

7.1 常见面试题解析

JavaScript基础：

// 1. 事件循环（Event Loop）示例
console.log('1'); // 同步

setTimeout(() => {
    console.log('2'); // 宏任务
}, 0);

Promise.resolve().then(() => {
    console.log('3'); // 微任务
});

console.log('4'); // 同步

// 输出顺序: 1, 4, 3, 2

// 2. 闭包应用
function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2

// 3. 原型链继承
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound`);
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks!`);
};

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // Rex barks!

// 4. 防抖与节流
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用示例
const debouncedSearch = debounce((query) => {
    console.log('Searching for:', query);
}, 500);

const throttledScroll = throttle(() => {
    console.log('Scroll event');
}, 1000);

CSS布局题：

/* 实现垂直居中 */
.center-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* 实现两栏布局（左侧固定，右侧自适应） */
.layout-two-column {
    display: flex;
    gap: 20px;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
}

/* 实现圣杯布局 */
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.holy-grail header,
.holy-grail footer {
    flex-shrink: 0;
}

.holy-grail main {
    display: flex;
    flex: 1;
}

.holy-grail nav,
.holy-grail aside {
    width: 200px;
    flex-shrink: 0;
}

.holy-grail article {
    flex: 1;
    min-width: 0;
}

/* 响应式媒体查询 */
@media (max-width: 768px) {
    .holy-grail main {
        flex-direction: column;
    }
    
    .holy-grail nav,
    .holy-grail aside {
        width: 100%;
        order: 2;
    }
    
    .holy-grail article {
        order: 1;
    }
}

/* 实现三角形 */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #333;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #333;
}

Vue/React框架题：

// Vue 3 生命周期示例
const { onMounted, onUpdated, onUnmounted } = Vue;

setup() {
    const count = ref(0);
    
    onMounted(() => {
        console.log('组件已挂载');
        // 可以访问DOM
    });
    
    onUpdated(() => {
        console.log('组件已更新');
    });
    
    onUnmounted(() => {
        console.log('组件已卸载');
        // 清理定时器、事件监听器
    });
    
    return { count };
}

// React Hooks 依赖数组问题
function ExampleComponent({ id }) {
    const [data, setData] = useState(null);
    
    // 错误示例：缺少依赖
    useEffect(() => {
        fetchData(id);
    }, []); // 空数组会导致id变化时不重新获取数据
    
    // 正确示例
    useEffect(() => {
        fetchData(id);
    }, [id]); // id变化时重新获取
    
    // 如果只想执行一次
    useEffect(() => {
        fetchData(id);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []); // 使用eslint注释说明意图
}

7.2 简历优化建议

优秀简历示例：

# 个人简介
- 3年前端开发经验，专注于Vue3和React技术栈
- 精通现代前端工程化、性能优化和跨端开发
- 具备全栈开发能力，熟悉Node.js和数据库设计

# 项目经验
## 电商后台管理系统（核心开发者）
- 技术栈：Vue3 + TypeScript + Vite + Pinia + Ant Design
- 实现商品管理、订单处理、数据统计等核心功能
- 优化首屏加载时间从3.2s降至1.1s（代码分割+懒加载）
- 支持10000+商品数据的实时搜索和筛选（防抖+虚拟滚动）
- 协助团队建立代码规范和CI/CD流程

## 实时聊天应用（独立开发）
- 技术栈：React 18 + Socket.io + Express + MongoDB
- 实现用户认证、私聊/群聊、消息已读状态、文件上传
- 支持1000+并发用户，消息延迟<50ms
- 使用Redis缓存在线状态，优化数据库查询性能
- 项目地址：github.com/yourname/chat-app

# 技能特长
- 框架：Vue3/React18、Next.js、Nuxt3
- 工程化：Webpack、Vite、Rollup、ESLint、Jest
- 后端：Node.js、Express、MongoDB、Redis
- 工具：Git、Docker、Linux、Nginx
- 软技能：技术文档编写、团队协作、需求分析

# 工作经历
## XX科技有限公司 | 前端开发工程师 | 2022.03 - 至今
- 负责公司核心SaaS产品的前端架构设计和开发
- 主导从Vue2到Vue3的技术升级，提升开发效率40%
- 建立前端监控体系，线上bug率降低60%
- 指导3名初级工程师，组织技术分享会12次

# 教育背景
- XX大学 | 计算机科学与技术 | 本科 | 2018.09 - 2022.06

7.3 持续学习路径

技术博客推荐：

  • MDN Web Docs（权威文档）
  • Vue官方文档（中文）
  • React官方文档（英文）
  • 掘金社区（中文技术文章）
  • Stack Overflow（问题解答）

开源项目贡献：

# 1. 找到感兴趣的项目
# 在GitHub搜索：good-first-issues:>=5 stars:>1000

# 2. Fork项目
git clone https://github.com/your-username/project-name.git

# 3. 创建分支
git checkout -b fix/issue-123

# 4. 提交PR
git push origin fix/issue-123
# 然后在GitHub界面创建Pull Request

# 5. 参与Code Review
# 认真回复reviewer的评论，及时修改

学习资源整理：

  • 视频教程：B站前端教程、慕课网、极客时间
  • 在线练习：LeetCode（算法）、Codewars（JS练习）
  • 模拟面试：Pramp、Interviewing.io
  • 技术社区：GitHub、掘金、V2EX、Twitter关注技术大牛

第八阶段：就业指导与薪资谈判

8.1 面试流程全攻略

技术面试准备清单：

  1. 基础知识复习（1-2周）

    • HTML5/CSS3所有标签和属性
    • JavaScript核心概念（闭包、原型链、异步、事件循环）
    • 浏览器工作原理（渲染流程、重绘重排）

  2. 框架深度掌握（1周）

    • 至少精通一个框架（Vue或React）
    • 理解框架设计思想和核心原理
    • 能够手写简易版框架

  3. 算法准备（2周）

    • 熟练掌握排序、查找算法
    • LeetCode Easy/Medium难度题目50道
    • 剑指Offer重点题目

  4. 项目复盘（1周）

    • 梳理项目架构和难点
    • 准备STAR法则描述项目经历
    • 思考技术选型理由和优化方案

8.2 薪资谈判技巧

薪资谈判话术示例：

面试官：”你的期望薪资是多少？”

初级开发者（0-1年经验）：

"我对薪资没有硬性要求，更看重学习机会和发展空间。
根据市场行情，我期望的薪资范围是8k-12k。
如果公司有完善的培训体系，我愿意从较低薪资开始。"

中级开发者（1-3年经验）：

"基于我的技术栈和项目经验，以及目前的市场行情，
我期望的薪资范围是15k-20k。
我了解到贵公司的薪资结构是13薪+绩效奖金，
希望能在这个基础上有合理的offer。"

高级开发者（3年以上经验）：

"我目前的薪资是20k，期望涨幅30%左右。
根据岗位要求和我的能力匹配度，
期望薪资在25k-30k之间。
我更关注总包（base+奖金+期权），
愿意根据整体package进行综合考虑。"

谈判要点：

  • 了解市场行情（使用Boss直聘、拉勾、Glassdoor）
  • 准备备选方案（多个offer）
  • 关注长期发展（培训、晋升、技术栈）
  • 确认薪资结构（base、奖金、期权、福利）
  • 争取试用期薪资不打折

8.3 职业发展规划

短期目标（1-2年）：

  • 成为团队核心开发成员
  • 深入学习一个技术方向（如性能优化、跨端开发）
  • 参与开源项目或技术社区
  • 建立个人技术博客

中期目标（3-5年）：

  • 晋升为技术负责人或Team Leader
  • 具备架构设计能力
  • 带领团队完成复杂项目
  • 考虑技术专家或管理路线

长期目标（5年以上）：

  • 技术总监/CTO
  • 行业技术专家
  • 创业或技术顾问
  • 影响力构建（演讲、出书、开源）

总结与建议

学习路线时间规划表

阶段 内容 建议时间 关键产出
第一阶段 HTML5/CSS3/JS基础 2-4周 静态网页项目
第二阶段 工具链与工程化 3-5周 Git项目、npm包
第三阶段 Vue/React框架 6-12周 SPA项目
第四阶段 高级技术栈 8周 TypeScript项目
第五阶段 全栈能力 8周 Node.js API
第六阶段 实战项目 8周 3个完整项目
第七阶段 面试准备 2-4周 简历、作品集
第八阶段 就业指导 1-2周 offer

关键成功要素

  1. 坚持编码：每天至少写2小时代码，周末可以更多
  2. 项目驱动：不要只看教程，必须动手做项目
  3. 及时复盘：每周总结学习内容，记录问题和解决方案
  4. 社区参与：加入技术群组，参与讨论和分享
  5. 英语能力：阅读英文文档，关注国际技术动态
  6. 职业素养：代码规范、文档编写、沟通协作

常见误区提醒

❌ 只学框架不学基础：框架会过时，基础永不过时 ❌ 追求数量忽视质量：精通一个方向比了解十个方向更重要 ❌ 闭门造车：不参与社区，不关注业界动态 ❌ 眼高手低：不屑于做简单项目，又做不了复杂项目 ❌ 忽视软技能：技术重要，沟通协作同样重要

最后的建议

前端开发是一个快速变化的领域，但核心原理相对稳定。建议你：

  • 打好基础：HTML/CSS/JS是根基，必须扎实
  • 选择一个主框架：Vue或React，深入研究
  • 培养工程思维：代码质量、性能、可维护性
  • 保持学习热情：技术更新快，持续学习是常态
  • 建立个人品牌：博客、GitHub、技术社区

记住，编程是一项实践技能，写代码的时间应该大于看教程的时间。遇到问题时，先尝试自己解决，实在不行再搜索或提问。祝你学习顺利，早日成为一名优秀的前端工程师！