基于Flask框架搭建简易可视化网页

已于 2024-12-10 00:28:52 修改
阅读量1.9k 收藏 31
点赞数 29
文章标签： flask python 后端 数据可视化 echarts
于 2024-12-10 00:15:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45823871/article/details/144359336
版权

简易可视化网页

前言

Flask 是一个用 Python 编写的轻量级 Web 应用框架。它是由 Armin Ronacher 开发的，并于 2010 年首次发布。Flask 以其简单性和灵活性而著称，非常适合开发小型到中型的 Web 应用程序。

环境准备

  1. Flask下载

在Python环境中使用 pip 安装 Flask：

pip install flask

Anaconda Shell
Anaconda Prompt Shell

模板结构

在 Flask 中，模板是用来生成动态 HTML 页面的一种方式。模板文件通常放在项目的 templates 文件夹内，这是 Flask 默认查找模板的地方，templates 文件夹不能改为其他名字，这将引起项目无法运行。
templates 文件夹在整个flask项目中的位置如下：

/项目文件夹
    app.py
    /templates
        base.html
        index.html
    /static
        /css
        /js
        /image

本次案例:
文件结构
本次案例中，index.html 和 base.html 都位于 templates 文件夹内，它们都被称为“模板”。

一、编写 app.py

  1. 从 flask 模块中导入必要的库
from flask import Flask, request, render_template, redirect
app = Flask(__name__) # 创建名为 app 的Flask应用实例
模块说明
Flask用于创建应用实例
request获取请求数据
render_template渲染HTML模板
redirect重定向路由
  1. 定义主页路由 /
@app.route('/') 
def index():
    return render_template('index.html')
  • 定义了主页路由 / ，当用户访问根URL时，会触发 index() 函数。
  • index 函数使用 render_template 方法来渲染名为 index.html 的HTML页面。
  1. 定义登录页路由 login
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        # 进行登录逻辑处理
        if username == 'admin1' and password == '123':
            return redirect('/charts1')
        elif username == 'admin2' and password == '123':
            return redirect('/charts2')
        else:
            return '账号或密码错误！'
    else: # 否则即当前接收GET请求时，正常返回网页
        return render_template('login.html')
  • 定义/login路由，它可以接受GET和POST两种HTTP请求方法。
  • 如果是POST请求（提交表单），它将从表单数据中获取用户名request.form['username']和密码request.form['password'] ，并进行简单的账号密码判定。如果匹配，则重定向到相应的图表页面(/charts1、/charts2)；如果不匹配，则返回一个错误信息。
  • 如果是GET请求，则表示用户正在请求登录页面，因此它将渲染并返回login.html模板。
  1. 定义图表路由 charts1、charts2
@app.route('/charts1')
def charts1():
    return render_template('charts1.html')
@app.route('/charts2')
def charts2():
    return render_template('charts2.html')
  • charts1、charts2分别对应 admin1 和 admin2账户
  • 每个个函数都使用render_template方法来渲染各自的HTML页面。
    • render_template(‘charts1.html’)
    • render_template(‘charts2.html’)
  1. 启动 flask 内置服务器
if __name__ == '__main__':
    app.run('0.0.0.0', debug=True)
  • 当脚本直接运行时（而不是被作为模块导入），此时会启动Flask的内置服务器，使应用可以在所有网络接口上监听连接请求（通过指定’0.0.0.0’）。
  • debug=True参数启用了调试模式，这样在开发过程中，任何代码修改都会自动重新加载服务器，并且在遇到错误时提供有用的调试信息。

app.py代码

from flask import Flask, request, render_template, redirect
app = Flask(__name__)

# 定义主页
@app.route('/')
def index():
    return render_template('index.html')

# 定义一个处理登录请求的路由
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        # 进行登录逻辑处理
        if username == 'admin1' and password == '123':
            return redirect('/charts1')
        elif username == 'admin2' and password == '123':
            return redirect('/charts2')
        else:
            return '账号或密码错误！'
    else: # 否则即当前接收GET请求时，正常返回网页
        return render_template('login.html')

# 定义图形界面的路由
@app.route('/charts1')
def charts1():
    return render_template('charts1.html')
@app.route('/charts2')
def charts2():
    return render_template('charts2.html')

if __name__ == '__main__':
    app.run('0.0.0.0', debug=True)

