我将其分为两条路线，以使您更轻松地了解所要做的事情：
LEFT, RIGHT, UP, DOWN, RESET = "left", "right", "up", "down", "reset"AVAILABLE_COMMANDS = { 'Left': LEFT, 'Right': RIGHT, 'Up': UP, 'Down': DOWN, 'Reset': RESET}@app.route('/')def execute(): return render_template('main.html', commands=AVAILABLE_COMMANDS)@app.route('/<cmd>')def command(cmd=None): if cmd == RESET: camera_command = "X" response = "Resetting ..." else: camera_command = cmd[0].upper() response = "Moving {}".format(cmd.capitalize()) # ser.write(camera_command) return response, 200, {'Content-Type': 'text/plain'}然后，在模板中，您只需要使用一些Javascript发送请求即可：
{# in main.html #}{% for label, command in commands.items() %} <button value="{{ command }}"> {{ label }} </button>{% endfor %}{# and then elsewhere #}<script>// only run what comes next *after* the page has loadedaddEventListener("DOMContentLoaded", function() { // Grab all of the elements with a class of command // (which all of the buttons we just created have) var commandButtons = document.querySelectorAll(".command"); for (var i=0, l=commandButtons.length; i<l; i++) { var button = commandButtons[i]; // For each button, listen for the "click" event button.addEventListener("click", function(e) { // When a click happens, stop the button // from submitting our form (if we have one) e.preventDefault(); var clickedButton = e.target; var command = clickedButton.value; // Now we need to send the data to our server // without reloading the page - this is the domain of // AJAX (Asynchronous Javascript And XML) // We will create a new request object // and set up a handler for the response var request = new XMLHttpRequest(); request.onload = function() { // We could do more interesting things with the response // or, we could ignore it entirely alert(request.responseText); }; // We point the request at the appropriate command request.open("GET", "/" + command, true); // and then we send it off request.send(); }); }}, true);</script>
