flask 的 render_template 页面刷新的问题?

我用一个页面显示一个文件夹下面的所有文件, 页面上有上传和删除的方法, 上传的方法 ok, 主要就是提交之后, 使用 redirect, 这个时候新上传的文件会直接显示出来, return redirect(url_for('show_user_file', username=session['cur_username']))

但是问题出现在删除的时候, 使用的代码依然是, return redirect(url_for('show_user_file', username=session['cur_username'])) 但是这个时候文件不会减少, 就是虽然删除了, 文件还是显示在页面上.

我调试了一下, show_user_filereturn render_template('listfile.html', files=file_dict, used_space = used_space) 的参数里面, file_dict 是存储当前文件夹里面的文件的参数, 这个 file_dict 的内容是 ok 的, 也就是说这里面已经没有了那个被删除的文件, 但是页面上还有, 只有刷新一下这个删除的文件才会删除掉。

开始想在页面的里面直接用 JavaScript 删除掉这个文件, 但是也可能出现服务端删除失败的情况, 所以不想用这个方法。

请问这个问题如何解决, 删除文件后为什么 render 之后的页面没有更新?

我开始猜测是 post 之后更新页面, 但是不是修改了之后还是没有变请问是怎么回事?

删除:

@app.route('/delfile', methods=['GET', 'POST'])
def delfile():
    print('in delfile')
    if request.method == 'GET':
        filename = re.sub("_btn$", "", request.args.get('filename'))
        file_path = os.path.join(session['cur_username'], filename)
        if os.path.exists(file_path):
           os.remove(file_path)

    return redirect(url_for('show_user_file', username=session['cur_username']))

上传

@app.route('/upload/<username>', methods=['GET', 'POST'])
def show_user_file(username):
    file_path = username
    if not os.path.exists(file_path):
        os.makedirs(file_path)

    BASE_DIR = '.'
    req_path = username

    # Joining the base and the requested path
    abs_path = os.path.join(BASE_DIR, req_path)

    # Return 404 if path doesn't exist
    if not os.path.exists(abs_path):
        return abort(404)

    # Check if path is a file and serve
    if os.path.isfile(abs_path):
        return send_file(abs_path)

    if request.method == 'POST':
        file = request.files['file']
        if file:
            # filename = secure_filename(file.filename)
            filename = file.filename
            file.save(os.path.join(file_path, filename))
            return redirect(url_for('show_user_file', username=session['cur_username']))
    files = os.listdir(abs_path)
    file_dict={}
    for i in files:
        file_dict[i] = os.path.join(abs_path, i)

    used_space = get_size(abs_path)

    return render_template('listfile.html', files=file_dict, used_space = used_space)

show_user_file:

# Show User Folder 
@app.route('/upload/<username>', methods=['GET', 'POST'])
def show_user_file(username):
    file_path = username
    if not os.path.exists(file_path):
        os.makedirs(file_path)

    BASE_DIR = '.'
    req_path = username

    # Joining the base and the requested path
    abs_path = os.path.join(BASE_DIR, req_path)

    # Return 404 if path doesn't exist
    if not os.path.exists(abs_path):
        return abort(404)

    # Check if path is a file and serve
    if os.path.isfile(abs_path):
        return send_file(abs_path)

    if request.method == 'POST':
        file = request.files['file']
        if file:
            # filename = secure_filename(file.filename)
            filename = file.filename
            file.save(os.path.join(file_path, filename))
            return redirect(url_for('show_user_file', username=session['cur_username']))
    files = os.listdir(abs_path)
    file_dict={}
    for i in files:
        file_dict[i] = os.path.join(abs_path, i)

    used_space = get_size(abs_path)

    return render_template('listfile.html', files=file_dict, used_space = used_space)

woshichuanqilz

2018-03-15 10:46:17 +08:00

@justinwu 非常感谢详尽的回答, 十分感谢, 受益匪浅。

