node.js - 如何将 Svelte 页面与 Express 集成？

Question

所以我想在我的瘦页面中使用一个表单来发送带有 nodemailer 的电子邮件。我想将我的 svelte 表单与我的 contact.js 文件集成。我有一个模板 contact.js 文件，但它使用 express-handlebars 与 contact.handlebars 表单集成。因此，我没有使用 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 中的 slim 形式:

<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 和 svelte 的新手 :( 在此先感谢您!

Answer 1

您需要使用 svelte-view-engine 而不是 express-handlebars .然后，您应该能够将其用作快速 View 引擎:

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对于示例应用程序。