NgSysV.A Serius Svelte InfoSys: Versi mesra Peraturan

Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.

Semakan terakhir: Nov '24

1. Pengenalan

Siri ini sebelum ini telah menerangkan cara anda boleh menggunakan rangka kerja Svelte bersama-sama dengan API Pelanggan pangkalan data Firestore Google untuk membangunkan sistem maklumat yang berguna dengan cepat dan menyeronokkan. Walau bagaimanapun, Malangnya, Post 3.3 mendedahkan bagaimana sistem pengesahan Firebase yang sangat baik tidak menyokong aktiviti Firestore dalam fungsi load() dan actions() sisi pelayan di mana peraturan pangkalan data merujuk objek auth.

Melangkau peraturan keizinan Firestore anda bukan pilihan - tanpa ini, pangkalan data anda terbuka luas kepada sesiapa sahaja yang boleh merampas kunci firebaseConfig daripada apl web anda. Siaran ini menerangkan cara untuk mengolah semula kod sisi pelayan Svelte supaya ia berjalan pada bahagian klien manakala peraturan Firestore kekal kukuh.

2. Mengolah semula fungsi load() 'terkompromi'

Tidak semua fungsi load() akan terjejas oleh kehadiran peraturan Firestore. Mereka yang merujuk koleksi Firestore awam masih akan berjalan dengan gembira di bahagian pelayan. API Klien masih tersedia dalam fail page.server.js - ia tidak akan berfungsi jika diminta untuk menggunakan koleksi yang dilindungi oleh pengesahan.

Jika fungsi load() anda menangani fail awam dan anda hanya mahu mengelakkan penyahpepijatan sisi pelayan, anda mungkin mempertimbangkan untuk memindahkan fungsi load() anda ke dalam fail page.js. Ini berfungsi sama seperti fail page.server.js - Svelte masih akan menjalankan fungsi secara automatik pada masa muat. Tetapi ini berlaku di bahagian klien sekarang di mana ia boleh dinyahpepijat dalam penyemak imbas. Lihat Svelte docs di Memuatkan data untuk butiran

Walau bagaimanapun, fungsi load() 'terkompromi' (biasanya di mana peraturan Firestore digunakan untuk memastikan pengguna hanya boleh mengakses data mereka sendiri) mesti dipindahkan ke kod sebelah klien. Biasanya, ini akan diolah semula sebagai fungsi baharu, dinamakan dengan sewajarnya, dalam bahagian fail page.svelte yang berkaitan.

Tetapi sekarang anda mesti mencari cara untuk melancarkan fungsi load() anda yang dipindahkan secara automatik pada permulaan halaman - anda tidak lagi mendapat manfaat daripada pengaturan terbina dalam Svelte untuk fungsi load() asli. Masalahnya ialah fungsi penempatan semula anda adalah tak segerak dan oleh itu tidak boleh dilancarkan terus daripada fail page.svelte; bahagian. Masalah ini diselesaikan dengan menggunakan utiliti onMount Svelte.

"OnMount" ialah "cangkuk" kitaran hayat Svelte yang berjalan secara automatik apabila halaman apl web dilancarkan. Di dalam onMount() anda kini boleh menunggu dengan selamat fungsi load() anda - anda mungkin teringat bahawa anda bertemu dengannya lebih awal dalam fungsi log keluar. Anda boleh mendapatkan penerangan di Svelte Lifecycle Hooks.

3. Mengolah semula fungsi actions() 'terkompromi'

Dalam kes ini, tiada pilihan. Fungsi actions() yang terjejas mesti dipindahkan ke dalam bahagian halaman induk.fail langsing. Butang serah borang di sini mesti diolah semula untuk "membakar" tindakan melalui pengaturan on:click yang merujuk kepada fungsi yang dipindahkan.

4. Contoh: Versi mesra peraturan halaman paparan produk

