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

Django传递dataframe对象到前端网页

news 2025/11/1 10:45:28

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

编程日记 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&#xff0c;也就是我们通常说的new 按照Spring上下文对实例化的Bean进行配置&#xff0c;也就是IOC注入 如果这个Bean实现了BeanNameAware接口&#xff0c;会调用它实现的setBeanName(String beanId)方法&#xff0c;此处传递的是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 现已推出公开测试版&#xff0c;承诺为这款广受欢迎的免费开源截屏和流媒体应用程序提供多项令人兴奋的新功能&#xff0c;以及大量其他更改和错误修复。 OBS Studio 30.0 承诺在 Linux 上支持英特尔 QSV&#xff08;快速同步视频&#xff09;、WHIP/WebRT…...

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

springboot整合SpringSecurity

先写了一个配置类 给这个访问路径&#xff0c;加上角色权限 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

直接进入正题&#xff0c;我在搭建elk日志&#xff0c;使用最简单的log4j2 socket json格式 输出到logstash. 但是logstash报错如下&#xff1a; [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的经历

信息收集 某企业提供信息&#xff1a;企业官网的真实外网ip&#xff0c;内网ip 企业官网比较硬&#xff0c;从控股超过51%的子公司入手 通过企查查找到一堆控股高的子公司&#xff0c;通过ICP/IP地址/域名信息备案管理系统查找子公司官网&#xff0c;收集二级域名。通过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

如何让看书变听书？

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

编程日记 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&#xff1f;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 列表推导式使得创建特定列表的方式更简洁。常见的用法为&#xff0c;对序列或可迭代对象中的每个元素应用某种操作&#xff0c;用生成的结果创建新的列表&#xff…...

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

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

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

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

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

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

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

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

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

编程日记 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回归预测

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

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/10/31 11:15:15

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/10/30 22:15:40

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/10/1 1:44:36

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/10/28 7:44:13

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/10/28 10:00:33

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/10/28 11:52:32

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/10/29 17:36:05

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/10/27 18:29:26

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/10/30 15:48:47