基于Python的Flask框架制作动态网站-第三部分

最新推荐文章于 2023-06-04 19:04:32 发布

懂一点的陈老师

最新推荐文章于 2023-06-04 19:04:32 发布

阅读量516

点赞数

分类专栏： Python 文章标签： python flask 后端

本文链接：https://blog.csdn.net/linkedin_21843693/article/details/125524635

版权

Python 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

优化保存聊天信息

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

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)