Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod-tutorial css-php.cn

Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod

DDD

Lepaskan： 2025-01-22 04:46:21

asal

467 orang telah melayarinya

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

Tutorial ini membimbing anda membina aplikasi Penjana Petikan Rawak yang praktikal, sesuai untuk mempelajari asas pengekodan. Kami akan merangkumi setiap langkah dengan contoh kod terperinci, memudahkan pemula untuk mengikutinya.

Gambaran Keseluruhan Projek

Apl ini mendapatkan semula petikan rawak daripada API awam, memaparkannya dan membenarkan pengguna menyalin atau berkongsinya. Mari kita pecahkan proses dan terokai logik kod.

Langkah 1: Struktur HTML

Kita mulakan dengan mencipta reka letak HTML:

<code class="language-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></code>

Salin selepas log masuk

Ini menyediakan struktur asas, termasuk elemen untuk memaparkan petikan, butang untuk petikan baharu dan ikon untuk menyalin dan berkongsi.

Langkah 2: Pengendalian CORS dengan Proksi

Untuk mengakses API luaran, kami memerlukan penyelesaian CORS (Cross-Origin Resource Sharing). Pelayan proksi Express.js yang mudah mengendalikan perkara ini:

<code class="language-javascript">// 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}`));</code>

Salin selepas log masuk

Proksi tempatan ini mengambil petikan dan mengelakkan isu CORS.

Langkah 3: Mengambil Petikan dengan JavaScript

Butang "Petikan Baharu" mencetuskan pengambilan petikan:

<code class="language-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.";
    }
}</code>

Salin selepas log masuk

Skrip ini mengambil data, mengemas kini petikan dan pengarang dalam UI.

Langkah 4: Kefungsian Salin

API Papan Klip membolehkan penyalinan petikan:

<code class="language-javascript">// 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);
    }
}</code>

Salin selepas log masuk

Mengklik ikon salin menyalin petikan dan pengarang.

Langkah 5: Kongsi Fungsi

API Navigator memudahkan perkongsian:

<code class="language-javascript">// 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}`);
    }
}</code>

Salin selepas log masuk

Ini mengendalikan perkongsian, memberikan sandaran untuk penyemak imbas yang kekurangan navigator.share.

Langkah 6: Menggayakan dengan CSS

CSS menggayakan apl untuk daya tarikan visual dan responsif (gaya contoh ditiadakan untuk ringkas).

Langkah 7: Melancarkan Apl

Klon repositori: (ganti dengan URL repositori sebenar anda)
Pasang kebergantungan: npm install
Mulakan pelayan proksi: node proxy.js
Buka index.html dalam penyemak imbas anda.

Struktur Projek

index.html: UI Utama
proxy.js: pelayan proksi CORS
index.js: Pengambilan petikan dan paparan
copyQuote.js: Kefungsian salin
shareQuote.js: Kongsi fungsi
styles.css: Penggayaan

Kredit API

Petikan disediakan oleh API Petikan.

Kesimpulan

Tutorial ini merangkumi pembinaan Penjana Petikan Rawak, menunjukkan penyepaduan API, pengendalian CORS dan API penyemak imbas. Ini merupakan latihan yang bagus untuk mempelajari interaksi API, asas JavaScript dan API penyemak imbas. Maklum balas adalah dialu-alukan!

GitHub | LinkedIn | X

Atas ialah kandungan terperinci Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!