Dalam contoh kod berikut, laluan produk-paparan-rf baharu memaparkan senarai Nombor produk "Produk Ajaib" lama. Load() yang digunakan di sini tidak terjejas tetapi kodnya masih dialihkan ke fail page.js untuk membolehkan anda mengesahkan bahawa anda boleh menyahpepijatnya dalam penyemak imbas. Satu-satunya perubahan lain ialah:

• kod kini termasuk sambungan untuk memaparkan medan ProductDetails apabila masukan produk dalam senarai "Produk Ajaib" diklik.
• firebase-config kini diimport daripada fail lib yang diperkenalkan dalam siaran terakhir

// src/routes/products-display-rf/+page.svelte
<script>
    export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/+layout.svelte
<header>
    <h2>





<pre class="brush:php;toolbar:false">// routes/products-display-rf/+page.js
import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client"

export async function load() {

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
  const productsSnapshot = await getDocs(productsQuery);

  let currentProducts = [];

  productsSnapshot.forEach((product) => {
    currentProducts.push({ productNumber: product.data().productNumber });
  });

  return { products: currentProducts }
}

// src/routes/products-display-rf/[productNumber]/+page.svelte
<script>
  import { goto } from "$app/navigation";
  export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/[productNumber]/+page.js
import { collection, query, getDocs, where } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client";

export async function load(event) {
  const productNumber = parseInt(event.params.productNumber, 10);

  // Now that we have the product number, we can fetch the product details from the database

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, where("productNumber", "==", productNumber));
  const productsSnapshot = await getDocs(productsQuery);
  const productDetails = productsSnapshot.docs[0].data().productDetails;

  return {
    productNumber: productNumber, productDetails: productDetails
  };
}

Salin kod ini ke dalam fail baharu dalam folder akhiran "-rf". Tetapi berhati-hati semasa anda melakukan ini - bekerja dengan banyak fail halaman yang mengelirukan dalam hierarki folder sempit VSCode memerlukan penumpuan yang rapat. Apabila anda selesai, jalankan pelayan dev anda dan uji halaman baharu di alamat http://localhost:5173/products-display-rf.

Halaman "Paparan Produk" sepatutnya kelihatan sama seperti sebelumnya tetapi, apabila anda mengklik, halaman "Butiran Produk" kini sepatutnya memaparkan kandungan yang dijana secara dinamik.

5. Contoh: Versi mesra peraturan halaman penyelenggaraan produk

Perkara agak lebih menarik dalam versi sisi pelanggan halaman penyelenggaraan produk.

Oleh kerana peraturan Firebase anda untuk koleksi produk kini merujuk kepada pengesahan (dan dengan itu memerlukan bakal pengguna "log masuk"), fungsi actions() yang menambah dokumen produk baharu terjejas. Jadi ini perlu dialihkan keluar daripada fail page.server.js dan ditempatkan semula ke dalam fail page.svelte induk.

Di sini, fungsi itu dinamakan semula sebagai handleSubmit() dan "dipecat" oleh klausa on:submit={handleSubmit} pada

yang mengumpul data produk.

Walaupun halaman produk-penyelenggaraan tidak mempunyai fungsi load(), onMount masih menampilkan dalam fail pagesvelte yang dikemas kini. Ini kerana onMount menyediakan cara berguna untuk mengubah hala pengguna yang cuba menjalankan halaman penyelenggaraan sebelum mereka log masuk.

Lihat jika anda boleh mengikut logik yang disenaraikan di bawah dalam fail products-maintenance-rf/ page.svelte baharu dan fail /login/ page.svelte yang dikemas kini.

