“Flask 和 JavaScript 密码生成器：无法在网页上显示生成的密码

问题描述 投票：0回答：1

所以我正在做一个项目来让我自己学习烧瓶。我编写了一个密码生成器，它根据用户的输入生成密码。我编写了一个函数，如何将用户输入发送到生成器，然后收集如何以 json 格式发送的响应。因此，当我单击“生成密码”按钮时，它应该打印出密码。为了查看密码是否生成并发送，我放置了一个 console.log(data.password) ，以便它在控制台中打印出来。

因此您可以看到密码已生成，但不知何故我无法将其打印在我的网页上。有人可以帮助我并告诉我问题是什么吗？

应用程序.py

from flask import Flask, render_template, request, send_from_directory, jsonify
import random
import string
from tkinter import filedialog
from tkinter import messagebox

app = Flask(__name__)

password_label = None

def generate_password(length, characters):
    password = ''.join(random.choices(characters, k=length))
    return password

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/generate', methods=['POST'])
def generate():
    
    try:
        length = int(request.form.get('length'))
        characters = request.form.get('characters')
        
        if characters == 'letters':
            characters = string.ascii_letters
        elif characters == 'letters_digits':
            characters = string.ascii_letters + string.digits
        elif characters == 'all':
            characters = string.ascii_letters + string.digits + string.punctuation
        
        password = generate_password(length, characters)
        
        return jsonify(password=password)
    except Exception as e:
        return jsonify(error=str(e))

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

这是我的“index.html”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Password Generator</title>
</head>
<body>
    <h1>Password Generator</h1>
    
    <form action="/generate" method="POST" id="password-form">
        <label for="length">Password Length:</label>
        <input type="number" id="length" name="length" required><br><br>
        
        <label for="characters">Character Set:</label>
        <select id="characters" name="characters">
            <option value="letters">Letters</option>
            <option value="letters_digits">Letters and Digits</option>
            <option value="all">All Characters</option>
        </select><br><br>
        
        <input type="button" value="Generate Password" onclick="generatePassword()">
        
    </form>
  
    <br>
    <br>
        
    <div>
        {% if password %}
        <h2>Your generated password:</h2>
        <p id="generated-password" type="text" value="..."> {{ password }}</p>
{% endif %}
        
    </div>


    <script>
        function generatePassword() {
            const length = document.getElementById('length').value;
            const characters = document.getElementById('characters').value;
            
            const form = document.getElementById('password-form');

            const formData = new FormData(form);
            formData.append('length', length);
            formData.append('characters', characters);

            
            fetch('/generate', {
            method: 'POST',
            body: formData

            })
            .then(response => response.json())
            .then(data => {
                console.log(data.password);  // Debugging
                document.getElementById('generated-password').innerText = data.password;


            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>

我的目标是打印出网页上的密码。

javascript python html flask web-applications
1个回答
0
投票

我不认为你正在将 

password
传递给你的 jinja 模板

{% if password %}
    <h2>Your generated password:</h2>
    <p id="generated-password" type="text" value="..."> {{ password }}</p>
{% endif %}

你应该像这样在这个 if 块中添加一个 else 块

{% if password %}
    <h2>Your generated password:</h2>
    <p id="generated-password" type="text" value="..."> {{ password }}</p>
{% else %}
    <!--create the fields empty if no password was generated-->
    <h2>Your generated password:</h2>
    <p id="generated-password" type="text" value="..."></p>
{% endif %}

或通过您的 render_template 函数传递生成的密码的值，如下所示

return render_template('index.html',password=generate_password(8,string.ascii_letters + string.digits + string.punctuation))

第二个解决方案生成默认值，尽管考虑到您希望用户首先填写表单，我想向您指出第一个方法

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.