[Anne]在Dashboard中展示第二张报表

最新推荐文章于 2023-01-20 10:00:00 发布

林守中

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量189

点赞数

分类专栏： Anne 文章标签： flask python

本文链接：https://blog.csdn.net/charizard90/article/details/120307584

版权

本文介绍了如何在Dashboard中添加新用户报表，并通过提取共性部分进行代码重构，以提高效率。利用Flask的 Jinja2 模板引擎动态渲染HTML，简化页面生成，同时在Python中抽象路由管理，减少重复代码。

摘要由CSDN通过智能技术生成

本篇博客会先添加一张新用户相关的报表，然后提取两次添加报表相同的模块，对代码进行重构，方便之后的报表添加

展示新用户报表

对于一个应用来说新用户也是一个十分重要的观测数据
首先在数据库中新建一张new_user表并添加一些数据

CREATE TABLE new_user(
	`date` date,
	`province` varchar(20),
	`new_user` int,
	primary key(`date`, `province`)
);
INSERT INTO new_user VALUES
	('2021-01-01', 'Beijing', 10),
	('2021-01-01', 'Shanghai', 20),
	('2021-01-02', 'Beijing', 30);

按照日活报表相同的方法分别新增
new_user.js

$.ajax({
   
    url: "/data/new_user",
    type: "get",
    success: function (data) {
    
        let table = $('#new-user-table').DataTable();
        table.clear();
        let dataSet = [];
        for (let i = 0; i < data.length; ++i) {
   
            let rowSet = [];
            let detail = data[i];
            rowSet.push(detail["date"])
            rowSet.push(detail["province"])
            rowSet.push(detail["new_user"])
            dataSet.push(rowSet);
        }
        table.rows.add(dataSet).draw();
        table.columns.adjust().draw();
    },
});

new_user.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Anne</title>
        <link href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="{
    { url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <!-- Navbar Brand-->
            <a class="navbar-brand ps-3" href="/">Anne</a>
            <!-- Sidebar Toggle-->
            <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
        </nav>
        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <nav class