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

Django传递dataframe对象到前端网页

news 2026/2/10 17:37:37

在django前端页面上展示的数据，还是使用django模板自带的语法

方式1 不推荐使用直接使用【df.to_html(index=False)】

使用to_html他会生成一个最基本的表格没有任何的样式，一点都不好看，如果有需要的话可以自行修改表格的样式，但博主觉得这样的方式太麻烦，

后端

df = pd.DataFrame({'Name': ['John', 'Alice', 'Smith'],'Age': [30, 25, 35],'City': ['New York', 'London', 'Paris']})# 将DataFrame转换为HTML字符串
table_html = df.to_html(index=False)# 将表格数据和其他数据打包成上下文对象
content= {'table_html': table_html}
return render(request, '自己的前端网页', content)

前端

<!DOCTYPE html>
<html>
<head>
</head>
<body><table>{{ table_html | safe }}</table><!-- 其他页面内容 -->
</body>
</html>

效果

方式2 推荐使用将df转为字典放到特定的表格下

这个表格是博主已经写好<table>有一定的样式了，这个方式就是将每一行数据给放到表格里面，相当于只是传递了数值。

下面的django模板语法能够动态的更新标题行和数据，数据表格有变动不需要修改前端模板

后端

df = pd.DataFrame({'Name': ['John', 'Alice', 'Smith'],'Age': [30, 25, 35],'City': ['New York', 'London', 'Paris']})
table_data = df.to_dict('records')
table_headers = df.columns.tolist()
content = {'table_headers':table_headers,'table_data': table_data
}
return render(request, '自己的前端网页', content)

前端

<!DOCTYPE html>
<html>
<head>
</head>
<body><div class="table-responsive"><div id="example_wrapper" class="dataTables_wrapper"><table id="example" class="display table dataTable" role="grid"aria-describedby="example_info"><thead><tr>{% for header in table_headers %}<th>{{ header }}</th>{% endfor %}</tr></thead><tbody>{% for row in table_data %}<tr>{% for value in row.values %}<td>{{ value }}</td>{% endfor %}</tr>{% endfor %}</tbody></table></div></div><!-- 其他页面内容 -->
</body>
</html>

效果

Django传递dataframe对象到前端网页

在django前端页面上展示的数据，还是使用django模板自带的语法方式1 不推荐使用直接使用【df.to_html(indexFalse)】使用to_html他会生成一个最基本的表格没有任何的样式，一点都不好看，如果有需要的话可以自行修改表格的样式，…...

编程日记 2023/9/3 13:06:04

iOS swift5 弹出提示文字（停留1~2s）XHToastSwift

CoderZhuXH/XHToastSwift - github // // XHToast.swift // XHToastSwiftExample // // Created by xiaohui on 16/8/12. // Copyright © 2016年 CoderZhuXH. All rights reserved. // 代码地址:https://github.com/CoderZhuXH/XHToastSwiftimport UIKit/*** Toast…...

编程日记 2023/9/3 13:05:03

Spring Bean 的生命周期，如何被管理的

实例化一个Bean，也就是我们通常说的new 按照Spring上下文对实例化的Bean进行配置，也就是IOC注入如果这个Bean实现了BeanNameAware接口，会调用它实现的setBeanName(String beanId)方法，此处传递的是Spring配置文件中Bean的ID 如…...

编程日记 2023/9/3 13:04:00

MATLAB算法实战应用案例精讲-【概念篇】量子机器学习

目录前言几个高频面试题目机器学习的方法论知识储备机器学习的实现...

编程日记 2023/9/3 13:02:59

【kubernetes】Argo Rollouts -- k8s下的自动化蓝绿部署

蓝绿（Blue-Green）部署简介在现代软件开发和交付中，确保应用程序的平稳更新和发布对于用户体验和业务连续性至关重要。蓝绿部署是一种备受推崇的部署策略，它允许开发团队在不影响用户的情况下，将新版本的应用程序引入生产环境。蓝绿部署的核心思想在于维护两个独立的环…...

编程日记 2023/9/3 13:01:57

vue Cesium接入在线地图

Cesium接入在线地图只需在创建时将imageryProvider属性换为在线地图的地址即可。目录天地图 OSM地图 ArcGIS 地图谷歌影像地图天地图 //矢量服务let imageryProvider new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?s…...

编程日记 2023/9/3 13:00:57

OBS Studio 30.0 承诺在 Linux 上支持英特尔 QSV，为 DeckLink 提供 HDR 回放功能

导读OBS Studio 30.0 现已推出公开测试版，承诺为这款广受欢迎的免费开源截屏和流媒体应用程序提供多项令人兴奋的新功能，以及大量其他更改和错误修复。 OBS Studio 30.0 承诺在 Linux 上支持英特尔 QSV（快速同步视频）、WHIP/WebRT…...

编程日记 2023/9/3 12:59:56