运行调式结果
配置路由部分

二、HTML部分

1. login.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- 引入Bootstrap CSS -->
    <link href="../static/css/bootstrap.css" rel="stylesheet">
    <style>
        .login-container {
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
    </style>
</head>

<body>
    <div class="d-flex flex-column justify-content-center align-items-center min-vh-100">
        <div class="login-container">
            <h3 class="text-center mb-4">数据大屏登录</h3>
            <form action="/login" method="POST">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
        </div>
    </div>
</body>

</html>

2. index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单主页</title>
    <!-- 引入Bootstrap CSS -->
    <link href="../static/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div class="container d-flex flex-column justify-content-center align-items-center min-vh-100">
        <h1>数据可视化系统</h1>
        <a href="{{ url_for('login') }}" class="btn btn-primary">登录</a>
    </div>
</body>
</html>

注： 在点击 a标签 登录时，使用了 Flask 内置的 url_for 函数，该函数会根据给定的视图函数(app.py中 login()函数)名称来跳转到对应的 URL。 url_for 只能在 Flask 的 Jinja2 模板环境中工作，Jinja2 是 Flask 默认使用的模板引擎。

3. base_mission.html —父模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src='../static/js/echarts.min.js'></script>
</head>
<body>
    <h1>这是用户【{% block h1 %}用户名{% endblock %}】的图形界面</h1>
    <div id="main" style="width: 800px; height: 400px;"></div>
    {% block content %}echarts代码{% endblock %}
</body>
</html>

4. charts1、charts2 图表 —子模板

charts1.html

{% extends 'base_mission.html' %}
{% block title %}111{% endblock %}
{% block h1 %}admin1{% endblock %}
{% block content %}
<script>
    // 选择DOM并创建echarts图形对象
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    // 配置项
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '60%', // 指定柱子的宽度
            barCategoryGap: '15%', // 控制柱子之间的默认间隙
            emphasis: {
                focus: 'self' // 只聚焦（不淡出）当前高亮的数据的图形。
            }
        }]
    };
    // 配置项配置到图形中
    myChart.setOption(option);
</script>
{% endblock %}

charts2.html

{% extends 'base_mission.html' %}
{% block title %}111{% endblock %}
{% block h1 %}admin2{% endblock %}
{% block content %}
<script>
    // 选择DOM并创建echarts图形对象
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    // 配置项
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            smooth: true, // 线条平滑处理
            areaStyle: {} // 开启面积填充
        }]
    };
    // 配置项配置到图形中
    myChart.setOption(option);
</script>
{% endblock %}

使用flask中模板继承的方式实现两个echarts(charts1、charts2)图形的显示

5. 静态文件下载 /static

css样式下载：
* bootstrap.css
* Bootstrap中文文档

js下载：
* echarts.min.js
* 在线定制

最终效果

打开链接
在这里插入图片描述

主页
在这里插入图片描述

登录页
在这里插入图片描述
charts1、charts2
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

