当前位置： 首页 > news >正文

手机站和微网站的区别,wordpress include,网站开发的背景和意义,wordpress批量添加图片链接用PythonFlask打造可视化武侠人物关系图生成器#xff1a;从零到一的实战全记录 一、缘起#xff1a;一个程序小白的奇妙探索之旅 作为一个接触Python仅13天的编程萌新#xff0c;我曾以为开发一个完整的应用是遥不可及的事情。但在DeepSeek的帮助下#xff0c;我竟用短短…用PythonFlask打造可视化武侠人物关系图生成器从零到一的实战全记录 一、缘起一个程序小白的奇妙探索之旅 作为一个接触Python仅13天的编程萌新我曾以为开发一个完整的应用是遥不可及的事情。但在DeepSeek的帮助下我竟用短短半天时间完成了一个本地化武侠人物关系图生成器的开发这个工具不仅能批量管理门派和人物还能自动生成关系图并导出Excel表格整个过程充满了挑战与惊喜。 本文将完整记录我的开发过程手把手带你用PythonFlask实现这个有趣的项目最终效果如下 二、制作思路如何化繁为简 核心需求 批量添加门派和人物可视化展示人物关系支持增删改查操作导出结构化数据 技术选型 Flask轻量级Web框架快速搭建后端服务Graphviz专业关系图绘制工具openpyxlExcel文件生成库HTMLJavaScript前端交互实现 架构设计 #mermaid-svg-izoTcWH0FTack7Pp {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .error-icon{fill:#552222;}#mermaid-svg-izoTcWH0FTack7Pp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-izoTcWH0FTack7Pp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-izoTcWH0FTack7Pp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-izoTcWH0FTack7Pp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-izoTcWH0FTack7Pp .marker.cross{stroke:#333333;}#mermaid-svg-izoTcWH0FTack7Pp svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-izoTcWH0FTack7Pp .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster-label text{fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster-label span{color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .label text,#mermaid-svg-izoTcWH0FTack7Pp span{fill:#333;color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .node rect,#mermaid-svg-izoTcWH0FTack7Pp .node circle,#mermaid-svg-izoTcWH0FTack7Pp .node ellipse,#mermaid-svg-izoTcWH0FTack7Pp .node polygon,#mermaid-svg-izoTcWH0FTack7Pp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-izoTcWH0FTack7Pp .node .label{text-align:center;}#mermaid-svg-izoTcWH0FTack7Pp .node.clickable{cursor:pointer;}#mermaid-svg-izoTcWH0FTack7Pp .arrowheadPath{fill:#333333;}#mermaid-svg-izoTcWH0FTack7Pp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-izoTcWH0FTack7Pp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-izoTcWH0FTack7Pp .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-izoTcWH0FTack7Pp .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-izoTcWH0FTack7Pp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-izoTcWH0FTack7Pp .cluster text{fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster span{color:#333;}#mermaid-svg-izoTcWH0FTack7Pp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-izoTcWH0FTack7Pp :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;} 提交数据 前端界面 Flask后端 数据存储 生成关系图 导出Excel 三、准备工作配置开发环境 基础工具 Python 3.8VS Code/PyCharm浏览器推荐Chrome 安装依赖库 pip install flask graphviz openpyxlGraphviz安装 Windows官网下载安装包Macbrew install graphvizLinuxsudo apt-get install graphviz 四、实战开发七步打造完整系统 步骤1创建项目结构 Novel-Relationship-Generator ├── static │ └── output # 存放生成图片 ├── templates │ └── index.html # 前端页面 └── app.py # 主程序步骤2编写后端核心app.py from flask import Flask, render_template, request, jsonify, send_file from graphviz import Digraph import re from openpyxl import Workbookapp Flask(name)# 数据存储 characters [] sects [武当派, 少林派, 峨眉派, 嵩山派] # 初始门派 relations [] sect_descriptions {武当派: 以柔克刚的内家拳法,少林派: 天下武功出少林,峨眉派: 女子为主的武林门派,嵩山派: 五岳剑派之首 } char_descriptions {}# 此处省略接口代码与前文相同…if name main:app.run(debugTrue)步骤3前端页面开发templates/index.html !– 门派添加模块 – form idadd-sects-formlabel批量添加门派支持逗号/分号/空格分隔/labeltextarea namesects rows3 placeholder示例华山派,日月神教/textareabutton typesubmit添加门派/button /form!– 人物关系展示区 – div classright-panelh2武林门派谱/h2div idcharacters-list!– 动态加载门派及人物 –/div /div步骤4添加示例数据

示例人物数据

characters.extend([{name: 张三丰, sect: 武当派},{name: 宋远桥, sect: 武当派},{name: 空闻大师, sect: 少林派},{name: 灭绝师太, sect: 峨眉派},# 可继续添加其他人物… ])# 示例关系数据 relations.extend([{from: 张三丰, to: 宋远桥, label: 师徒},{from: 空闻大师, to: 张三丰, label: 故交},# 添加更多关系… ])步骤5实现关系图生成 app.route(/generate_graph, methods[POST]) def generategraph():dot Digraph(comment武林关系图)dot.attr(rankdirLR, nodesep0.3)# 添加门派分组for sect in sects:with dot.subgraph(namefcluster{sect}) as sub:sub.attr(labelsect, stylefilled, colorlightgrey)for char in characters:if char[sect] sect:sub.node(char[name], shapebox)# 绘制关系线for rel in relations:dot.edge(rel[from], rel[to], labelrel[label])dot.render(static/output/relationship.gv, formatpng)return jsonify({status: success})步骤6导出Excel功能 app.route(/export_excel) def export_excel():wb Workbook()ws wb.activews.append([序号, 门派, 门派简介, 人物, 人物简介])row_num 1for sect in sects:desc sect_descriptions.get(sect, )members [c for c in characters if c[sect] sect]for i, char in enumerate(members):char_desc char_descriptions.get(char[name], )if i 0:ws.append([row_num, sect, desc, char[name], char_desc])else:ws.append([row_num, sect, , char[name], char_desc])row_num 1wb.save(武林人物表.xlsx)return send_file(武林人物表.xlsx)步骤7运行与测试 python app.py访问 http://localhost:5000 即可体验完整功能 五、项目亮点总结 便捷操作 批量导入/导出功能节省时间实时可视化反馈 技术融合 前后端分离架构多格式输出支持PNG/PDF/Excel 扩展性强 支持自定义样式易于添加新功能模块 六、心得体会新手的编程启示 小步快跑从简单功能入手逐步迭代完善善用工具Graphviz等成熟库能大幅提升效率调试技巧 使用浏览器开发者工具查看网络请求添加print语句追踪数据流向 文档价值 Flask官方文档Graphviz语法指南
给读者的建议不要被复杂的功能吓倒把大问题拆解成小模块逐个击破。就像搭建乐高积木一样把每个Python功能模块看作一块积木最终就能拼出完整的作品 立即动手尝试吧 基于这个项目还可以拓展思路比如把做一个日常工作管理的页面等所以马上行动起来把你的世界正等待被创造~ 目前刚开始学编程并试着在CSDN发表文章如果需要完整代码可以在评论区留言并私信我。