与Sveltekit挑战Devchallengesio-js教程-PHP中文网

与Sveltekit挑战Devchallengesio

碧海醫心

发布： 2025-02-07 09:08:09

原创

297人浏览过

与sveltekit挑战devchallengesio

本文分享了我使用SvelteKit完成DevChallenges.io项目“简单咖啡列表”的经验。在此之前，我要感谢大家对之前文章的支持！这次，我尝试使用SvelteKit框架，因为它与我之前使用的PHP框架截然不同，并希望扩展我的JavaScript技能。

我选择DevChallenges.io是因为它提供了设计良好的项目，方便上手。这个单页面项目花了我几天时间，大部分时间都花在了Windows 10环境的配置和Svelte切换组件的构建上。Svelte的文档非常棒，极大地帮助了我。

设计方面，我需要一个卡片组件和一个切换组件（使用单选按钮实现）。为了默认选中第一个选项，我为绑定设置了初始状态。

page.svelte 代码片段:

<code class="svelte"><script>
    import Card from '$lib/components/card/card.svelte';
    import Toggle from '$lib/components/toggle/toggle.svelte';

    let { data } = $props; // 数据来自 +page.server.js
    let fullcatalog = Array.from(data.item); // 将对象转换为数组
    let filteredcatalog = fullcatalog.filter(coffee => coffee.id !== 5);

    const options = [
        { value: 'all-products', label: '所有产品' },
        { value: 'available-now', label: '现货' },
    ];

    let radiovalue = $state(options[0].value); // 默认单选按钮值
</script>

<Toggle bind:userchoice={radiovalue} {options}/>

<div class="cardgrid">
    {#if radiovalue === '' || radiovalue === 'all-products'}
        {#each fullcatalog as { id, name, image, popular, price, rating, votes }}
            <Card {id} {name} {image} {popular} {price} {rating} {votes} />
        {/each}
    {:else}
        {#each filteredcatalog as { id, name, image, popular, price, rating, votes }}
            <Card {id} {name} {image} {popular} {price} {rating} {votes} />
        {/each}
    {/if}
</div></code>

登录后复制

我从+page.server.js获取数据，并创建了两个数组：fullcatalog和filteredcatalog。我本想用skip或continue在循环中过滤数据，但发现Svelte的{#each}不支持这些关键字。

toggle.svelte 代码片段:

<code class="svelte"><script>
    let { options, userchoice = $bindable(options[0].value) } = $props;
    const slugify = (str = "") => str.toLowerCase().replace(/ /g, "-").replace(/\./g, "");
    const uniqueid = Math.floor(Math.random() * 100);
</script>

<div aria-labelledby={`label-${uniqueid}`} class="productfilterwrapper" role="radiogroup">
    {#each options as { value, label }}
        <label class="hidden-toggles__label" for={slugify(label)}>{label}</label>
        <input type="radio" bind:group={userchoice} value={value} id={slugify(label)} />
    {/each}
</div></code>

登录后复制

这里使用了bind:group来处理单选按钮组。虽然只有两个选项，但我保留了扩展性的设计。

在page.svelte中，根据radiovalue的值来渲染不同的咖啡列表。

CSS3星际大战战争机器动画特效

查看详情

Card.svelte 代码片段 (简化):

<code class="svelte"><script>
    let { coffeeId, coffeeName, coffeeImg, coffeePopular, coffeePrice, coffeeRating, coffeeVotes } = $props;
</script>

<div class="cardWrapper">
    @@##@@
    <p>{coffeeName}</p>
    <p>{coffeePrice}</p>
    <!-- ... rating and other details ... -->
</div></code>

登录后复制

卡片组件负责展示每个咖啡的信息。

改进空间: