我刚开始学习vuejs,如何在单页中将vuejs的输出返回到flask?

z9smfwbn  于 2023-04-07  发布在  Vue.js
关注(0)|答案(1)|浏览(132)

我只是在测试vuejs教程与flask与单页。我使用vuejs cdn在app.py

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>{{ message }}</h1>

JavaScript

<script setup>
    import { ref } from 'vue'
    const message = ref('Hello World!')
    console.log(message.value) // "Hello World!"
    message.value = 'Changed'
</script>
liwlm1x9

liwlm1x91#

要发送一些东西到后端,你需要一个HTML表单或 AJAX Post请求。
查看教程:

下面是一个使用fetch的简单POST请求的示例,其中包含一个JSON主体

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Vue 3 POST Request Example' })
};
fetch('https://testapi.jasonwatmore.com/products', requestOptions)
    .then(response => response.json())
    .then(data => product.value = data);

Flask HTML表单示例

<form method="post">
    <label for="title">Title</label>
    <br>
    <input type="text" name="title"
           placeholder="Message title"
           value="{{ request.form['title'] }}"></input>
    <br>

    <label for="content">Message Content</label>
    <br>
    <textarea name="content"
              placeholder="Message content"
              rows="15"
              cols="60"
              >{{ request.form['content'] }}</textarea>
    <br>
    <button type="submit">Submit</button>
</form>

相关问题