springboot整合SpringSecurity

先写了一个配置类给这个访问路径，加上角色权限 package com.qf.config;import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; impo…...

编程日记 2023/9/3 12:58:53

最近在搭建ELK日志平台时，logstash报错JSON parse error

直接进入正题，我在搭建elk日志，使用最简单的log4j2 socket json格式输出到logstash. 但是logstash报错如下： [WARN ] 2023-08-30 10:15:17.766 [nioEventLoopGroup-2-2] jsonlines - JSON parse error, original data now in message field…...

编程日记 2023/9/3 12:57:52

某次护网红队getshell的经历

信息收集某企业提供信息：企业官网的真实外网ip，内网ip 企业官网比较硬，从控股超过51%的子公司入手通过企查查找到一堆控股高的子公司，通过ICP/IP地址/域名信息备案管理系统查找子公司官网，收集二级域名。通过google…...

编程日记 2023/9/3 12:56:51

C#实现日期选择器、显示当地时间、跑马灯等功能

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System...

编程日记 2023/9/3 12:55:50

如何让看书变听书？

听书神器安卓页面简单，易操作，全网小说随便听各种声音帮你读你喜欢听的小说，带你进入主人公世界支持网页版小说、本地小说、图片，都能读给你听想看小说，又怕伤眼睛的宝子，可以试试看！…...

编程日记 2023/9/3 12:54:50

pytorch异常——loss异常，不断增大，并且loss出现inf

文章目录异常报错异常截图异常代码原因解释修正代码执行结果异常报错 epoch1:loss3667.782471 epoch2:loss65358620.000000 epoch3:loss14979486720.000000 epoch4:loss1739650891776.000000 epoch5:loss12361745880317952.000000 epoch6:loss2740315398365287284736.000000…...

编程日记 2023/9/3 12:53:49

Lua学习（一）

lua基础学习 LUA 语言1. 什么是lua？1.1 准备工作 2. 基本语法2.1 注释2.2 标识符2.3 关键字2.4 全局变量 3. 数据类型4. 变量4.1 赋值语句 5. 循环5.1 while循环5.2 for循环5.3泛型for循环5.4 repeat until 循环5.5 break 语句 6. 流程控制6.1 if语句6.2 if else 语…...

编程日记 2023/9/3 12:52:48

Python：列表推导式

相关阅读 Python专栏https://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 列表推导式使得创建特定列表的方式更简洁。常见的用法为，对序列或可迭代对象中的每个元素应用某种操作，用生成的结果创建新的列表&#xff…...

编程日记 2023/9/3 12:51:47

应急三维电子沙盘数字孪生系统

一、简介应急三维电子沙盘数字孪生系统是一种基于虚拟现实技术和数字孪生技术的应急管理工具。它通过将真实世界的地理环境与虚拟世界的模拟环境相结合，实现了对应急场景的模拟、分析和决策支持。该系统主要由三维电子沙盘和数字孪生模型两部分组成。三维电子沙盘是…...

编程日记 2023/9/3 12:50:46

LeetCode每日一题：1654. 到家的最少跳跃次数（2023.8.30 C++）

目录 1654. 到家的最少跳跃次数题目描述： 实现代码与解析： bfs 1654. 到家的最少跳跃次数题目描述： 有一只跳蚤的家在数轴上的位置 x 处。请你帮助它从位置 0 出发，到达它的家。跳蚤跳跃的规则如下： 它可以 …...

编程日记 2023/9/3 12:49:45

数据结构例题代码及其讲解-栈与队列

栈与队列栈Stack 后进先出栈的结构体定义及基本操作。 #define MaxSize 50 typedef struct {int data[MaxSize];//栈中存放数据类型为整型int top;//栈顶指针 }Stack;初始化这里初始化时是将栈顶指针指向-1，有些则是指向0，因此后续入栈出栈…...

编程日记 2023/9/3 12:48:44

【Spark】Pyspark RDD

1. RDD算子1.1 文件 <> rdd对象1.2 map、foreach、mapPartitions、foreach Partitions1.3 flatMap 先map再解除嵌套1.4 reduceByKey、reduce、fold 分组聚合1.5 mapValue 二元组value进行map操作1.6 groupBy、groupByKey1.7 filter、distinct 过滤筛选1.8 union 合并1.9 …...

编程日记 2023/9/3 12:47:43

数学建模：Logistic回归预测

🔆 文章首发于我的个人博客：欢迎大佬们来逛逛数学建模：Logistic回归预测 Logistic回归预测 logistic方程的定义： x t 1 c a e b t x_{t}\frac{1}{cae^{bt}}\quad xtcaebt1 d x d t − a b e b t ( c a e b t ) 2 >…...

编程日记 2023/9/3 12:46:42

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/11/6 5:46:16

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2026/1/22 6:07:24

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

python/java环境配置

环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13