怎么用vue和python后端交互显示操作日志

您可以使用Vue.js和Python Flask框架来实现前后端交互。您需要使用Vue.js的Axios库来发送HTTP请求到Python Flask后端，并使用Flask的路由来处理这些请求。在Flask中，您可以使用Python的logging模块来记录操作日志，并将这些日志返回给Vue.js前端。以下是一个简单的示例代码：

Vue.js前端代码：

<template>
  <div>
    <button @click="getLogs">获取操作日志</button>
    <ul>
      <li v-for="log in logs" :key="log.id">{{ log.message }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      logs: [],
    };
  },
  methods: {
    async getLogs() {
      const response = await axios.get('/logs');
      this.logs = response.data.logs;
    },
  },
};
</script>

Python Flask后端代码：

from flask import Flask, jsonify
import logging

app = Flask(__name__)

# 设置日志记录器
logger = logging.getLogger(__name__)
logger.setLevel(logging.INFO)
handler = logging.FileHandler('logs.log')
handler.setLevel(logging.INFO)
formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(message)s')
handler.setFormatter(formatter)
logger.addHandler(handler)

# 路由处理函数
@app.route('/logs')
def get_logs():
    logs = []
    with open('logs.log', 'r') as f:
        for line in f:
            logs.append({'id': len(logs) + 1, 'message': line.strip()})
    return jsonify({'logs': logs})

if __name__ == '__main__':
    app.run()

在这个示例中，我们使用了Vue.js的Axios库来发送GET请求到Flask后端的/logs路由。在Flask中，我们使用Python的logging模块来记录操作日志，并将这些日志返回给Vue.js前端。注意，我们在Flask中设置了一个FileHandler来将日志记录到文件中。您可以根据需要更改日志记录器的设置。