本文还有配套的精品资源点击获取简介用Python和Flask搭的本地可运行网页聊天工具开箱即用。支持用户注册登录每个用户有独立数据库文件如Alice.db、Bob.db群聊数据存在Group_1.db、groups.db等文件里所有用户信息统一存users.db。前端页面齐全register.html负责注册index.html是登录入口chat.html承载聊天主界面带头像显示、消息气泡、时间戳和实时渲染逻辑样式用chat_style.css实现响应式布局交互靠chat_javascript.js配合jQuery完成还内置了重复登录提示页repeat_login.html和注册成功页register_success.html。静态资源包括jquery-3.6.0.min.js、默认头像avatar.jfif。后端main.py是启动入口DBdebug.py辅助查数据库requirements.txt列明依赖README.md写清部署步骤。装好Flask后直接python main.py就能跑起来不用配服务器、不依赖云服务适合学生做课程设计、期末项目或刚学Web开发的人练手。1. 项目概述为什么这个Flask聊天系统值得你花30分钟跑起来我带过六届Python Web课程设计每年都有学生卡在“不知道从哪开始做一个能跑的完整应用”上。不是不会写路由也不是搞不定数据库而是缺一个真实可交互、结构清晰、不藏坑、不绕弯子的参照物。这个Flask轻量聊天系统就是我反复打磨后给学生准备的“第一块砖”——它不追求高并发、不堆炫技功能但每一步都踩在初学者最容易卡壳的关键点上用户状态怎么管消息怎么存才不乱前端怎么和后端“说人话”页面跳转时数据怎么不丢更重要的是它用最朴素的方式回答了一个根本问题一个最小可行的聊天系统到底需要哪些零件它们又该怎么咬合关键词里“Flask聊天”“SQLite多用户”“响应式前端”“私聊群聊”不是罗列卖点而是四根承重柱。它用Flask做骨架因为够轻、够直、够透明用SQLite做血肉不是因为它多先进而是因为它零配置、单文件、可双击打开查看——你注册一个用户立刻就能在文件管理器里看到Alice.db生成你发一条消息马上就能用DB Browser打开Bob.db查到那条记录。这种“所见即所得”的反馈对刚学Web开发的人来说比任何文档都管用。“响应式前端”不是套个Bootstrap模板糊弄事而是用纯CSS媒体查询语义化HTML在手机竖屏下自动折叠侧边栏、放大输入框、调整气泡间距连头像都做了max-width: 100%防溢出“私聊群聊”则拆解得极其干净私聊是userA.db ↔ userB.db的双向镜像存储群聊是Group_1.db统一收发groups.db维护成员关系。没有WebSocket长连接用的是Flask原生的request.args轮询time.sleep(0.5)模拟实时感——这恰恰是教学场景最需要的先理解数据流向再优化传输效率。它适合谁如果你正在写Python期末大作业想两周内交出一个有登录、有交互、有数据库、还能在同学面前演示的项目它就是你的底稿如果你刚学完Flask路由和模板渲染对着官方文档里的“Hello World”发呆不知道下一步该往哪加功能它就是你的路线图甚至如果你是老师想找一个代码结构清晰、注释到位、无外部依赖的课堂案例它也能直接放进教案。它不教你如何扛住百万并发但它会手把手告诉你当用户点击“发送”按钮时JavaScript怎么把消息塞进表单、Flask怎么从request.form里掏出来、SQLite怎么用INSERT INTO messages写进去、模板怎么用{% for msg in messages %}把历史记录刷出来。所有这些都在main.py不到300行的代码里用中文注释标得明明白白。2. 整体架构与设计思路为什么选SQLite做“数据库集群”而不是一个库搞定一切2.1 核心矛盾教学项目 vs 工程项目的数据模型取舍很多初学者一上来就想模仿微信或Slack直接上MySQLRedis消息队列。结果呢光是配MySQL环境就耗掉两天建表语句抄错一个字段整个登录流程就崩了。这个项目反其道而行之用SQLite的“文件即数据库”特性把一个复杂的多用户消息系统拆解成一组彼此独立、职责单一的小文件。这不是偷懒而是精准匹配教学场景的认知负荷曲线。我们来看users.db和Alice.db的分工-users.db只存三张表usersid, username, password_hash、sessionssession_id, user_id, created_at、groupsgroup_id, group_name。它的角色是“总账本”记录谁注册了、谁在线、有哪些群。-Alice.db则只有一张表messagesid, sender, receiver, content, timestamp, is_group_msg。当Alice给Bob发私聊这条记录会同时写入Alice.db和Bob.db当Alice在群聊发言记录只写入Group_1.db但groups.db里会更新Group_1的最后活跃时间。提示这种设计牺牲了ACID事务的强一致性比如Alice发消息时Alice.db写成功但Bob.db写失败但换来的是绝对的可调试性。你可以随时打开两个DB文件对比同一时间戳的消息是否一致这是分布式数据库里要搭监控链路才能做到的事。2.2 为什么不用一个SQLite库存所有用户数据有人会问既然都是SQLite为啥不建一个chat_system.db里面放users、messages、groups三张表用外键关联这样更“规范”啊。答案很实在初学者根本不会调外键约束更不会处理级联删除的坑。举个真实例子学生A照着教程建了messages表FOREIGN KEY (sender_id) REFERENCES users(id)结果注册新用户时忘了INSERT INTO users直接INSERT INTO messages程序抛IntegrityError就懵了。而本项目用文件隔离Alice.db里压根没有users表INSERT INTO messages永远只和自己对话错误永远局限在当前文件。调试时你删掉Alice.db重启服务Alice重新登录Alice.db自动重建——这种“删库跑路都不怕”的容错性是教学项目的黄金标准。2.3 前端响应式实现的底层逻辑不是靠框架而是靠CSS的“断点思维”很多人以为响应式就是引入Bootstrap其实核心是理解“断点”breakpoint的本质。本项目的chat_style.css只用了三个媒体查询/* 手机竖屏宽度768px */ media (max-width: 767px) { .sidebar { display: none; } /* 隐藏左侧用户列表 */ .chat-container { padding: 10px; } .message-bubble { max-width: 80%; } } /* 平板横屏768px-1024px */ media (min-width: 768px) and (max-width: 1024px) { .sidebar { width: 200px; } .chat-main { flex: 1; } } /* 桌面端1024px */ media (min-width: 1025px) { .sidebar { width: 280px; } .chat-main { flex: 2; } }关键不在代码而在设计决策-侧边栏是否显示取决于屏幕能否并排放下“联系人列表聊天窗口”。手机屏太窄强行并排会导致字体小到看不清不如全屏聊天-消息气泡宽度设为80%而非100%是给用户留出视觉呼吸区避免文字顶到屏幕边缘产生压迫感-头像尺寸用rem单位而非pxavatar { width: 2.5rem; height: 2.5rem; }这样当用户缩放浏览器时头像和文字能等比缩放不会出现头像变大文字变小的割裂感。注意chat_javascript.js里所有DOM操作都加了document.addEventListener(DOMContentLoaded, ...)包裹确保CSS加载完成后再执行JS。我见过太多学生把JS脚本放在head里结果querySelector(.sidebar)返回null——因为HTML还没解析到那个div。2.4 私聊与群聊的路由分离用URL路径天然区分消息域Flask路由设计是本项目最精妙的一笔。你看main.py里的这几个路由app.route(/chat/username) # 私聊/chat/Bob app.route(/group/group_id) # 群聊/group/Group_1 app.route(/chat/) # 默认聊天页需登录后跳转表面看是URL美化实则是用HTTP协议本身做消息路由。当用户点击“给Bob聊天”前端跳转到/chat/BobFlask自动把Bob作为参数传给视图函数函数内部立刻知道“哦这次要加载Bob.db里的消息并且发送目标是Bob”。群聊同理/group/Group_1直接对应Group_1.db文件名。这种设计让后端逻辑极度扁平没有复杂的if-else判断消息类型URL路径就是消息类型的身份证。对比一下常见错误做法用一个/chat路由靠POST数据里的chat_typeprivatetargetBob来区分。问题在于用户刷新页面时POST数据丢失页面就废了。而本方案URL自带状态刷新即重载符合Web本质。3. 核心细节解析与实操要点从注册到发第一条消息每一步都在解决什么问题3.1 注册流程密码哈希不是炫技是堵住最基础的安全漏洞register.html看着简单但main.py里处理注册的几行代码藏着初学者最容易忽略的细节# main.py 第89行 password_hash generate_password_hash(request.form[password], methodpbkdf2:sha256:600000) # 插入users.db时存的是password_hash不是明文password为什么非要用generate_password_hash因为如果直接存明文密码一旦users.db文件被窃取比如学生把项目传到GitHub没加.gitignore所有账号密码就裸奔了。pbkdf2:sha256:600000的意思是用SHA256算法迭代60万次计算哈希值。这意味着即使攻击者拿到哈希值暴力破解一个密码也要耗时数小时——足够让你在发现泄露后重置所有密码。实操心得我在课堂演示时会让学生用DB Browser打开users.db亲眼看到password_hash字段是一串64位随机字符如pbkdf2:sha256:600000$...$...然后当场用check_password_hash()验证登录。这种“眼见为实”的冲击力比讲十遍原理都管用。3.2 登录态管理Session不是魔法是服务器端的一张“临时会员卡”index.html提交登录表单后main.py的login()函数干了三件事1. 查询users.db核对用户名和密码哈希2. 若正确调用session[user_id] user_id3. 重定向到/chat/。这里session是什么它不是存在浏览器里的Cookie虽然底层依赖Cookie而是Flask在服务器内存里维护的一个字典key是浏览器发来的session_id存在Cookie里value是{user_id: 123}这样的数据。每次请求Flask自动根据Cookie里的session_id从内存字典里捞出对应数据。注意app.secret_key your-secret-key-here必须设置否则session无法加密。项目里main.py第22行已预置os.urandom(24)生成的密钥但你部署到正式环境时务必换成自己的长随机字符串否则session可被伪造。3.3 消息存储的“双写机制”私聊消息为何要写两次数据库当Alice给Bob发消息main.py的send_message()函数会执行# 写入Alice的数据库显示在Alice的聊天窗口 insert_to_db(f{current_user}.db, INSERT INTO messages ...) # 写入Bob的数据库让Bob收到消息 insert_to_db(f{target_user}.db, INSERT INTO messages ...)为什么不能只写一次因为私聊是双向的。如果只写Alice.dbAlice能看到自己发的话但Bob刷新页面后啥也看不到。必须保证双方数据库里都有这条记录才能实现“你发我收”的基本体验。但这里有个陷阱如果第一条写成功第二条因磁盘满失败就会出现Alice看到消息、Bob看不到的“半同步”状态。项目用最朴素的方式规避在insert_to_db()函数里加了try-except捕获异常后回滚并返回错误提示。你在chat.html里看到的“发送失败请重试”就是这个机制在起作用。3.4 头像系统的极简实现为什么用avatar.jfif而不是Gravatar项目里所有用户头像都指向同一个文件/static/avatar.jfif而不是调用Gravatar API根据邮箱生成。原因很现实- Gravatar需要网络请求本地运行时可能因代理或防火墙失败导致头像显示为红叉学生第一反应是“我的代码错了”其实是网络问题-avatar.jfif是128x128像素的JFIF格式图片注意不是JPEG因为JFIF兼容性比JPEG更好老版本IE也能正常显示- 头像路径写死在chat.html的img src{{ url_for(static, filenameavatar.jfif) }}里url_for()自动生成正确路径避免硬编码/static/导致部署到子路径时404。提示如果你想个性化头像只需替换static/avatar.jfif文件无需改一行代码。这就是“约定优于配置”的威力。3.5 错误页面的用户体验设计repeat_login.html不是摆设是降低认知负荷的缓冲带当用户未登录就直接访问/chat/Flask会重定向到/login但若用户手动在地址栏输入/chat/Alicemain.py的chat_with_user()函数会检查session.get(user_id)为空则渲染repeat_login.html。这个页面只有一句话“请先登录”配一个“返回登录页”的按钮。为什么不多写点因为初学者调试时最怕看到500 Internal Server Error那种空白页或堆栈跟踪。repeat_login.html明确告诉用户“不是程序崩了是你没登录”把问题归因到用户操作而不是代码缺陷。这种微小的设计能减少80%的“老师我点开页面是空白是不是代码错了”的提问。4. 实操过程与核心环节实现从零开始跑通全流程含避坑指南4.1 环境准备三步走拒绝“pip install flask”之后的报错别急着python main.py先按顺序做这三件事第一步确认Python版本在终端输入python --version必须是3.7。如果显示2.7.x说明系统默认Python是2.x你需要用python3命令代替python。项目requirements.txt里写的Flask2.3.3不支持Python 2。第二步创建虚拟环境强烈推荐# Linux/macOS python3 -m venv venv source venv/bin/activate # Windows python -m venv venv venv\Scripts\activate.bat激活后终端提示符前会多(venv)这时再pip install -r requirements.txt。好处是所有依赖装在venv文件夹里不影响系统Python卸载只要删掉整个文件夹。第三步检查静态资源路径打开templates/chat.html找到第12行script src{{ url_for(static, filenamejquery-3.6.0.min.js) }}/script确认static/目录下确实有jquery-3.6.0.min.js文件。曾有学生下载包时解压错层jquery文件在static/js/里但HTML还写static/jquery...结果控制台报404消息发送按钮完全没反应——这种路径错误占初学者调试时间的60%。4.2 启动服务与首次交互观察日志比盯着页面更重要执行python main.py后终端会输出* Running on http://127.0.0.1:5000 * Debug mode: on这时别急着打开浏览器先看Flask的调试模式日志。当你在register.html填用户名test、密码123、点注册终端会立刻打印127.0.0.1 - - [10/Jan/2024 14:22:33] POST /register HTTP/1.1 302 - 127.0.0.1 - - [10/Jan/2024 14:22:33] GET /register_success HTTP/1.1 200 -302表示重定向注册成功后跳转200表示页面加载成功。如果看到400或500说明表单验证或数据库写入出错了。此时打开register_success.html确认它确实存在且能被访问。实操心得我让学生养成习惯——每次操作后先看终端日志再看浏览器。日志里的HTTP状态码就是程序健康状况的体温计。4.3 数据库文件自动生成机制理解“懒加载”的哲学项目启动时users.db是预置的但Alice.db、Group_1.db这些文件是在第一次有相关操作时才创建的。比如- 用户Alice首次登录main.py检测到Alice.db不存在自动执行init_user_db(Alice)建好messages表- 管理员首次创建群组Group_1main.py调用init_group_db(Group_1)生成Group_1.db-groups.db则在main.py启动时就初始化因为群组列表需要常驻。这种“用到才建”的策略让项目目录看起来清爽没有一堆空的.db文件。但要注意init_user_db()函数里有一行关键代码# 创建表时显式指定text类型避免SQLite3默认的affinity导致排序异常 cursor.execute(CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY, sender TEXT, receiver TEXT, content TEXT, timestamp TEXT, is_group_msg INTEGER))TEXT类型确保timestamp字段按字符串排序时2024-01-10 14:22:33能正确排在2024-01-10 14:22:32后面。如果写成VARCHAR某些SQLite版本会按数字截断排序导致消息时间乱序。4.4 消息实时渲染的“伪实时”实现轮询不是过时而是可控chat_javascript.js里没有WebSocket用的是setInterval()定时拉取// 每500毫秒检查一次新消息 const pollInterval setInterval(() { fetch(/get_messages?target${target}last_id${lastMessageId}) .then(response response.json()) .then(data { if (data.messages.length 0) { appendMessages(data.messages); // 渲染到页面 lastMessageId data.messages[data.messages.length - 1].id; } }); }, 500);为什么用500ms而不是100ms因为太频繁的请求会拖慢浏览器100ms意味着一秒20次HTTP请求而500ms一秒2次既能保证感知上的“实时”又不会压垮本地Flask服务器。last_id参数是关键每次拉取时带上最后一条消息的ID后端只返回id last_id的记录避免重复渲染。避坑指南学生常犯的错误是把fetch()写在setInterval外面导致只拉取一次。记住口诀“拉取动作在定时器里不是定时器在拉取里”。4.5 响应式布局的终极测试法用Chrome开发者工具的设备模拟器别只在自己手机上测。打开Chrome按F12点击左上角的图标选择“iPhone 12 Pro Max”然后刷新chat.html。重点观察三处- 左侧联系人列表是否消失display: none生效- 聊天输入框是否撑满底部position: fixed; bottom: 0- 发送按钮是否右对齐且大小合适margin-left: autowidth: 40px。如果某处错位打开Elements面板鼠标悬停在对应元素上右侧的Styles标签页会高亮当前生效的CSS规则。你会发现media (max-width: 767px)下的样式被覆盖了——这时就知道该去chat_style.css里修哪个断点了。5. 常见问题与排查技巧实录那些让我凌晨三点还在改的Bug5.1 经典问题速查表现象可能原因排查步骤解决方案点击“注册”没反应控制台报404register.html里的form action路径错误查看register.html第8行form action/register methodpost确认/register路由在main.py中存在检查main.py是否有app.route(/register, methods[POST])装饰器登录后跳转到/chat/显示空白页session[user_id]未正确设置或chat.html未传入必要变量在main.py的chat()函数里加print(session)确认user_id存在检查render_template(chat.html, current_usercurrent_user)是否传递了current_user确保chat()函数返回render_template()且参数名与模板中{{ current_user }}一致消息发送后对方收不到target_user.db文件未生成或权限不足在终端执行ls -l *.db确认Bob.db存在检查main.py中insert_to_db()函数的文件路径拼接是否正确如f{target_user}.db确认target_user变量值无空格或特殊字符路径拼接后是合法文件名头像显示为红叉avatar.jfif路径错误或MIME类型不匹配在浏览器地址栏直接访问http://127.0.0.1:5000/static/avatar.jfif看是否能下载图片用file static/avatar.jfif命令确认文件格式将图片另存为JFIF格式Photoshop里“另存为→格式选JFIF”或改用PNG格式并更新HTML中的filename群聊消息在私聊窗口里也显示is_group_msg字段未正确过滤在chat.html的{% for msg in messages %}循环里加{% if not msg.is_group_msg %}条件判断检查main.py中读取消息的SQL语句是否漏了WHERE is_group_msg 05.2 “删库跑路”急救包当数据库彻底混乱时怎么办别慌。项目设计时就预留了逃生通道一键清空所有用户数据删除users.db、groups.db、groupdatas/目录、userdatas/目录保留main.py和templates/重启服务python main.pyusers.db会自动重建init_db()函数在启动时执行重新注册用register.html注册第一个用户Alice.db会自动生成。我的学生曾把users.db的users表结构改错导致登录永远失败。他按上述步骤操作5分钟恢复比查SQL语法快10倍。记住教学项目的首要目标是“可恢复”不是“不可篡改”。5.3 本地部署的隐藏陷阱Windows路径分隔符引发的血案在Windows上main.py第152行的db_path f{target_user}.db没问题但如果你把项目放在C:\My Projects\chat-system\这种带空格的路径下os.path.join()拼接路径时可能出错。解决方案是在main.py开头加两行import os os.chdir(os.path.dirname(os.path.abspath(__file__)))这行代码强制让工作目录变成main.py所在目录后续所有相对路径如users.db都以此为基准彻底避开路径空格和斜杠方向问题。5.4 性能瓶颈预警SQLite在什么情况下会卡住本项目在以下场景会明显变慢-单个用户数据库过大当Alice.db超过50MBSELECT * FROM messages ORDER BY timestamp DESC LIMIT 50查询会变慢-并发写入冲突Alice和Bob同时给对方发消息两个进程同时写Alice.dbSQLite会返回database is locked错误。应对策略很简单-定期归档旧消息在main.py里加一个/archive_old_messages路由把30天前的消息INSERT INTO archive_messages SELECT * FROM messages WHERE timestamp ?再DELETE FROM messages WHERE timestamp ?-加写锁重试在insert_to_db()函数里捕获sqlite3.OperationalError等待0.1秒后重试最多3次。这些优化不是必须的但当你在课程设计答辩时被问“如果用户量增大怎么办”拿出这两条立刻显得你思考深入。6. 功能扩展与二次开发指南让它真正成为你的作品6.1 加一个“已读回执”三步实现不碰数据库结构想让发送方知道消息已被阅读不需要改messages表利用现有字段即可第一步在chat.html的appendMessages()函数里给每条消息加一个data-id属性function appendMessages(msgs) { msgs.forEach(msg { const bubble document.createElement(div); bubble.className message-bubble; bubble.dataset.id msg.id; // 关键绑定数据库ID bubble.innerHTML span${msg.content}/span; chatContainer.appendChild(bubble); }); }第二步监听滚动事件当消息进入视口时上报chatContainer.addEventListener(scroll, () { const visibleMessages document.querySelectorAll(.message-bubble[data-id]); visibleMessages.forEach(bubble { if (bubble.getBoundingClientRect().top window.innerHeight) { // 消息在视口内上报已读 fetch(/mark_as_read?id${bubble.dataset.id}user${current_user}); bubble.removeAttribute(data-id); // 防止重复上报 } }); });第三步后端加一个/mark_as_read路由把read_status字段更新为1需提前在messages表里加该字段app.route(/mark_as_read) def mark_as_read(): msg_id request.args.get(id) user request.args.get(user) # UPDATE messages SET read_status 1 WHERE id ? return OK全程不改数据库初始化逻辑只增字段、加路由、改前端这就是渐进式开发的魅力。6.2 从SQLite迁移到MySQL替换的不只是驱动如果课程要求必须用MySQL改动集中在db_utils.py假设你新建此文件# db_utils.py import mysql.connector from mysql.connector import Error def get_db_connection(): try: connection mysql.connector.connect( hostlocalhost, databasechat_system, userroot, passwordyour_password ) return connection except Error as e: print(fMySQL连接错误: {e}) return None然后把main.py里所有sqlite3.connect()替换成get_db_connection()所有cursor.execute()的SQL语句里把SQLite特有的?占位符换成%sMySQL驱动要求。最关键的是MySQL不支持“文件即数据库”所以Alice.db要变成chat_system.users和chat_system.messages两张表用user_id字段关联。迁移不是复制粘贴而是重新理解数据关系。6.3 前端现代化用Vue3重写chat.html零破坏后端想练Vue完全不用动main.py。把chat.html改成div idapp div classchat-container v-formsg in messages :keymsg.id div classmessage-bubble{{ msg.content }}/div /div input v-modelnewMessage keyup.entersendMessage / /div script srchttps://unpkg.com/vue3/dist/vue.global.js/script script const { createApp, ref, onMounted } Vue; createApp({ setup() { const messages ref([]); const newMessage ref(); onMounted(() { // 从Flask的/get_messages API拉取消息 fetch(/get_messages?targetBob) .then(r r.json()) .then(data messages.value data.messages); }); function sendMessage() { fetch(/send_message, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify({content: newMessage.value, target: Bob}) }); newMessage.value ; } return { messages, newMessage, sendMessage }; } }).mount(#app); /script后端API接口/get_messages、/send_message完全不变只是前端渲染引擎换了。这才是前后端分离的真谛后端专注数据前端专注体验。7. 我的实战体会为什么坚持用“笨办法”教学生带了这么多年课我越来越确信对初学者而言可解释性比性能重要可调试性比优雅重要可预测性比灵活重要。这个Flask聊天系统里没有一行代码是为了“看起来高级”而写的。time.sleep(0.5)不是因为不会用WebSocket而是因为轮询的逻辑学生能一行行跟下去Alice.db单独一个文件不是因为不懂ORM而是因为双击就能看到数据比SELECT * FROM messages WHERE user_id123直观一百倍chat_style.css里硬编码的像素值不是因为不会用CSS变量而是因为font-size: 16px比font-size: var(--base-font)更容易让学生理解“这个数字控制文字大小”。它不是一个生产系统而是一个思维模具。当你把main.py里300行代码逐行读懂你就掌握了Web开发的四大支柱路由分发URL到函数、状态管理session、数据持久化SQLite、前后端协作AJAX。后续学Django、学React、学Kubernetes不过是给这四根柱子加不同的屋顶和地基而已。最后分享一个小技巧下次你调试时把main.py里所有print()语句取消注释项目里已预埋了20个调试点然后一边操作一边看终端输出。那些跳动的日志就是程序在跟你说话。听懂它你就入门了。本文还有配套的精品资源点击获取简介用Python和Flask搭的本地可运行网页聊天工具开箱即用。支持用户注册登录每个用户有独立数据库文件如Alice.db、Bob.db群聊数据存在Group_1.db、groups.db等文件里所有用户信息统一存users.db。前端页面齐全register.html负责注册index.html是登录入口chat.html承载聊天主界面带头像显示、消息气泡、时间戳和实时渲染逻辑样式用chat_style.css实现响应式布局交互靠chat_javascript.js配合jQuery完成还内置了重复登录提示页repeat_login.html和注册成功页register_success.html。静态资源包括jquery-3.6.0.min.js、默认头像avatar.jfif。后端main.py是启动入口DBdebug.py辅助查数据库requirements.txt列明依赖README.md写清部署步骤。装好Flask后直接python main.py就能跑起来不用配服务器、不依赖云服务适合学生做课程设计、期末项目或刚学Web开发的人练手。本文还有配套的精品资源点击获取
Flask轻量聊天系统：SQLite多用户支持+响应式前端界面（含注册登录、私聊群聊）
发布时间：2026/6/5 12:41:33
本文还有配套的精品资源点击获取简介用Python和Flask搭的本地可运行网页聊天工具开箱即用。支持用户注册登录每个用户有独立数据库文件如Alice.db、Bob.db群聊数据存在Group_1.db、groups.db等文件里所有用户信息统一存users.db。前端页面齐全register.html负责注册index.html是登录入口chat.html承载聊天主界面带头像显示、消息气泡、时间戳和实时渲染逻辑样式用chat_style.css实现响应式布局交互靠chat_javascript.js配合jQuery完成还内置了重复登录提示页repeat_login.html和注册成功页register_success.html。静态资源包括jquery-3.6.0.min.js、默认头像avatar.jfif。后端main.py是启动入口DBdebug.py辅助查数据库requirements.txt列明依赖README.md写清部署步骤。装好Flask后直接python main.py就能跑起来不用配服务器、不依赖云服务适合学生做课程设计、期末项目或刚学Web开发的人练手。1. 项目概述为什么这个Flask聊天系统值得你花30分钟跑起来我带过六届Python Web课程设计每年都有学生卡在“不知道从哪开始做一个能跑的完整应用”上。不是不会写路由也不是搞不定数据库而是缺一个真实可交互、结构清晰、不藏坑、不绕弯子的参照物。这个Flask轻量聊天系统就是我反复打磨后给学生准备的“第一块砖”——它不追求高并发、不堆炫技功能但每一步都踩在初学者最容易卡壳的关键点上用户状态怎么管消息怎么存才不乱前端怎么和后端“说人话”页面跳转时数据怎么不丢更重要的是它用最朴素的方式回答了一个根本问题一个最小可行的聊天系统到底需要哪些零件它们又该怎么咬合关键词里“Flask聊天”“SQLite多用户”“响应式前端”“私聊群聊”不是罗列卖点而是四根承重柱。它用Flask做骨架因为够轻、够直、够透明用SQLite做血肉不是因为它多先进而是因为它零配置、单文件、可双击打开查看——你注册一个用户立刻就能在文件管理器里看到Alice.db生成你发一条消息马上就能用DB Browser打开Bob.db查到那条记录。这种“所见即所得”的反馈对刚学Web开发的人来说比任何文档都管用。“响应式前端”不是套个Bootstrap模板糊弄事而是用纯CSS媒体查询语义化HTML在手机竖屏下自动折叠侧边栏、放大输入框、调整气泡间距连头像都做了max-width: 100%防溢出“私聊群聊”则拆解得极其干净私聊是userA.db ↔ userB.db的双向镜像存储群聊是Group_1.db统一收发groups.db维护成员关系。没有WebSocket长连接用的是Flask原生的request.args轮询time.sleep(0.5)模拟实时感——这恰恰是教学场景最需要的先理解数据流向再优化传输效率。它适合谁如果你正在写Python期末大作业想两周内交出一个有登录、有交互、有数据库、还能在同学面前演示的项目它就是你的底稿如果你刚学完Flask路由和模板渲染对着官方文档里的“Hello World”发呆不知道下一步该往哪加功能它就是你的路线图甚至如果你是老师想找一个代码结构清晰、注释到位、无外部依赖的课堂案例它也能直接放进教案。它不教你如何扛住百万并发但它会手把手告诉你当用户点击“发送”按钮时JavaScript怎么把消息塞进表单、Flask怎么从request.form里掏出来、SQLite怎么用INSERT INTO messages写进去、模板怎么用{% for msg in messages %}把历史记录刷出来。所有这些都在main.py不到300行的代码里用中文注释标得明明白白。2. 整体架构与设计思路为什么选SQLite做“数据库集群”而不是一个库搞定一切2.1 核心矛盾教学项目 vs 工程项目的数据模型取舍很多初学者一上来就想模仿微信或Slack直接上MySQLRedis消息队列。结果呢光是配MySQL环境就耗掉两天建表语句抄错一个字段整个登录流程就崩了。这个项目反其道而行之用SQLite的“文件即数据库”特性把一个复杂的多用户消息系统拆解成一组彼此独立、职责单一的小文件。这不是偷懒而是精准匹配教学场景的认知负荷曲线。我们来看users.db和Alice.db的分工-users.db只存三张表usersid, username, password_hash、sessionssession_id, user_id, created_at、groupsgroup_id, group_name。它的角色是“总账本”记录谁注册了、谁在线、有哪些群。-Alice.db则只有一张表messagesid, sender, receiver, content, timestamp, is_group_msg。当Alice给Bob发私聊这条记录会同时写入Alice.db和Bob.db当Alice在群聊发言记录只写入Group_1.db但groups.db里会更新Group_1的最后活跃时间。提示这种设计牺牲了ACID事务的强一致性比如Alice发消息时Alice.db写成功但Bob.db写失败但换来的是绝对的可调试性。你可以随时打开两个DB文件对比同一时间戳的消息是否一致这是分布式数据库里要搭监控链路才能做到的事。2.2 为什么不用一个SQLite库存所有用户数据有人会问既然都是SQLite为啥不建一个chat_system.db里面放users、messages、groups三张表用外键关联这样更“规范”啊。答案很实在初学者根本不会调外键约束更不会处理级联删除的坑。举个真实例子学生A照着教程建了messages表FOREIGN KEY (sender_id) REFERENCES users(id)结果注册新用户时忘了INSERT INTO users直接INSERT INTO messages程序抛IntegrityError就懵了。而本项目用文件隔离Alice.db里压根没有users表INSERT INTO messages永远只和自己对话错误永远局限在当前文件。调试时你删掉Alice.db重启服务Alice重新登录Alice.db自动重建——这种“删库跑路都不怕”的容错性是教学项目的黄金标准。2.3 前端响应式实现的底层逻辑不是靠框架而是靠CSS的“断点思维”很多人以为响应式就是引入Bootstrap其实核心是理解“断点”breakpoint的本质。本项目的chat_style.css只用了三个媒体查询/* 手机竖屏宽度768px */ media (max-width: 767px) { .sidebar { display: none; } /* 隐藏左侧用户列表 */ .chat-container { padding: 10px; } .message-bubble { max-width: 80%; } } /* 平板横屏768px-1024px */ media (min-width: 768px) and (max-width: 1024px) { .sidebar { width: 200px; } .chat-main { flex: 1; } } /* 桌面端1024px */ media (min-width: 1025px) { .sidebar { width: 280px; } .chat-main { flex: 2; } }关键不在代码而在设计决策-侧边栏是否显示取决于屏幕能否并排放下“联系人列表聊天窗口”。手机屏太窄强行并排会导致字体小到看不清不如全屏聊天-消息气泡宽度设为80%而非100%是给用户留出视觉呼吸区避免文字顶到屏幕边缘产生压迫感-头像尺寸用rem单位而非pxavatar { width: 2.5rem; height: 2.5rem; }这样当用户缩放浏览器时头像和文字能等比缩放不会出现头像变大文字变小的割裂感。注意chat_javascript.js里所有DOM操作都加了document.addEventListener(DOMContentLoaded, ...)包裹确保CSS加载完成后再执行JS。我见过太多学生把JS脚本放在head里结果querySelector(.sidebar)返回null——因为HTML还没解析到那个div。2.4 私聊与群聊的路由分离用URL路径天然区分消息域Flask路由设计是本项目最精妙的一笔。你看main.py里的这几个路由app.route(/chat/username) # 私聊/chat/Bob app.route(/group/group_id) # 群聊/group/Group_1 app.route(/chat/) # 默认聊天页需登录后跳转表面看是URL美化实则是用HTTP协议本身做消息路由。当用户点击“给Bob聊天”前端跳转到/chat/BobFlask自动把Bob作为参数传给视图函数函数内部立刻知道“哦这次要加载Bob.db里的消息并且发送目标是Bob”。群聊同理/group/Group_1直接对应Group_1.db文件名。这种设计让后端逻辑极度扁平没有复杂的if-else判断消息类型URL路径就是消息类型的身份证。对比一下常见错误做法用一个/chat路由靠POST数据里的chat_typeprivatetargetBob来区分。问题在于用户刷新页面时POST数据丢失页面就废了。而本方案URL自带状态刷新即重载符合Web本质。3. 核心细节解析与实操要点从注册到发第一条消息每一步都在解决什么问题3.1 注册流程密码哈希不是炫技是堵住最基础的安全漏洞register.html看着简单但main.py里处理注册的几行代码藏着初学者最容易忽略的细节# main.py 第89行 password_hash generate_password_hash(request.form[password], methodpbkdf2:sha256:600000) # 插入users.db时存的是password_hash不是明文password为什么非要用generate_password_hash因为如果直接存明文密码一旦users.db文件被窃取比如学生把项目传到GitHub没加.gitignore所有账号密码就裸奔了。pbkdf2:sha256:600000的意思是用SHA256算法迭代60万次计算哈希值。这意味着即使攻击者拿到哈希值暴力破解一个密码也要耗时数小时——足够让你在发现泄露后重置所有密码。实操心得我在课堂演示时会让学生用DB Browser打开users.db亲眼看到password_hash字段是一串64位随机字符如pbkdf2:sha256:600000$...$...然后当场用check_password_hash()验证登录。这种“眼见为实”的冲击力比讲十遍原理都管用。3.2 登录态管理Session不是魔法是服务器端的一张“临时会员卡”index.html提交登录表单后main.py的login()函数干了三件事1. 查询users.db核对用户名和密码哈希2. 若正确调用session[user_id] user_id3. 重定向到/chat/。这里session是什么它不是存在浏览器里的Cookie虽然底层依赖Cookie而是Flask在服务器内存里维护的一个字典key是浏览器发来的session_id存在Cookie里value是{user_id: 123}这样的数据。每次请求Flask自动根据Cookie里的session_id从内存字典里捞出对应数据。注意app.secret_key your-secret-key-here必须设置否则session无法加密。项目里main.py第22行已预置os.urandom(24)生成的密钥但你部署到正式环境时务必换成自己的长随机字符串否则session可被伪造。3.3 消息存储的“双写机制”私聊消息为何要写两次数据库当Alice给Bob发消息main.py的send_message()函数会执行# 写入Alice的数据库显示在Alice的聊天窗口 insert_to_db(f{current_user}.db, INSERT INTO messages ...) # 写入Bob的数据库让Bob收到消息 insert_to_db(f{target_user}.db, INSERT INTO messages ...)为什么不能只写一次因为私聊是双向的。如果只写Alice.dbAlice能看到自己发的话但Bob刷新页面后啥也看不到。必须保证双方数据库里都有这条记录才能实现“你发我收”的基本体验。但这里有个陷阱如果第一条写成功第二条因磁盘满失败就会出现Alice看到消息、Bob看不到的“半同步”状态。项目用最朴素的方式规避在insert_to_db()函数里加了try-except捕获异常后回滚并返回错误提示。你在chat.html里看到的“发送失败请重试”就是这个机制在起作用。3.4 头像系统的极简实现为什么用avatar.jfif而不是Gravatar项目里所有用户头像都指向同一个文件/static/avatar.jfif而不是调用Gravatar API根据邮箱生成。原因很现实- Gravatar需要网络请求本地运行时可能因代理或防火墙失败导致头像显示为红叉学生第一反应是“我的代码错了”其实是网络问题-avatar.jfif是128x128像素的JFIF格式图片注意不是JPEG因为JFIF兼容性比JPEG更好老版本IE也能正常显示- 头像路径写死在chat.html的img src{{ url_for(static, filenameavatar.jfif) }}里url_for()自动生成正确路径避免硬编码/static/导致部署到子路径时404。提示如果你想个性化头像只需替换static/avatar.jfif文件无需改一行代码。这就是“约定优于配置”的威力。3.5 错误页面的用户体验设计repeat_login.html不是摆设是降低认知负荷的缓冲带当用户未登录就直接访问/chat/Flask会重定向到/login但若用户手动在地址栏输入/chat/Alicemain.py的chat_with_user()函数会检查session.get(user_id)为空则渲染repeat_login.html。这个页面只有一句话“请先登录”配一个“返回登录页”的按钮。为什么不多写点因为初学者调试时最怕看到500 Internal Server Error那种空白页或堆栈跟踪。repeat_login.html明确告诉用户“不是程序崩了是你没登录”把问题归因到用户操作而不是代码缺陷。这种微小的设计能减少80%的“老师我点开页面是空白是不是代码错了”的提问。4. 实操过程与核心环节实现从零开始跑通全流程含避坑指南4.1 环境准备三步走拒绝“pip install flask”之后的报错别急着python main.py先按顺序做这三件事第一步确认Python版本在终端输入python --version必须是3.7。如果显示2.7.x说明系统默认Python是2.x你需要用python3命令代替python。项目requirements.txt里写的Flask2.3.3不支持Python 2。第二步创建虚拟环境强烈推荐# Linux/macOS python3 -m venv venv source venv/bin/activate # Windows python -m venv venv venv\Scripts\activate.bat激活后终端提示符前会多(venv)这时再pip install -r requirements.txt。好处是所有依赖装在venv文件夹里不影响系统Python卸载只要删掉整个文件夹。第三步检查静态资源路径打开templates/chat.html找到第12行script src{{ url_for(static, filenamejquery-3.6.0.min.js) }}/script确认static/目录下确实有jquery-3.6.0.min.js文件。曾有学生下载包时解压错层jquery文件在static/js/里但HTML还写static/jquery...结果控制台报404消息发送按钮完全没反应——这种路径错误占初学者调试时间的60%。4.2 启动服务与首次交互观察日志比盯着页面更重要执行python main.py后终端会输出* Running on http://127.0.0.1:5000 * Debug mode: on这时别急着打开浏览器先看Flask的调试模式日志。当你在register.html填用户名test、密码123、点注册终端会立刻打印127.0.0.1 - - [10/Jan/2024 14:22:33] POST /register HTTP/1.1 302 - 127.0.0.1 - - [10/Jan/2024 14:22:33] GET /register_success HTTP/1.1 200 -302表示重定向注册成功后跳转200表示页面加载成功。如果看到400或500说明表单验证或数据库写入出错了。此时打开register_success.html确认它确实存在且能被访问。实操心得我让学生养成习惯——每次操作后先看终端日志再看浏览器。日志里的HTTP状态码就是程序健康状况的体温计。4.3 数据库文件自动生成机制理解“懒加载”的哲学项目启动时users.db是预置的但Alice.db、Group_1.db这些文件是在第一次有相关操作时才创建的。比如- 用户Alice首次登录main.py检测到Alice.db不存在自动执行init_user_db(Alice)建好messages表- 管理员首次创建群组Group_1main.py调用init_group_db(Group_1)生成Group_1.db-groups.db则在main.py启动时就初始化因为群组列表需要常驻。这种“用到才建”的策略让项目目录看起来清爽没有一堆空的.db文件。但要注意init_user_db()函数里有一行关键代码# 创建表时显式指定text类型避免SQLite3默认的affinity导致排序异常 cursor.execute(CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY, sender TEXT, receiver TEXT, content TEXT, timestamp TEXT, is_group_msg INTEGER))TEXT类型确保timestamp字段按字符串排序时2024-01-10 14:22:33能正确排在2024-01-10 14:22:32后面。如果写成VARCHAR某些SQLite版本会按数字截断排序导致消息时间乱序。4.4 消息实时渲染的“伪实时”实现轮询不是过时而是可控chat_javascript.js里没有WebSocket用的是setInterval()定时拉取// 每500毫秒检查一次新消息 const pollInterval setInterval(() { fetch(/get_messages?target${target}last_id${lastMessageId}) .then(response response.json()) .then(data { if (data.messages.length 0) { appendMessages(data.messages); // 渲染到页面 lastMessageId data.messages[data.messages.length - 1].id; } }); }, 500);为什么用500ms而不是100ms因为太频繁的请求会拖慢浏览器100ms意味着一秒20次HTTP请求而500ms一秒2次既能保证感知上的“实时”又不会压垮本地Flask服务器。last_id参数是关键每次拉取时带上最后一条消息的ID后端只返回id last_id的记录避免重复渲染。避坑指南学生常犯的错误是把fetch()写在setInterval外面导致只拉取一次。记住口诀“拉取动作在定时器里不是定时器在拉取里”。4.5 响应式布局的终极测试法用Chrome开发者工具的设备模拟器别只在自己手机上测。打开Chrome按F12点击左上角的图标选择“iPhone 12 Pro Max”然后刷新chat.html。重点观察三处- 左侧联系人列表是否消失display: none生效- 聊天输入框是否撑满底部position: fixed; bottom: 0- 发送按钮是否右对齐且大小合适margin-left: autowidth: 40px。如果某处错位打开Elements面板鼠标悬停在对应元素上右侧的Styles标签页会高亮当前生效的CSS规则。你会发现media (max-width: 767px)下的样式被覆盖了——这时就知道该去chat_style.css里修哪个断点了。5. 常见问题与排查技巧实录那些让我凌晨三点还在改的Bug5.1 经典问题速查表现象可能原因排查步骤解决方案点击“注册”没反应控制台报404register.html里的form action路径错误查看register.html第8行form action/register methodpost确认/register路由在main.py中存在检查main.py是否有app.route(/register, methods[POST])装饰器登录后跳转到/chat/显示空白页session[user_id]未正确设置或chat.html未传入必要变量在main.py的chat()函数里加print(session)确认user_id存在检查render_template(chat.html, current_usercurrent_user)是否传递了current_user确保chat()函数返回render_template()且参数名与模板中{{ current_user }}一致消息发送后对方收不到target_user.db文件未生成或权限不足在终端执行ls -l *.db确认Bob.db存在检查main.py中insert_to_db()函数的文件路径拼接是否正确如f{target_user}.db确认target_user变量值无空格或特殊字符路径拼接后是合法文件名头像显示为红叉avatar.jfif路径错误或MIME类型不匹配在浏览器地址栏直接访问http://127.0.0.1:5000/static/avatar.jfif看是否能下载图片用file static/avatar.jfif命令确认文件格式将图片另存为JFIF格式Photoshop里“另存为→格式选JFIF”或改用PNG格式并更新HTML中的filename群聊消息在私聊窗口里也显示is_group_msg字段未正确过滤在chat.html的{% for msg in messages %}循环里加{% if not msg.is_group_msg %}条件判断检查main.py中读取消息的SQL语句是否漏了WHERE is_group_msg 05.2 “删库跑路”急救包当数据库彻底混乱时怎么办别慌。项目设计时就预留了逃生通道一键清空所有用户数据删除users.db、groups.db、groupdatas/目录、userdatas/目录保留main.py和templates/重启服务python main.pyusers.db会自动重建init_db()函数在启动时执行重新注册用register.html注册第一个用户Alice.db会自动生成。我的学生曾把users.db的users表结构改错导致登录永远失败。他按上述步骤操作5分钟恢复比查SQL语法快10倍。记住教学项目的首要目标是“可恢复”不是“不可篡改”。5.3 本地部署的隐藏陷阱Windows路径分隔符引发的血案在Windows上main.py第152行的db_path f{target_user}.db没问题但如果你把项目放在C:\My Projects\chat-system\这种带空格的路径下os.path.join()拼接路径时可能出错。解决方案是在main.py开头加两行import os os.chdir(os.path.dirname(os.path.abspath(__file__)))这行代码强制让工作目录变成main.py所在目录后续所有相对路径如users.db都以此为基准彻底避开路径空格和斜杠方向问题。5.4 性能瓶颈预警SQLite在什么情况下会卡住本项目在以下场景会明显变慢-单个用户数据库过大当Alice.db超过50MBSELECT * FROM messages ORDER BY timestamp DESC LIMIT 50查询会变慢-并发写入冲突Alice和Bob同时给对方发消息两个进程同时写Alice.dbSQLite会返回database is locked错误。应对策略很简单-定期归档旧消息在main.py里加一个/archive_old_messages路由把30天前的消息INSERT INTO archive_messages SELECT * FROM messages WHERE timestamp ?再DELETE FROM messages WHERE timestamp ?-加写锁重试在insert_to_db()函数里捕获sqlite3.OperationalError等待0.1秒后重试最多3次。这些优化不是必须的但当你在课程设计答辩时被问“如果用户量增大怎么办”拿出这两条立刻显得你思考深入。6. 功能扩展与二次开发指南让它真正成为你的作品6.1 加一个“已读回执”三步实现不碰数据库结构想让发送方知道消息已被阅读不需要改messages表利用现有字段即可第一步在chat.html的appendMessages()函数里给每条消息加一个data-id属性function appendMessages(msgs) { msgs.forEach(msg { const bubble document.createElement(div); bubble.className message-bubble; bubble.dataset.id msg.id; // 关键绑定数据库ID bubble.innerHTML span${msg.content}/span; chatContainer.appendChild(bubble); }); }第二步监听滚动事件当消息进入视口时上报chatContainer.addEventListener(scroll, () { const visibleMessages document.querySelectorAll(.message-bubble[data-id]); visibleMessages.forEach(bubble { if (bubble.getBoundingClientRect().top window.innerHeight) { // 消息在视口内上报已读 fetch(/mark_as_read?id${bubble.dataset.id}user${current_user}); bubble.removeAttribute(data-id); // 防止重复上报 } }); });第三步后端加一个/mark_as_read路由把read_status字段更新为1需提前在messages表里加该字段app.route(/mark_as_read) def mark_as_read(): msg_id request.args.get(id) user request.args.get(user) # UPDATE messages SET read_status 1 WHERE id ? return OK全程不改数据库初始化逻辑只增字段、加路由、改前端这就是渐进式开发的魅力。6.2 从SQLite迁移到MySQL替换的不只是驱动如果课程要求必须用MySQL改动集中在db_utils.py假设你新建此文件# db_utils.py import mysql.connector from mysql.connector import Error def get_db_connection(): try: connection mysql.connector.connect( hostlocalhost, databasechat_system, userroot, passwordyour_password ) return connection except Error as e: print(fMySQL连接错误: {e}) return None然后把main.py里所有sqlite3.connect()替换成get_db_connection()所有cursor.execute()的SQL语句里把SQLite特有的?占位符换成%sMySQL驱动要求。最关键的是MySQL不支持“文件即数据库”所以Alice.db要变成chat_system.users和chat_system.messages两张表用user_id字段关联。迁移不是复制粘贴而是重新理解数据关系。6.3 前端现代化用Vue3重写chat.html零破坏后端想练Vue完全不用动main.py。把chat.html改成div idapp div classchat-container v-formsg in messages :keymsg.id div classmessage-bubble{{ msg.content }}/div /div input v-modelnewMessage keyup.entersendMessage / /div script srchttps://unpkg.com/vue3/dist/vue.global.js/script script const { createApp, ref, onMounted } Vue; createApp({ setup() { const messages ref([]); const newMessage ref(); onMounted(() { // 从Flask的/get_messages API拉取消息 fetch(/get_messages?targetBob) .then(r r.json()) .then(data messages.value data.messages); }); function sendMessage() { fetch(/send_message, { method: POST, headers: {Content-Type: application/json}, body: JSON.stringify({content: newMessage.value, target: Bob}) }); newMessage.value ; } return { messages, newMessage, sendMessage }; } }).mount(#app); /script后端API接口/get_messages、/send_message完全不变只是前端渲染引擎换了。这才是前后端分离的真谛后端专注数据前端专注体验。7. 我的实战体会为什么坚持用“笨办法”教学生带了这么多年课我越来越确信对初学者而言可解释性比性能重要可调试性比优雅重要可预测性比灵活重要。这个Flask聊天系统里没有一行代码是为了“看起来高级”而写的。time.sleep(0.5)不是因为不会用WebSocket而是因为轮询的逻辑学生能一行行跟下去Alice.db单独一个文件不是因为不懂ORM而是因为双击就能看到数据比SELECT * FROM messages WHERE user_id123直观一百倍chat_style.css里硬编码的像素值不是因为不会用CSS变量而是因为font-size: 16px比font-size: var(--base-font)更容易让学生理解“这个数字控制文字大小”。它不是一个生产系统而是一个思维模具。当你把main.py里300行代码逐行读懂你就掌握了Web开发的四大支柱路由分发URL到函数、状态管理session、数据持久化SQLite、前后端协作AJAX。后续学Django、学React、学Kubernetes不过是给这四根柱子加不同的屋顶和地基而已。最后分享一个小技巧下次你调试时把main.py里所有print()语句取消注释项目里已预埋了20个调试点然后一边操作一边看终端输出。那些跳动的日志就是程序在跟你说话。听懂它你就入门了。本文还有配套的精品资源点击获取简介用Python和Flask搭的本地可运行网页聊天工具开箱即用。支持用户注册登录每个用户有独立数据库文件如Alice.db、Bob.db群聊数据存在Group_1.db、groups.db等文件里所有用户信息统一存users.db。前端页面齐全register.html负责注册index.html是登录入口chat.html承载聊天主界面带头像显示、消息气泡、时间戳和实时渲染逻辑样式用chat_style.css实现响应式布局交互靠chat_javascript.js配合jQuery完成还内置了重复登录提示页repeat_login.html和注册成功页register_success.html。静态资源包括jquery-3.6.0.min.js、默认头像avatar.jfif。后端main.py是启动入口DBdebug.py辅助查数据库requirements.txt列明依赖README.md写清部署步骤。装好Flask后直接python main.py就能跑起来不用配服务器、不依赖云服务适合学生做课程设计、期末项目或刚学Web开发的人练手。本文还有配套的精品资源点击获取
相关文章
MAX232引脚接反排查：从电平转换原理到RS-232通信故障解决
1. 项目概述：一个资深硬件工程师的“低级”错误最近在调试一块新设计的工控板，遇到了一个让我这个老工程师都差点栽跟头的“玄学”问题。板子上的串口通信时好时坏，接A电脑一切正常，换到B电脑上就彻底“失联”，数据死活…
热风枪与电烙铁操作进阶：从规范到实战的深度解析
1. 从规范到肌肉记忆：热风枪与电烙铁的深度操作哲学在电子制造、维修乃至硬件开发的每一个环节，热风枪和电烙铁都是工程师和技师双手的延伸。你或许看过无数份操作规范，它们告诉你温度调多少，风量设几档，焊锡怎么加。但…
终极Word转LaTeX解决方案：深入解析docx2tex架构与最佳实践
终极Word转LaTeX解决方案：深入解析docx2tex架构与最佳实践 【免费下载链接】docx2tex Converts Microsoft Word docx to LaTeX 项目地址: https://gitcode.com/gh_mirrors/do/docx2tex 还在为学术论文的格式转换而烦恼吗？当你花费数小时手动调整W…
使用Intel DS-5为Cyclone V SoC开发ARM Linux应用程序的完整指南
1. 项目概述与工具选型考量对于使用Intel Cyclone V SoC FPGA这类异构芯片的开发者来说，一个常见的场景是：FPGA侧的硬件逻辑（HPS）已经设计完成并稳定运行，片上ARM硬核处理器（Cortex-A9）也成功引…
智能眼镜与隐形耳机或加剧学校考试作弊风险
英国学历资质监管机构警告称，智能眼镜、隐形耳机等新一代可穿戴高科技设备可能进一步助长考试作弊行为。英国资质与考试监管办公室（Ofqual）负责人伊恩鲍克汉姆透露，由于教师反映越来越难以识别学生课业作业中的人工智能生成内容&a…
暗黑破坏神2存档编辑器：5分钟学会可视化修改角色与物品
暗黑破坏神2存档编辑器：5分钟学会可视化修改角色与物品 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor d2s-editor是一款专为《暗黑破坏神2》及其重制版玩家设计的开源存档编辑器，通过直观的可视化界面&a…
AI激光灭蚊仪：用深度学习精准猎杀蚊子
每逢夏季，蚊虫横行，让人不胜其烦。你或许曾想：既然AI技术如此发达，为何对这些令人抓狂的飞行害虫束手无策？对AI的抱怨可以有很多，但"无法对抗蚊子"这一条，如今已经可以从清单上划掉了…
如何在5分钟内将任何图片转换为专业PSD分层文件：Layerdivider终极指南
如何在5分钟内将任何图片转换为专业PSD分层文件：Layerdivider终极指南 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 你是否曾经面对一张精美…
名画动起来到底难在哪？Sora 2最新v2.3引擎解析：92.7%艺术保真率背后的3层语义约束机制，
更多请点击： https://codechina.net 第一章：名画动起来到底难在哪？Sora 2最新v2.3引擎解析：92.7%艺术保真率背后的3层语义约束机制 让《星月夜》的涡旋云层真实流动、令《戴珍珠耳环的少女》的凝视随光影微妙变化——这并非简单帧…
利用claude code skill在快马平台快速构建个人博客原型
快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容： 请使用快马平台生成一个个人博客网站的原型。要求具备以下核心功能：响应式设计适配手机和电脑，包含首页文章列表展示，文章详情页，关…
Gemma-4 E4B配置参数详解：如何优化模型性能和输出质量
Gemma-4 E4B配置参数详解：如何优化模型性能和输出质量 【免费下载链接】gemma-4-E4B 项目地址: https://ai.gitcode.com/hf_mirrors/google/gemma-4-E4B Gemma-4 E4B是Google推出的先进多模态AI模型，支持文本、图像、音频和视频处理。本文将详细…
AI 赋能下企业账户接管欺诈成因、风险与全维度防御体系研究
摘要：依托 Wintrust 金融集团发布的行业调研与美联储、FinCEN 公开统计数据，本文以美国 2022—2024 年账户接管欺诈（Account Takeover Fraud，ATO）损失逐年攀升的现实数据为切入点，系统梳理账户接管欺诈的定…
Win10/Win11下Realtek 8188GU网卡驱动感叹号？别急着扔，试试这个手动安装的野路子
Realtek 8188GU网卡驱动故障深度修复指南：从原理到实战当设备管理器里那个顽固的黄色感叹号挥之不去，而你已经尝试了所有"标准操作"——Windows自动更新、第三方驱动工具、甚至重启大法——却依然无济于事时，是时候换个思路了。这篇…
AnolisOS 8.8安装源配置踩坑实录：从‘设置基础软件仓库时出错’到成功联网的保姆级指南
AnolisOS 8.8安装源配置实战指南：从诊断到解决方案的全流程解析当你在安装AnolisOS 8.8时遇到"设置基础软件仓库时出错"的提示，这通常意味着系统无法访问或识别安装源。这个问题看似简单，但背后可能涉及网络配置、镜像选择、启动参…
基于树莓派Pico的反应速度测试游戏：从GPIO编程到状态机实战
1. 项目概述与核心思路最近在整理工作室的电子元件，翻出来几个闲置的街机按钮和一块树莓派Pico，灵机一动，决定做个简单又有趣的反应速度测试游戏。这个项目非常适合想入门嵌入式开发的朋友，它不涉及复杂的传感器和通信协议&#x…
Zotero Duplicates Merger：5步彻底清理文献库重复条目
Zotero Duplicates Merger：5步彻底清理文献库重复条目 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为文献库中堆积如山的重…
利用随机有限集理论对蜂群的ILQR和MPC控制研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…
为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因
更多请点击： https://intelliparadigm.com 第一章：为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因 Gemini邮件的客户转化效率（CTE）显著偏低，根本原因常被误判为…