如何在 Sveltekit 中从客户端传递参数到服务器端代码？

Question

我一直在尝试向 Supabase 数据库运行一个查询，需要传递一种狗的品种，并返回有关它的指标，该品种在客户端定义。我能够让服务器端查询运行，但是值没有传递过去。

+page.svelte

export let metrics;
  export let data;

  const getAllDogs = async () => {
    const { metrics: data } = load({ dog: dog_val });
    metrics = data;
  };
  
  onMount(async () => {
    getAllDogs();
  })


+page.server.js

import supabase from "../../lib/db";

//Method to get all dog breeds
export const load = async ({dog}) => {
  const getAllMetrics = async () => {
    try {
      let { data, error } = await supabase
        .from("dogs")
        .select(
          "avg_size, avg_obedience, avg_compassion, avg_health, avg_cleanliness, avg_energy"
        )
        .eq("Breed", dog);
      console.log(data)
      console.log(dog)
      return data;
    } catch (e) {
      console.error(e);
    }
  };
  return {
    metrics: getAllMetrics(dog)
  }
};

- BeratK2

---

这不是它的工作方式，你不能随意编造 load 参数，也不能明确调用该函数。请阅读有关加载数据的文档。 - H.B.

Answer 1

我知道的最简单的方法是在src->api->dogs->+server.js下创建一个api。在API中调用数据库，然后在客户端中，您可以编写一个函数来调用API并返回数据。这样，如果您不想刷新页面，您也可以使用下拉菜单或类似的方式更新数据。

我已经在onload上设置了这个，但通常情况下，您可能会使用按钮、下拉菜单或其他一些方式来设置品种（breed）参数。如果您正在从路由中的URL发送品种，则可以从URL中获取它；如果您要在导航到此页面之前设置它，可以使用存储（store）来设置该值，并在此页面加载时从存储中获取该值。

这只是使用onmount的示例，您可以自行决定在发起fetch调用之前如何设置参数。

+page.svelte
  //set empty array for dogs if getting array
  let dogs = []
  //set param somehow for breedToSearch
  let breedToSearch = "lab"

  async function getAllDogs {

       const response =  await fetch('/api/dogs?dog=${breedToSearch}', {
                method: 'GET',
            });
        let newData = await response.json();
        dogs = newData.message;

  
  onMount(async () => {
    getAllDogs();
  })


}

+server.js (in the src-api-dogs directory)
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
//get the dog param sent in the fetch call
const dog = url.searchParams.get('dog')

const dogsFromDB = -----call to database----

return new Response(JSON.stringify({ message: dogsFromDB }), { status: 200 })
}

- Avi4nFLu