Svelte 如何与 Express . Js 等后端框架集成？

Svelte是一个前端JavaScript框架，主要用于构建用户界面。而Express.js则是一个运行在Node.js上的后端框架，常用于构建API和Web应用程序的服务器端逻辑。将Svelte与Express.js集成可以为用户提供一个完整的前后端解决方案。以下是集成Svelte与Express.js的一般步骤和一些关键考虑：

1. 初始化项目

首先，我们需要建立一个新的项目并同时安装Svelte和Express.js的依赖。

bash
mkdir my-app && cd my-app
npm init -y
npm install express
npx degit sveltejs/template svelte-app
cd svelte-app
npm install

这里我们创建了一个包含Express和Svelte的基础项目结构。

2. 设置Express服务器

在项目的根目录下创建一个名为 server.js 的文件，用于配置和启动Express服务器。

javascript
const express = require('express');
const path = require('path');
const app = express();

const PORT = process.env.PORT || 3000;

app.use(express.static('svelte-app/public'));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'svelte-app', 'public', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

这段代码设置了一个简单的Express服务器，它将所有请求重定向到Svelte应用的入口点。

3. 构建Svelte应用

在Svelte应用目录中，你需要配置好构建脚本，以确保构建的输出（通常是静态文件）可以被Express服务器正确地托管。

bash
cd svelte-app
npm run build

确保Svelte的构建输出目录与Express中配置的静态文件目录相对应。

4. 运行应用

一切就绪后，只需返回到项目根目录，并启动Express服务器：

bash
cd ..
node server.js

现在，你的Svelte前端已经能通过Express后端成功访问，并在浏览器中显示。

例子：API调用

假设你需要从Svelte前端向Express后端发送API请求。你可以在Express中添加一个API端点：

javascript
app.get('/api/data', (req, res) => {
    res.json({ message: "Hello from the backend!" });
});

然后，在Svelte组件中，你可以使用fetch来调用这个API并获取数据：

javascript
// 在Svelte组件中
<script>
  let message = '';

  async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    message = data.message;
  }

  fetchData();
</script>

<h1>{message}</h1>

这样，当Svelte应用加载时，它会显示来自Express服务器的消息。

通过以上步骤和示例，你可以看到Svelte和Express.js的集成是直接且高效的，能够为开发现代Web应用提供强大的前后端协作。