关于comfyui的token顺序打乱（三）

继续记录，上次写完后端，前端就很简单了

下载免费网页模板

随便网上找一个模板，我找了个登录界面，反正我只需要三个数据，登录刚好有表单可以提交

开始改造前端文件

1.文件目录问题

上一篇讲过了，flask文件一定要放好，有static（资源）和templates（网页）

static里面放图片啊，js，css样式之类，templates里面放网页html，后端放外面（app.py）

至于那几个index11.html，test.py只是我测试写的东西，不用管，直接删了就行

2.修改html的表单

html 复制代码

 <div class="workinghny-form-grid">
     <div class="main-hotair">
         <div class="content-wthree">
               <h1>标签打乱</h1>
               <form action="/run" method="post" onsubmit="return checkSeparator()">
                   <input type="text" class="text" name="root_folder" placeholder="文件夹路径" required="" autofocus>
                   <input type="number" class="text" name="keep_first_n" placeholder="前N个标签不打乱" required="" autofocus>
                    <input type="text" id="separatorInput" class="password" name="tag_separator" placeholder="标签分隔符" required="" autofocus>
                    <button class="btn" type="submit">打乱</button>
                </form>
          </div>

就是中间那个登录的输入，主要改几个地方

修改改表单的行为，提交方式 ，触发函数

action="/run" method="post" οnsubmit="return checkSeparator()"

这个要与后端对应，是不是看着很熟，我对应一下后端代码

至于onsubmit后面讲，是用来校验正则的

修改三个输入框的name，用来获取相应的值

对应后端的代码，所以名字一定得一摸一样

2.修改所有js，css的链接方式

一般html是直接用相对路径过去的，但是flask框架的规定不能这样，只能用这种写法

{{ url_for('static', filename='css/style.css') }}

按照格式修改就行

3.正则校验函数

html 复制代码

function checkSeparator() {
            // 1. 获取并去除首尾空格
            const separator = document.getElementById("separatorInput").value.trim();

            // 2. 核心正则：仅允许常见符号（,!@#$%^&*()_+-=[]{}|;:'",.<>/?`~）
            const symbolReg = /^[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]+$/;

            // 3. 正则不匹配 → 拦截提交
            if (!symbolReg.test(separator)) {
                alert("仅允许输入符号（如, | ; : . 等）！禁止输入字母、数字、空值");
                return false;
            }

            // 校验通过 → 允许提交
            return true;
        }

跟后端的差不多，不详细讲了，就是通过返回true，表单就可以提交，不然就提交不了

讲点区别，html的正则表达式使用//包裹的，所以里面'和"不用转义

html的正则匹配函数是test()

这个东西我就直接放网页的<script>标签了，懒得放js文件了

4.显示后端的消息message

html 复制代码

 <!-- 显示后端返回的结果（成功/失败提示） -->
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                {% for msg in messages %}
                <div class="msg_show">{{ msg }}</div>
                {% endfor %}
                {% endif %}
                {% endwith %}

使用的是jinja2语法，虽然我也不太懂，只知道大概原理

**{%%} ：**用这个包裹住，就可以直接写逻辑标签，不会被识别成html

with ：定义变量

for msg in messages：使用for循环，防止后端传回了多个消息

endif、endfor ：这个是jinja2的结束语法，例如if到endif就代表结束了if

修改完成，启动后端

按照这样写之后，就可以直接启动后端文件，然后体验效果，前端我嫌弃那个背景的视频，于是自己生成了一张图片做背景图

打包成exe

想着方便别人使用，或者自己在别的电脑没有安装python之类的时候可以直接用

1.安装pyinstaller第三方库

pip install pyinstaller

2.确定项目文件目录

你的项目文件夹/

├── app.py （你的修正后主程序文件，若文件名不是app.py请替换为实际名称）

├── static/ （静态资源：css、js、images/mp4）

└── templates/ （HTML模板文件，如index.html）

3.生成.spec配置文件

在项目根目录下打开cmd，输入命令

复制代码

# 替换app.py为你的主程序名
pyi-makespec -w -F app.py

这里参数的话，看下表

参数	作用
`-w`	隐藏运行时的命令行黑窗口（Flask 服务后台运行，如需看日志可去掉该参数）
`-F`	打包成单个独立的 EXE 文件（方便传输，启动稍慢，也可去掉用文件夹形式）

执行了命令之后，就会在根目录下生成spec文件

4.给配置文件的datas = 【】里面添加目录

html 复制代码

datas=[
        ("static", "static"),  # 本地静态资源目录 → 打包后对应目录
        ("templates", "templates")  # 本地模板目录 → 打包后对应目录
    ],

5.打包

在根目录的cmd执行，记得打包之前一定得把后端代码的开发者模式关掉，改成debug=false

不关掉容易暴露代码那些，什么不安全啊，这个不重要，重要的是据说会报错，所以还是关掉好了

html 复制代码

# 替换app.spec为你的.spec文件名（与主程序同名）
pyinstaller app.spec

之后就会生成exe在dist文件夹里，搞定

我顺便发到了git上面，有需要的自取....

https://github.com/yywd66/yy_comfyui_tokenShuffle