这是一个基本的Vue前端与Flask后端心跳检测代码示例。在此示例中，Vue前端每隔5秒钟向Flask后端发送一个请求，以检查后端是否在线。如果后端在线，将在前端显示在线状态；如果不在线，将显示离线状态。
Flask后端代码（app.py）:
from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/heartbeat', methods=['GET'])
def heartbeat():
return jsonify(status='online')
if __name__ == '__main__':
app.run(debug=True)
在这里，我们创建了一个基本的Flask应用程序，并启用了CORS（跨源资源共享），以便允许来自不同源的请求。我们定义了一个名为heartbeat的路由，它只是返回一个简单的JSON响应，表示后端在线。
Vue前端代码:
创建一个新的Vue项目（如果没有的话），然后在src/components目录下创建一个名为Heartbeat.vue的组件：
<!-- src/components/Heartbeat.vue -->
<template>
<div>
<h1>Flask Backend Status: {{ status }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
status: 'offline',
};
},
mounted() {
this.checkHeartbeat();
},
methods: {
async checkHeartbeat() {
setInterval(async () => {
try {
const response = await axios.get('http://localhost:5000/heartbeat');
this.status = response.data.status;
} catch (error) {
this.status = 'offline';
}
}, 5000);
},
},
};
</script>
在这里，我们创建了一个名为Heartbeat的Vue组件，它会显示后端的在线状态。在mounted生命周期钩子中，我们调用checkHeartbeat方法，该方法使用setInterval每隔5秒钟向后端发送一个请求。如果请求成功，我们将在线状态设置为从后端返回的状态；如果请求失败，我们将状态设置为离线。
接下来，在src/App.vue中导入并使用Heartbeat组件：
<!-- src/App.vue -->
<template>
<div id="app">
<Heartbeat />
</div>
</template>
<script>
import Heartbeat from './components/Heartbeat.vue';
export default {
components: {
Heartbeat,
},
};
</script>
现在，运行Flask后端和Vue前端，您应该能够在Vue应用程序中看到后端的在线状态。
