构建随机报价生成器：带有代码的分步指南-css教程-PHP中文网

项目概况

第 1 步：HTML 结构

第 2 步：使用代理处理 CORS

第 3 步：使用 JavaScript 获取报价

第 4 步：复制功能

第 5 步：共享功能

第 6 步：使用 CSS 设计样式

第 7 步：启动应用程序

项目结构

API 积分

结论

首页

web前端

css教程

构建随机报价生成器：带有代码的分步指南

DDD

Jan 22, 2025 am 04:46 AM

Building a Random Quotes Generator: A Step-by-Step Guide with Code

本教程将指导您构建实用的随机报价生成器应用程序，非常适合学习编码基础知识。我们将用详细的代码示例来介绍每个步骤，使初学者可以轻松遵循。

项目概况

此应用程序从公共 API 检索随机报价，显示它们，并允许用户复制或共享它们。我们来分解一下流程，探究一下代码逻辑。

第 1 步：HTML 结构

我们首先创建 HTML 布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quotes Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- Content will be added here -->
    </div>
    <script src="index.js"></script>
</body>
</html>

登录后复制

这设置了基本结构，包括显示报价的元素、新报价的按钮以及用于复制和共享的图标。

第 2 步：使用代理处理 CORS

为了访问外部API，我们需要一个CORS（跨源资源共享）解决方案。一个简单的 Express.js 代理服务器可以处理这个问题：

// proxy.js
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/api/quote", async (req, res) => {
    try {
        const response = await fetch("https://qapi.vercel.app/api/random");
        const data = await response.json();
        res.json(data);
    } catch (error) {
        res.status(500).json({ error: "API fetch failed" });
    }
});

const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy running on http://localhost:${PORT}`));

登录后复制

此本地代理获取报价并避免 CORS 问题。

第 3 步：使用 JavaScript 获取报价

“新报价”按钮会触发报价获取：

// index.js
const quoteDisplay = document.getElementById("quote");
const authorDisplay = document.getElementById("author");

async function getQuote() {
    try {
        const response = await fetch('http://localhost:4000/api/quote');
        const data = await response.json();
        quoteDisplay.textContent = data.quote || "No quote found.";
        authorDisplay.textContent = data.author || "Unknown";
    } catch (error) {
        console.error("Quote fetch error:", error);
        quoteDisplay.textContent = "Error fetching quote.";
    }
}

登录后复制

此脚本获取数据，更新 UI 中的引用和作者。

第 4 步：复制功能

剪贴板 API 支持复制报价：

// copyQuote.js
async function copyQuote() {
    try {
        const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
        await navigator.clipboard.writeText(quoteText);
        alert("Copied to clipboard!");
    } catch (error) {
        console.error("Copy failed:", error);
    }
}

登录后复制

单击复制图标可复制引用和作者。

第 5 步：共享功能

Navigator API 促进共享：

// shareQuote.js
async function shareQuote() {
    const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
    try {
        await navigator.share({ text: quoteText });
    } catch (error) {
        console.error("Share failed:", error);
        // Fallback for unsupported browsers
        alert(`Share this quote: ${quoteText}`);
    }
}

登录后复制

这处理共享，为缺少navigator.share的浏览器提供后备。