用vue和flisk完成：获取服务器的目录显示在前段页面上，用选择器可以选择获取的结果

要使用Vue和Flask获取服务器目录并在前端页面上显示，并使用选择器选择结果，您可以按照以下步骤操作：

1. 在服务器端使用Flask创建一个路由，用于获取服务器目录的文件列表。在您的Flask应用程序中，可以使用`os`模块来获取目录中的文件列表。以下是一个示例：

from flask import Flask, jsonify
import os

app = Flask(__name__)

@app.route('/get_directory')
def get_directory():
    directory_path = '/path/to/your/directory'
    file_names = os.listdir(directory_path)
    return jsonify(file_names)

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

在上面的示例中，`/get_directory` 路由将返回目录中的文件列表。

2. 在Vue应用程序中，使用axios或其他HTTP库来发送GET请求并获取服务器上的文件列表。确保您的Vue应用程序与Flask应用程序运行在不同的端口上。以下是一个示例：

<template>
  <div>
    <select v-model="selectedFile">
      <option v-for="file in files" :key="file">{{ file }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: [],
      selectedFile: ''
    };
  },
  mounted() {
    this.getDirectory();
  },
  methods: {
    getDirectory() {
      axios.get('http://localhost:5000/get_directory')
        .then(response => {
          this.files = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

在上面的示例中，我们在Vue组件中使用了一个下拉选择器，将获取的文件列表作为选项进行渲染。在`mounted`钩子函数中调用`getDirectory`方法，该方法使用axios发送GET请求到Flask路由获取文件列表。通过`v-model`指令绑定选择器的值到`selectedFile`，您可以在Vue组件中使用`selectedFile`来获取用户选择的文件名。

确保将`http://localhost:5000/get_directory` 替换为您Flask应用程序的实际URL。运行Vue应用程序后，您将能够从服务器获取目录并在前端页面上显示文件列表，并且可以通过选择器选择结果。