与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的值来渲染不同的咖啡列表。

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

下载

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>

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

改进空间:

• 我不确定$bindable在切换组件中的作用，因为它似乎与page.svelte中的值重复。
• 我想改进数据获取和选项管理的方式。
• 我计划在未来的项目中改进布局和添加动画。

项目已部署在Netlify上，代码在GitHub上。 [Netlify链接] [GitHub链接] (请替换为实际链接)

希望这个分享对大家有所帮助！