1. delfile 中的 post 已经修改
2. 函数名和 url 的匹配已经修改

```
#del file
@app.route('/delfile', methods=['GET', 'POST'])
def delfile():
print('in delfile')
if 'logged_in' not in session or not session['logged_in']:
return '用户未登录或者访问权限不够'

if request.method == 'POST':
# filename = re.sub("_btn$", "", request.args.get('filename'))
filename = re.sub("_btn$", "", request.form['filename'])
file_path = os.path.join(session['cur_username'], filename)
if os.path.exists(file_path):
os.remove(file_path)

file_dict, used_space = get_file_info(session['cur_username'])
return render_template('listfile.html', files=file_dict, used_space = used_space)

```

```
@app.route('/show_user_file', methods=['GET', 'POST'])
def show_user_file():

if 'logged_in' not in session or not session['logged_in']:
return '用户未登录或者访问权限不够'

file_path = session['cur_username']
username = session['cur_username']
if not os.path.exists(file_path):
os.makedirs(file_path)

if request.method == 'POST':
file = request.files['file']
if file:
# filename = secure_filename(file.filename)
filename = file.filename
file.save(os.path.join(file_path, filename))
return redirect(url_for('show_user_file'))

file_dict, used_space = get_file_info(username)
return render_template('listfile.html', files=file_dict, used_space = used_space)

```

```
def get_file_info(username):
BASE_DIR = '.'
req_path = username
file_path = username

# Joining the base and the requested path
abs_path = os.path.join(BASE_DIR, req_path)

# Return 404 if path doesn't exist
if not os.path.exists(abs_path):
return abort(404)

# Check if path is a file and serve
if os.path.isfile(abs_path):
return send_file(abs_path)

files = os.listdir(abs_path)
file_dict={}
for i in files:
file_dict[i] = os.path.join(abs_path, i)

used_space = get_size(abs_path)
return file_dict, used_space

```

![20180315100643]( http://7xpvdr.com1.z0.glb.clouddn.com/680c2fc1-aab5-4f11-bb3b-28b772d229cb0315100557.png)

这个是我的实操的效果图, 点击删除按钮, file_dict 已经变成空了, 但是 render_template 的网页没有刷新

![20180315104614]( http://7xpvdr.com1.z0.glb.clouddn.com/ea205440-58b0-4024-80d3-990ca41057ce0315104524.png)

woshichuanqilz

2018-03-15 14:21:47 +08:00

@justinwu
1. 确定是请求了, 不然页面的源代码不会变化,
2. 换了火狐浏览器没有区别
3. chrome network 显示这个页面被请求过了 ![20180315141828]( http://7xpvdr.com1.z0.glb.clouddn.com/f3243b26-fa88-4962-a349-82c143fe23e70315141755.png)

4. 没明白那个 redirect 加参数是什么意思。
5. 用了 fiddler 确实很强大, 这里面是正常的删除文件后的页面已经返回了
![20180315142044]( http://7xpvdr.com1.z0.glb.clouddn.com/b5b3ed71-7759-4913-8567-8f641b426b0b0315141925.png)

现在的问题是网页的源码都变了, 但是页面没有刷新。

我在 listfile 里面删除按钮绑定的是这个函数, 不知道处理有没有问题。

```
<script>
function sendfilename() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/delfile", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("filename=" + event.target.id);
}
</script>

```

justinwu

2018-03-15 14:45:47 +08:00

@woshichuanqilz 你那个 sendfilename 的函数不对吧，只是发送请求，但是没有处理响应，没有让当前页面 refresh 或是 update 啊。

给一段我珍藏多年的表单 POST 代码，立马解决问题：
<script>
function post(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.

// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);

for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);

form.appendChild(hiddenField);
}
}

document.body.appendChild(form);
form.submit();
}

//按钮 call 这个函数，跟据你上面的代码来的：
function deleteFile(filename)
{
post("/delfile", { filename: filename });
}
</script>