如何将 Svelte 页面与 Express 集成？

Question

所以我想在我的 svelte 页面中使用一个表单来使用 nodemailer 发送电子邮件。我想将我的 svelte 表单与我的 contact.js 文件整合。我有一个模板 contact.js 文件，但它使用 express-handlebars 与 contact.handlebars 表单集成。因此，我在这里使用的不是车把，而是 svelte。我该如何整合它们？？

contact.js 模板：

const bodyParser = require('body-parser');
const exphbs = require('express-handlebars');
const mailer = require('nodemailer');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/contact', (req, res) => {
    res.render('contact');
});

contact.svelte内部的苗条形式：

<CourseWrapper {user}>
    <main>
        <h2>Contact Us</h2>
        <p>Send us a message about your questions or suggestions of any kind.</p>
        <ShadowedCard>
            <form on:submit|preventDefault={submit}>
                <InputGeneric label="Name" bind:value={name} placeholder="Enter your name" />
                <InputGeneric
                    label="Email"
                    type="email"
                    bind:value={email}
                    placeholder="Enter your email" />
                <InputGeneric label="Subject" bind:value={subject} placeholder="Enter your email subject" />
                <InputGeneric label="Feedback" type={null}>
                    <textarea bind:value={message} placeholder="Enter your message" />
                </InputGeneric>
                {#if state === 'loading'}
                    <Loader.ThreeWavyBalls />
                {:else}
                    <Button type="submit" color>Send</Button>
                {/if}
            </form>
        </ShadowedCard>
    </main>
</CourseWrapper>

我是 node.js 的新手，我很苗条 :( 提前谢谢你！

Answer 1

您需要使用 svelte-view-engine 而不是 express-handlebars。然后您应该能够将它用作快速视图引擎：

const bodyParser = require('body-parser');
const svelteViewEngine = require("svelte-view-engine");
const mailer = require('nodemailer');

const app = express();

let engine = svelteViewEngine({
    env: "dev",
    template: "./template.html",
    dir: "./pages",
    type: "html",
    buildDir: "../artifacts/pages",
});
 
app.engine(engine.type, engine.render);
app.set("view engine", engine.type);
app.set("views", engine.dir);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/contact', (req, res) => {
    // pass user object to template
    res.render('contact', { user: //tbd });
});

有关示例应用，请参阅 https://github.com/svelte-view-engine/sve-app。

如何将 Svelte 页面与 Express 集成？

How to integrate a Svelte page with Express?

backend

node.js

express

web

svelte