前端项目实践：打造响应式个人简历与实时天气预报应用-CSDN博客

本文链接：https://blog.csdn.net/qq_57755194/article/details/147625034

在当今前端开发领域，构建实际项目是提升技能的最佳方式。本文将带你完成两个极具实用价值的前端项目：响应式个人简历页面和天气预报Web应用。这两个项目不仅能够丰富你的作品集，还能帮助你掌握现代前端开发的核心技术。

一、响应式个人简历页面开发

1.1 为什么需要响应式简历

在移动互联网时代，你的简历需要在各种设备上完美呈现——从桌面显示器到智能手机屏幕。响应式设计能确保你的专业形象不会因为设备不同而打折扣。

1.2 技术选型

HTML5：语义化标签增强SEO和可访问性
CSS3：Flexbox/Grid布局实现灵活排版
媒体查询(Media Queries)：针对不同屏幕尺寸优化样式
JavaScript：添加交互元素提升用户体验

1.3 实现步骤

1.3.1 基础结构搭建

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的个人简历</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="resume-header">
        <div class="profile-pic">
            <img src="profile.jpg" alt="张三的照片">
        </div>
        <div class="header-info">
            <h1>张三</h1>
            <p>前端开发工程师 | 3年经验</p>
        </div>
    </header>
    <!-- 其他部分内容 -->
</body>
</html>

1.3.2 响应式CSS设计

/* 基础样式 */
.resume-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
}

.profile-pic img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .resume-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-pic {
        margin-bottom: 15px;
    }
    
    .profile-pic img {
        width: 100px;
        height: 100px;
    }
}

1.3.3 添加交互效果

// 为技能部分添加动画效果
document.querySelectorAll('.skill-item').forEach(item => {
    item.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.05)';
        this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
    });
    
    item.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = 'none';
    });
});

1.4 高级技巧

打印优化：添加@media print样式确保打印效果
暗黑模式：使用CSS变量实现主题切换
PDF导出：利用jsPDF库实现一键导出PDF功能

二、天气预报Web应用开发

2.1 为什么选择天气预报项目

天气预报应用是学习API调用、异步数据处理和动态UI更新的绝佳案例。通过这个项目，你将掌握：

第三方API的调用与认证
JSON数据处理
动态DOM操作
错误处理与用户反馈

2.2 API选择与注册

推荐使用以下天气API服务：

OpenWeatherMap：提供全球天气数据，免费层足够学习使用13
和风天气：中文友好，免费层功能丰富2
Weatherstack：简单易用，响应快速

注册流程通常包括：

访问官网注册账号
创建应用获取API Key
阅读文档了解请求格式

2.3 项目实现

2.3.1 基础HTML结构

<div class="weather-app">
    <h1>天气预报</h1>
    <div class="search-box">
        <input type="text" id="city-input" placeholder="输入城市名称">
        <button id="search-btn">查询</button>
    </div>
    <div class="weather-info">
        <div class="current-weather">
            <h2 id="city-name">--</h2>
            <div class="weather-main">
                <img id="weather-icon" src="" alt="天气图标">
                <span id="temperature">--</span>
            </div>
            <p id="weather-desc">--</p>
            <div class="weather-details">
                <p>湿度: <span id="humidity">--</span>%</p>
                <p>风速: <span id="wind-speed">--</span>m/s</p>
            </div>
        </div>
        <div class="forecast" id="forecast-container">
            <!-- 天气预报卡片将通过JS动态生成 -->
        </div>
    </div>
</div>

2.3.2 调用天气API

const API_KEY = '你的API密钥';
const BASE_URL = 'https://api.openweathermap.org/data/2.5';

async function getWeatherData(city) {
    try {
        const response = await fetch(`${BASE_URL}/weather?q=${city}&appid=${API_KEY}&units=metric&lang=zh_cn`);
        if (!response.ok) {
            throw new Error('城市未找到');
        }
        return await response.json();
    } catch (error) {
        console.error('获取天气数据失败:', error);
        throw error;
    }
}

async function getForecastData(city) {
    try {
        const response = await fetch(`${BASE_URL}/forecast?q=${city}&appid=${API_KEY}&units=metric&lang=zh_cn`);
        if (!response.ok) {
            throw new Error('预报数据获取失败');
        }
        return await response.json();
    } catch (error) {
        console.error('获取预报数据失败:', error);
        throw error;
    }
}

2.3.3 渲染天气数据

function displayCurrentWeather(data) {
    document.getElementById('city-name').textContent = `${data.name}, ${data.sys.country}`;
    document.getElementById('temperature').textContent = `${Math.round(data.main.temp)}°C`;
    document.getElementById('weather-desc').textContent = data.weather[0].description;
    document.getElementById('humidity').textContent = data.main.humidity;
    document.getElementById('wind-speed').textContent = data.wind.speed;
    
    const iconCode = data.weather[0].icon;
    document.getElementById('weather-icon').src = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
    document.getElementById('weather-icon').style.display = 'block';
}

function displayForecast(data) {
    const forecastContainer = document.getElementById('forecast-container');
    forecastContainer.innerHTML = '';
    
    // 每天只取一个时间点的预报(例如中午12点)
    const dailyForecast = data.list.filter(item => {
        return item.dt_txt.includes('12:00:00');
    });
    
    dailyForecast.forEach(day => {
        const date = new Date(day.dt * 1000);
        const dayName = date.toLocaleDateString('zh-CN', { weekday: 'short' });
        
        const forecastCard = document.createElement('div');
        forecastCard.className = 'forecast-card';
        forecastCard.innerHTML = `
            <h3>${dayName}</h3>
            <img src="https://openweathermap.org/img/wn/${day.weather[0].icon}.png" alt="${day.weather[0].description}">
            <p>${Math.round(day.main.temp)}°C</p>
            <p>${day.weather[0].description}</p>
        `;
        
        forecastContainer.appendChild(forecastCard);
    });
}

2.3.4 添加事件监听

document.getElementById('search-btn').addEventListener('click', async () => {
    const city = document.getElementById('city-input').value.trim();
    if (!city) return;
    
    try {
        const weatherData = await getWeatherData(city);
        displayCurrentWeather(weatherData);
        
        const forecastData = await getForecastData(city);
        displayForecast(forecastData);
    } catch (error) {
        alert(error.message);
    }
});