创建一个带有函数的 svelte 组件 post 接收数据

Question

我需要暴露一个通过post方法接收数据的.svelte组件，以便外部服务可以使用它，并且接收到的数据可以显示为received

// test.svelte

<script>

let name="";
let age="";
let gender ="";

export async function post({request}){
       const body = await request.json();
       console.log(body);
       name = body.name;
       age = body.age;
       gender = body.gender;
       return {
             body:JSON.stringify({body})
       } 
    });

</script>
<form>
    <div>
       <p>{name} {age} {gender}</p>
    </div>
</form>

Check this picture maybe understand better

Answer 1

*.svelte 文件不直接处理 POST 请求。

您编写的代码在 Svelte 组件的 <script> 标记内不起作用。 Post 数据在前端不可用。

但是，如果您使用的是 up-to-date SvelteKit 并且托管的是 non-static 版本。
（以@sveltejs/adapter-node为例）

您可以使用 Shadow Endpoint 功能：

<!-- src/routes/test.svelte -->
<script>
export let name;
</script>

<h1>{name}</h1>

// src/routes/test.js
export async function post({ request }) {
  const data = await request.json();
  return {
    body: {
      name: data.name
    } 
  }
};

当您创建具有相同文件名的端点时，post 请求由端点（后端）处理，如果请求包含 Accept: text/html 或 Accept: */* header 服务器将使用 body 中的值作为属性来响应 SSR 页面。

创建一个带有函数的 svelte 组件 post 接收数据

Create a svelte component with a function recive a data by post

post

components

call

svelte