当前位置: 首页>前端>正文

python html动态表格 python制作动态网页

优化保存聊天信息

使用字典保存聊天信息,更方便后面的信息的整理和显示

def add_messages(username, message):
    # 添加消息,保存在列表里面
    now = datetime.now().strftime("%H:%M:%S") # 记录时间:格式:00:00:00
    messages_dict = {"timestamp": now, "from": username, "message": message} # 之前是字符串,现在换成字典保存
    messages.append(messages_dict)

制作聊天信息展示页面

template文件夹中chat.html文件,内容如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ username }}的聊天室</title>
</head>
<body>
    <h1>欢迎, {{ username }}</h1>
    {{ chat_messages }}
    
</body>
</html>

这里{{ username }}{{ chat_messages }}可以通过render_template函数传递参数,形式动态页面。

@app.route("/<username>")
def user(username):
    """Display chat messages"""
    return render_template("chat.html", username=username,
                           chat_messages=messages)

完整代码

from datetime import datetime
from flask import Flask, redirect, render_template, request, session


app = Flask(__name__)
app.secret_key = "randomstring12345"  # 大家可以不一样的,用于生成随机ID的随机种子,类似random的seed
messages = []


def add_messages(username, message):
    # 添加消息,保存在列表里面
    now = datetime.now().strftime("%H:%M:%S") # 记录时间:格式:00:00:00
    messages_dict = {"timestamp": now, "from": username, "message": message} # 之前是字符串,现在换成字典保存
    messages.append(messages_dict)

def get_all_messages():
    """获取关于我的所有聊天信息`"""
    return "<br>".join(messages)



@app.route("/", methods=["GET", "POST"])  # 允许的方法有POST和GET,其他不写methods默认就是GET
def index():
    """主页"""
    if request.method == "POST":
        # 如果是POST请求,进入这里,在请求中把username放到session里面
        session["username"] = request.form["username"]

    if "username" in session:
        # 如果session中有username这个键值,就转跳到对应的用户页面
        return redirect(session["username"])
    
    # 如果没有,就展示首页网页。
    return render_template("index2.html")

# @app.route("/tiger")
# def hu():
#     return render_template("tiger.html")

@app.route("/<username>")
def user(username):
    """Display chat messages"""
    return render_template("chat.html", username=username,
                           chat_messages=messages)


@app.route("/<username>/<message>")
def send_message(username, message):
    """
    通过路由设置:/人名称/信息内容 来实现发送信息给某人
    添加信息到列表里面,然后返回到用户页面
    """
    add_messages(username, message)
    return redirect("/" + username)

app.run(host="0.0.0.0") # 启动服务器

优化信息显示

上面的聊天信息显示是直接把字典打印出来,如下

[{'timestamp': '23:48:35', 'from': '李娜', 'message': '大家好'}]

可以说很丑,我们需要通过html优化。 当我们打开聊天页面,其他人再发新消息来的时候,我们的页面是没有马上更新内容的,需要手动刷新页面才能接受新的消息,因此我们也要增加一个自动刷新功能。 因此新的chat2.html改进如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ username }}的聊天室</title>
</head>
<body>
    <h1>欢迎, {{ username }}</h1>
    
    {% for message in chat_messages %}
        <p>({{ message.timestamp }}) {{ message.from }}: {{ message.message }}</p>
    {% endfor %}
    
    <script>
        let timer=setTimeout(function() {
            location.reload()
        }, 5000)
    </script>
    
</body>
</html>

修改代码

把返回的文件改成新的chat2.html,然后查看效果。

@app.route("/<username>")
def user(username):
    """Display chat messages"""
    return render_template("chat2.html", username=username,
                           chat_messages=messages)

输入信息非常困难

我们需要优化信息输入,因此要做一个信息输入框,用于提交新的聊天内容。具体内容如chat3.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ username }}的聊天室</title>
</head>
<body>
    <h1>欢迎, {{ username }}</h1>
    
    <form method = "POST">
        <textarea cols="50" rows="4" name="message" id="message"></textarea>
        <br>
        <button>发送</button>
    </form>
    
    {% for message in chat_messages %}
        <p>({{ message.timestamp }}) {{ message.from }}: {{ message.message }}</p>
    {% endfor %}
    
    <script>
        let textbox = document.getElementById("message")
    
        let timer = setTimeout(function() {
            location.reload();
        }, 5000)
        
        textbox.onkeydown = function(e) {
            
            clearTimeout(timer)
            
            timer = setTimeout(function() {
                location.reload();
            }, 5000)
            
        }
        
    </script>
    
</body>
</html>

然后对应的路由功能也要增加POST方法。

@app.route("/<username>", methods=["GET", "POST"])
def user(username):
    """Display chat messages"""
    if request.method == "POST":
        username = session["username"]
        message = request.form["message"]
        add_messages(username, message)
        return redirect(session["username"])

    return render_template("chat3.html", username=username,
                           chat_messages=messages)



https://www.xamrdz.com/web/2kh1964282.html

相关文章: