如何创建点击可运行Python代码的按钮 实现无刷新生成密码

你当前用的PyScript本身支持浏览器端直接运行Python，无需请求后端、刷新页面就能实现交互效果，直接按以下步骤改造即可。

方案一：纯前端PyScript实现（适配你现有代码） #

不需要改动Flask的后端路由逻辑，只需要调整页面模板内容：

• 首先在页面添加两个基础元素：用于触发生成的按钮、用于展示密码的容器
• 把你写的密码生成逻辑封装为可重复调用的函数，通过PyScript提供的DOM接口把生成结果渲染到页面
• 用PyScript自带的py-click属性把按钮和生成函数绑定

页面代码示例 #

<!-- 密码展示位置 -->
<p>当前生成密码：<strong id="pwd-show"></strong></p>
<!-- 触发按钮，py-click直接绑定Python函数 -->
<button id="gen-btn" py-click="gen_pwd()">生成新密码</button>

<py-script>
from random import choice
from pyscript import document

# 注意不要用all做变量名，会覆盖Python内置方法
num = "0123456789"
lowercase = "abcdefghijklmnopqrstuvwxyz"
uppercase = lowercase.upper()
special = "!@#$%^&*()_+~`|}{[]:;?><,. /-="
all_chars = num + lowercase + uppercase + special

def gen_pwd():
    # 生成16位随机密码
    password = "".join(choice(all_chars) for _ in range(16))
    # 将密码写入页面指定位置
    document.getElementById("pwd-show").textContent = password
    # 如需控制台调试可保留print
    print(password)

# 页面首次加载时默认生成一个密码
gen_pwd()
</py-script>

方案二：Flask后端接口+异步请求实现（可选） #

如果你希望把密码生成逻辑放在后端，也可以通过接口+前端异步请求的方式实现无刷新效果：

1. 给Flask添加密码生成接口 #

from flask import Flask, render_template, jsonify
import random

app = Flask(__name__)

# 密码生成接口
@app.route("/api/get-pwd")
def api_get_pwd():
    num = "0123456789"
    lowercase = "abcdefghijklmnopqrstuvwxyz"
    uppercase = lowercase.upper()
    special = "!@#$%^&*()_+~`|}{[]:;?><,. /-="
    all_chars = num + lowercase + uppercase + special
    password = "".join(random.choice(all_chars) for _ in range(16))
    return jsonify({"code": 0, "data": password})

# 原页面路由
@app.route("/")
def index():
    return render_template("index.html")

2. 前端页面绑定点击事件 #

<p>当前生成密码：<strong id="pwd-show"></strong></p>
<button id="gen-btn">生成新密码</button>

<script>
const btn = document.getElementById("gen-btn")
const showArea = document.getElementById("pwd-show")

async function updatePwd() {
    const resp = await fetch("/api/get-pwd")
    const result = await resp.json()
    showArea.textContent = result.data
}

// 绑定点击事件
btn.addEventListener("click", updatePwd)
// 页面加载默认生成一个密码
window.addEventListener("load", updatePwd)
</script>

两种方案都能实现点击无刷新生成密码的效果：第一种完全在用户浏览器运行，不占用后端资源，适配你当前已写的PyScript代码，改造成本最低；第二种逻辑放在服务端，适合后续需要添加密码存储、自定义规则校验等扩展场景。

内容的提问来源于stack exchange，提问作者Eleanor Worthington