LZYuu0
关注
基于Flask开发简易数据可视化网页
m0_50542140的博客
12-22 423
本文介绍了如何使用Flask框架结合Pandas、Matplotlib、Seaborn和Plotly等库来开发一个简易的数据可视化网页。通过这种方式，你可以轻松地将数据分析结果以图表的形式展示给用户，提高数据的可读性和用户体验。重新回答。
Flask框架
prigilm的博客
11-04 8929
Flask框架 1、flask框架初识 Flask是一个Python编写的Web 微框架，让我们可以使用Python语言快速实现一个网站或Web服务， 在介绍Flask之前首先来聊下它和Django的联系以及区别，django个大而全的web框架，它内置许多 模块，flask是一个小而精的轻量级框架，Django功能大而全，Flask只包含基本的配置, Django的 一站式解决的思路，能让开发者不用在开发之前就在选择应用的基础设施上花费大量时间。Django 有模板，表单，路由，基本的数据库管理等等内建功
【Python应用】爬虫教程：利用python-Flask框架搭建本地数据可视化网站
有朋自远方来，不亦乐乎。
04-28 1万+
成果展示： （1）网站首页： （2）电影表单页 （3） 电影评分页 （4） 词频统计页 （5）团队页面 接下来让我们看看上述网站是如何完成的： 首先简单介绍一下Flask框架： Flask主要功能有两个： （1）Werkzeug——路由转换 （2）jinja2——框架渲染 1、环境搭建： 下载python-Flask扩展包 pip install flask 将Flask模块导入程序中： from flask import Flask ..
Python进阶教程丨使用Flask搭建你的个人网站
2301_78095812的博客
04-15 947
当我第一次需要搭建一个网站后端服务时，Django庞大的体系让我望而生畏，而则像一阵清风，让我惊讶于它的简洁与优雅。仅仅几行代码，一个功能完备的web服务就能运行起来。正是这种"提供你需要的，不强加你不需要的"的设计理念，让Flask在Python Web框架中独树一帜。今天，我们将深入探索Flask的核心原理、工作机制和应用实践，让你真正理解这个"微框架"的强大魅力。
Python：使用web框架Flask搭建网站
qq_44304677的博客
04-19 1553
Flask是第一个第三方库。Flask-SQLAlchemy 数据库 ORM 支持 pip install Flask-SQLAlchemy。Flask-SocketIO WebSocket 支持 pip install Flask-SocketIO。Flask-RESTful 快速构建 RESTAPI pip install Flask-RESTful。Flask-Login 用户认证与会话管理 pip install Flask-Login。书籍推荐：《Flask Web开发实战》（李辉）
毕业设计——毕业设计——基于flask的气象数据可视化（二）（详细解读）（含登录页面，数据连接到数据库，可实时更新，内涵python爬虫）
最新发布
weixin_66547608的博客
05-15 483
基于flask的气象数据可视化（含登录页面，数据连接到数据库，可实时更新，内涵python爬虫）
基于Python的Flask的开发实战（第二节程序的基本结构）
dengliufu9464的博客
05-16 222
1.初始化 所有的flask程序都必须创建一个程序实例 web服务器使用wsgi接口协议，把接收客户端的请求都转发给这个程序实例来进行处理。这个程序实例就是flask对象 from flask import Flask app = Flask(__name__)#__name__决定程序的根目录，以便以后能找到相对于程序根目录的资源文件位置 2.路由和视图函数 程...
基于flask实现疫情可视化监控系统
热门推荐
m0_52910844的博客
11-06 1万+
目录 第一章 绪论 2 1.1 课题背景 2 1.2 及意义 2 第二章 相关理论及技术 2 2.1 flask框架概述 2 2.2 Layui框架概述 2 2.3 开发工具 2 2.3.1 MySQL数据库技术 2 2.3.2 pycharm技术 2 2.3.3 .爬虫技术 2 2.3.4 Echarts技术 2 第三章 系统需求分析 2 3.1 业务流程调研及分析 2 3.2 系统功能需求分析 2 3.2.1 系统安全需求 2 3.2.2 用户角色定义 2 3.3 解决方案的提出与分析 2 3.4
FROONT – 超棒的可视化响应式网页设计工具
weixin_34194379的博客
06-24 341
　　FROONT 是一个基于 Web 的设计工具，在浏览器中运行，使得各类可视化设计的人员都能进行响应式的网页设计，即使是那些没有任何编码技能的设计师。FROONT 使得响应式网页设计能够可视化操作，能够在浏览器中使用直观的拖放工具进行设计。 您可能感兴趣的相关文章 Verlet-js：超炫的开源 JavaScript 物理引擎推荐 jQuery.mmenu – 用于移动 Web 项...
从安装软件到flask框架搭建可视化大屏（一）——创建一个flask页面，零基础也可以学会
weixin_66547608的博客
02-16 1443
img src="https://sso.xyafu.edu.cn/sso/img/text.png" alt="标语" class="slogan"> 和 <img src="https://www.xyafu.edu.cn/images/logo.png" alt="Logo" class="logo">：插入两个图片元素，分别显示标语和 logo，并通过 CSS 类名进行样式设置。这段代码是一个基于 Flask 模板引擎（如 Jinja2）的 HTML 模板文件，用于构建可视化系统的页面。
Flask框架入门（一）：基于Python-Flask框架搭建最简单的Web应用服务
青柠豆腐
08-09 3139
目录Flask环境安装准备工作安装Python安装Flask第一个Web应用服务 Flask环境安装 本篇文章将一步步教你如何在本次基于Flask框架搭建Python语言Web应用，在学习之前，需要了解最基本的Python语言相关知识。ps：大神清自动略过，本人也是新手，边学习，边交流。 准备工作 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 安装Python 撤销：Ctrl/Command + Z 重做：Ctr
用flask搭建了一个简易网站
10-30
基于python3.6开发。用flask搭建了一个简易网站，实现登录功能，注册功能，评论功能，发表文章功能，数据库连接功能，压缩包是完整项目代码。解压后可用，但需在自己电脑创建mysql数据库：zlktqa_demo
基于Flask框架的简易运维日志记录与图表展示设计源码
10-03
基于Flask框架的简易运维日志记录与图表展示系统，正是为了解决这一问题而设计。 Flask是一个轻量级的Python Web框架，它允许开发者快速搭建网站，并提供了路由、模板、表单处理等Web开发基础组件。该系统的开发...
Flask框架搭建简易数据可视化网页
01-17
为了建立一个简易的数据可视化网页，首先需要设置好项目的文件夹结构。通常情况下，会有一个`app.py`作为主要的应用入口文件，在同一目录下还需要有`templates`文件夹用来存储HTML模板以及`static`文件夹用于放置CSS...
数据可视化中Flask框架
2401_84239988的博客
12-09 1062
Flask 诞生于 Python 社区，秉持着 “小而美” 的设计理念，核心代码短小精悍，功能却不容小觑。它紧紧遵循 WSGI（Web Server Gateway Interface）这一 Web 应用规范，为 Python 开发者开辟了一条轻装上阵的 Web 开发通道。与 Django 相较，Django 仿若一座设施完备的现代化都市，内置数据库、表单系统、管理后台诸多模块，一应俱全；
flask应用框架
gendiao的专栏
02-02 262
flask 简介 Flask是一个用Python编写的Web应用程序微型框架，基于Werkzeug WSGI工具包和Jinja2模板引擎。 Werkzeug是一个WSGI（Web Server Gateway Interface，Web服务器网关接口WSGI））工具包，它实现了请求，响应对象和实用函数。jinja2是Python的一个流行的Web模板引擎，将模板与特定数据源组合以呈现动态网页。 f...
实战|Python爬虫并用Flask框架搭建可视化网站
xjt921122的博客
02-29 3886
大家好，我是J哥，也可以叫我菜J，专注原创，致力于用浅显易懂的语言分享网络爬虫、数据分析、可视化等干货，希望人人都能学到新知识。事情是这样的，最近呢，一直有朋友问我有没有什么办法将每天获得的最新数据进行可视化，并且实现可视化图表自动更新，解放双手。尤其对于金融行业，如果可以将每天获得的关键行情指标数据自建模型，然后将结果可视化至私有平台，实现每日更新，那确实是一件挺有意思的事情。这不，这位金融大佬就找到了我：其实解决的方案挺多，J哥简单总结了下：OK，分析完优缺点，那咱就开始实操吧。
基于Flask进行接口开发及测试
分享实践与思考
10-27 4909
一、环境准备 1、Flask Flask 是一个微型的 Python 开发的 Web 框架，基于WerkzeugWSGI工具箱和Jinja2模板引擎。 Flask使用BSD授权。 Flask也被称为“microframework”，因为它使用简单的核心，用extension增加其他功能。Flask没有默认使用的数据库、窗体验证工具。然而，Flask保留了扩增的弹性，可以用Flask-extension加入这些功能：ORM、窗体验证工具、文件上传、各种开放式身份验证技术。 Flask学习参考：Fla..
【附源码】基于flask框架网吧系统 (python+mysql+论文)
海彤程序设计
04-07 723
同时，系统还可以实现对网吧设备的管理，如电脑、网络设备等，确保设备正常运行，提高用户体验。通过这套系统的开发，可以提高网吧的管理水平，降低人力成本，提升服务质量，从而为网吧带来更好的经济效益和社会效益。PyCharm是一个强大的Python IDE，它提供了丰富的开发工具和插件支持，包括对Flask框架的友好支持。在数据库管理工具的选择上，使用了Navicat 11，这是一个用户友好且功能强大的数据库管理软件，它支持多种数据库系统，包括MySQL，并提供了图形化界面，使得数据库的管理和维护工作更加便捷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值