// src/routes/products-maintenance-rf/+page.svelte
<script>
    import { onMount } from "svelte";
    import { collection, doc, setDoc } from "firebase/firestore";
    import { db } from "$lib/utilities/firebase-client";
    import { goto } from "$app/navigation";
    import { auth } from "$lib/utilities/firebase-client";
    import { productNumberIsNumeric } from "$lib/utilities/productNumberIsNumeric";

    let productNumber = '';
    let productDetails = '';
    let formSubmitted = false;
    let databaseUpdateSuccess = null;
    let databaseError = null;

    let productNumberClass = "productNumber";
    let submitButtonClass = "submitButton";

    onMount(() => {
        if (!auth.currentUser) {
            goto("/login?redirect=/products-maintenance-rf");
            return;
        }
    });

    async function handleSubmit(event) {
        event.preventDefault(); // Prevent default form submission behavior
        formSubmitted = false; // Reset formSubmitted at the beginning of each submission

        // Convert productNumber to an integer
        const newProductNumber = parseInt(productNumber, 10);
        const productsDocData = {
            productNumber: newProductNumber,
            productDetails: productDetails,
        };

        try {
            const productsCollRef = collection(db, "products");
            const productsDocRef = doc(productsCollRef);
            await setDoc(productsDocRef, productsDocData);

            databaseUpdateSuccess = true;
            formSubmitted = true; // Set formSubmitted only after successful operation

            // Clear form fields after successful submission
            productNumber = '';
            productDetails = '';
        } catch (error) {
            databaseUpdateSuccess = false;
            databaseError = error.message;
            formSubmitted = true; // Ensure formSubmitted is set after error
        }
    }
</script>

<form on:submit={handleSubmit}>
    <label>
        Product Number
        <input
            bind:value={productNumber}
            name="productNumber"
           >





<pre class="brush:php;toolbar:false">// src/routes/login/+page.svelte
<script>
    import { onMount } from "svelte";
    import { goto } from "$app/navigation"; // SvelteKit's navigation for redirection
    import { auth } from "$lib/utilities/firebase-client";
    import { signInWithEmailAndPassword } from "firebase/auth";

    let redirect;
    let email = "";
    let password = "";

    onMount(() => {
        // Parse the redirectTo parameter from the current URL
        const urlParams = new URLSearchParams(window.location.search);
        redirect = urlParams.get("redirect") || "/";
    });

    async function loginWithMail() {
        try {
            const result = await signInWithEmailAndPassword(
                auth,
                email,
                password,
            );
            goto(redirect);
        } catch (error) {
            window.alert("login with Mail failed" + error);
        }
    }
</script>

<div>



<p>Test this by starting your dev server and launching the /products-maintenance-rf page. Because you're not logged you'll be redirected immediately to the login page. Note that the URL displayed here includes the products-maintenance-rf return address as a parameter. </p>

<p>Once you're logged in, the login page should send you back to products-maintenance-rf. Since you're now logged in, the new version of the product input form (which now includes a product detail field) will be displayed.</p>

<p>The input form works very much as before, but note how it is cleared after a successful submission, enabling you to enter further products. Use your products-display-rf page to confirm that new products and associated product details data are being added correctly.</p>

<p>Note also, that when a user is logged in, you can use the auth object thus created to obtain user details such as email address:<br>
</p>

<pre class="brush:php;toolbar:false">const userEmail = auth.currentUser.email;

Semak dengan chatGPT untuk mengetahui perkara lain yang tersedia daripada auth. Sebagai contoh, anda mungkin menggunakan uid pengguna untuk memaparkan hanya dokumen 'dimiliki' oleh pengguna tersebut.

6. Rumusan

Jika anda mempunyai objektif yang mudah, pendekatan "mesra peraturan" yang diterangkan di sini, untuk semua kekurangannya, mungkin sesuai dengan keperluan anda. Svelte sisi pelanggan menyediakan taman permainan yang indah untuk membangunkan aplikasi peribadi dengan cepat dan tanpa rasa sakit. Tetapi sedar tentang kehilangan anda:

• pemuatan data yang cekap - kemungkinan terdapat kelewatan sebelum data dipaparkan pada skrin.
• pengesahan input selamat
• SEO terjamin

Jadi, jika anda mempunyai sasaran untuk kerjaya sebagai pembangun perisian yang serius, sila baca. Tetapi amaran, perkara menjadi lebih "menarik"!

Atas ialah kandungan terperinci NgSysV.A Serius Svelte InfoSys: Versi mesra Peraturan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!