我刚开始学英语.如何返回输出从vuejs烧瓶在单页?

Question

我只是用flask测试vuejs教程，只有一个页面。我在app.py

中使用了vejs CDN

<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>

Answer 1

要发送一些东西到后端，您将需要一个HTML表单或AJAX Post请求。

查看教程:

• Vue 3 - HTTP POST请求示例
• 如何在Flask应用程序中使用Web表单

下面是一个使用fetch

的JSON主体的简单POST请求示例

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示例

<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>