Streamlit应用中构建多页面(三):两种方案(上)

简介: Streamlit应用中构建多页面(三):两种方案

1 前言


首先,感谢各位读者阅读之前的一篇博文Streamlit的第一个应用(二),该博文详细介绍了如何使用Streamlit框架来搭建数据应用程序。🎉 在那篇博文中,我们强调了Streamlit的简单易用性和强大功能,以及如何通过编写Python代码快速创建交互式应用。🚀


在这篇博文中,我们将进一步扩展之前的内容,并专注于Streamlit多页面应用的构建。多页面是一种重要且常见的应用程序设计方案,它允许我们在一个应用程序中使用多个页面来组织和呈现不同的内容或功能。。通过多页面,我们可以更好地组织和管理复杂的应用,使用户能够轻松地与不同的功能模块进行交互。📚🔗


但是,多页面是什么呢?在简单的术语中,多页面是指将一个大型应用程序拆分为多个独立的页面,每个页面专注于不同的任务或功能。这种设计模式的好处是明显的:它提高了应用的可维护性、可扩展性和用户体验。💪✨


在本博文中,我们将介绍两种不同的方案来构建Streamlit多页面应用。每种方案都有其独特的特点和用途;通过掌握这些方案,您将能够根据自己的需求选择最适合的方法。


无论您是数据科学家、开发人员还是对数据应用程序感兴趣的读者,希望这篇博文能为您学习和掌握Streamlit多页面应用的设计和实现提供指导和启发。📝💡


在进入具体方案之前,让我们先回顾一下Streamlit的基础知识,确保我们对Streamlit的核心概念和用法有一个清晰的理解。然后,我们将深入研究两个不同的多页面方案,并比较它们的优缺点。⚙️⚖️


请继续阅读,探索Streamlit多页面应用的令人兴奋和灵活的可能性!🔍💫


2 第一种方案:使用Session State实现多页面交互


2.1 Session State简介


在介绍具体的设计方案之前,让我们先回顾一下Streamlit的Session State功能。Session State是Streamlit中用于在不同页面之间传递和保存状态数据的一种机制。通过Session State,我们可以在应用程序的整个生命周期中维护和访问特定于会话的变量。这意味着我们可以在不同页面之间共享和使用相同的变量值,从而实现多页面之间的交互和数据传递。


2.2 多页面应用的基本结构


在使用Session State构建多页面应用之前,让我们先了解一下多页面应用的基本结构。一个典型的多页面应用通常包括以下几个组成部分:


导航栏:用于切换页面的导航栏,可以是按钮、链接或下拉菜单等形式。

页面内容:不同页面的具体内容和功能模块,可以通过导航栏进行切换。

状态管理:保持和管理不同页面之间的状态数据,确保用户在切换页面时数据不会丢失。


2.3 实现多页面交互的代码示例


下面是一个使用Session State实现多页面交互的简单代码示例:

import streamlit as st
# 设置初始页面为Home
session_state = st.session_state
session_state['page'] = 'Home'
# 导航栏
page = st.sidebar.radio('Navigate', ['Home', 'About'])
if page == 'Home':
    st.title('Home Page')
    # 在Home页面中显示数据和功能组件
elif page == 'About':
    st.title('About Page')
    # 在About页面中显示数据和功能组件

通过以上代码,我们创建了一个导航栏,其中包含了两个页面选项:Home和About。根据用户选择的页面,在相应的代码块中显示内容和功能组件。


如果页面内容构建的太过复杂,单纯的 if-else 语句已经无法满足应用的构建需求,这时候可以使用函数来构建。

import streamlit as st
def page_home():
    st.title('Home Page')
    # 在Home页面中显示数据和功能组件
def page_about():
    st.title('About Page')
    # 在About页面中显示数据和功能组件
def main():
    # 设置初始页面为Home
    session_state = st.session_state
    if 'page' not in session_state:
        session_state['page'] = 'Home'
    # 导航栏
    page = st.sidebar.radio('Navigate', ['Home', 'About'])
    if page == 'Home':
        page_home()
    elif page == 'About':
        page_about()
if __name__ == '__main__':
    main()


ps:请记住运行项目需要在终端执行以下代码:

streamlit run 你的代码文件.py


通过使用函数来构建多页面应用,我们可以更好地组织和管理不同页面的代码逻辑,并提高代码的可重用性。在上述示例代码中,我们定义了三个函数:


page_home():用于显示Home页面的内容和功能。

page_about():用于显示About页面的内容和功能。

main():作为应用程序的主函数,根据用户导航栏的选择调用对应的页面函数。

在main()函数中,我们首先检查Session State中是否存在page键,如果不存在则将其初始化为Home。接着根据导航栏的选择,调用相应的页面函数进行内容显示。


2.4 Session State机制的优缺点


优点:


简单易用:Streamlit的Session State机制使得在不同页面之间传递和保存状态数据变得非常简单。只需使用字典来存储和访问状态数据,无需复杂的配置或额外的库。


跨页面数据共享:通过Session State,我们可以在应用程序的整个生命周期中保存和访问特定于会话的变量。这使得在多个页面之间共享数据变得轻松,可以传递复杂的数据结构,如字典、列表等。


可扩展性:使用Session State,我们可以轻松地在应用程序中添加新的页面,并在不同页面之间保持数据的一致性。这使得应用程序更易于管理和维护,可以随着需求的增长进行扩展和修改。


状态持久化:通过Streamlit的Session State机制,我们可以在刷新应用程序或重新运行应用程序时保留状态数据。这对于用户来说非常方便,他们可以在应用程序的不同会话之间保持他们的工作状态。


缺点:


内存消耗:由于Session State数据存储在内存中,当应用程序的状态数据变得庞大时,内存消耗可能会较大。这可能会限制应用程序的可伸缩性和性能。


无持久化方案:Session State数据存储在应用程序的内存中,并且仅在应用程序运行期间存在。因此,当应用程序停止运行或重新启动时,Session State数据将丢失。如果需要长期存储数据,需要使用其他机制,如数据库或文件系统。


难以调试:由于Session State是在应用程序的多个页面之间传递和共享数据,当出现问题时,追踪和调试可能会比较困难。特别是在复杂的多页面应用程序中,正确地处理和管理Session State变量可能会变得复杂。


3 第二种方案:Streamlit内置多页面方案(更为推荐)


随着应用程序逐渐庞大,将其组织成多个页面变得非常有用。这样一来,开发者可以更轻松地管理应用程序,用户也能更方便地浏览。Streamlit 提供了一种无障碍的方式来创建多页面应用程序。页面会自动显示在漂亮的导航小部件中,放置在应用程序的侧边栏,用户点击页面时,无需重新加载前端,使应用程序浏览速度极快!

Streamlit的第一个应用(二)中,我们创建了一个“单页面应用程序”,用于探索纽约市的 Uber 公共数据集,分析乘客上车和下车的情况。在本文中,让我们学习如何创建多页面应用程序。一旦我们掌握了创建多页面应用程序的基础知识,接下来的部分就会开始亲自动手,将其应用到我们自己的应用程序中!


3.1 如何运行多页面应用程序 🚀


运行多页面应用程序与运行单页面应用程序完全相同。运行多页面应用程序的命令如下:

streamlit run [入口文件]

📂 “入口文件” 是应用程序向用户展示的第一个页面。一旦你向应用程序添加了多个页面,入口文件将出现在侧边栏的顶部。你可以将入口文件视为应用程序的 “主页面”。举个例子,假设你的入口文件是 Home.py。那么,要运行你的应用程序,你可以执行以下命令:

streamlit run Home.py

这将启动你的应用程序,并执行 Home.py 文件中的代码。然后你会看到你的应用程序在本地服务器上运行起来,准备好通过浏览器进行访问。🌐✨


请注意,你可以根据自己的需求和具体情况来制定入口文件和其他页面文件的命名方式。确保多页面应用程序的每个页面都有其独特的名称,以便在应用程序中进行正确的导航和路由。现在你已经掌握了运行多页面应用程序的技巧,是时候让你的应用程序在互联网上展现它的魅力了!快来展示你的创意吧!🎉💡


3.2 添加页面 📄


创建好入口文件后,你可以通过在入口文件所在目录的相对位置上创建文件来添加更多页面。比如说,如果你的入口文件是 Home.py,那么你可以创建一个文件来定义 “关于” 页面。下面是一个多页面应用程序的有效目录结构示例:

Home.py  # 这是你用 "streamlit run" 命令来运行的文件
└─── pages/  # 这是存放其他页面文件的目录
  └─── About.py # 这是一个页面
  └─── 2_Page_two.py # 这是另一个页面
  └─── 3_😎_three.py # 这也是一个页面


⭐小贴士: 当在文件名中添加表情符号时,最佳实践是在文件名前面添加编号前缀,这样可以更方便在终端中使用自动补全功能。因为终端的自动补全功能有时可能对 Unicode(即表情符号的表示方式)感到困惑。

页面是通过创建目录中的文件来定义的。基于下面的规则,页面文件的文件名将会在侧边栏中转换为页面名称。例如,文件名 About.py 会在侧边栏中显示为 “About”,2_Page_two.py 会显示为 “Page two”,3_😎_three.py 则会显示为 “😎 three”。


目录结构只有目录中的文件会作为页面加载。Streamlit会忽略目录和子目录中的所有其他文件。

请注意,确保为应用程序中的每个页面选择独一无二的文件名,并根据实际需求对文件和目录进行适当命名。这样可以确保你的多页面应用程序正确导航和定位到每个页面。现在你已经掌握了添加页面的方法,是时候为你的应用程序添加更多精彩内容了!快来展示你的创意吧!🎉💡


相关文章
|
测试技术 API 网络架构
FastAPI(40)- 大型应用程序的项目拆分
FastAPI(40)- 大型应用程序的项目拆分
1018 1
FastAPI(40)- 大型应用程序的项目拆分
|
移动开发 JavaScript
mpvue项目(组件)迁移指南、示例及资源汇总
首先,为什么要从mpvue转uni-app?因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高、支持平台更多(支持H5和App)。这里有详细的评测https://juejin.im/post/5ca1736af265da30ae314248 然后进入正题。
2451 0
|
2月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智能训练管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智能训练管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
机器学习/深度学习 JavaScript 前端开发
机器学习模型部署:使用Python和Vue搭建用户友好的预测界面
【4月更文挑战第10天】本文介绍了如何使用Python和Vue.js构建机器学习模型预测界面。Python作为机器学习的首选语言,结合Vue.js的前端框架,能有效部署模型并提供直观的预测服务。步骤包括:1) 使用Python训练模型并保存;2) 创建Python后端应用提供API接口;3) 利用Vue CLI构建前端项目;4) 设计Vue组件实现用户界面;5) 前后端交互通过HTTP请求;6) 优化用户体验;7) 全面测试并部署。这种技术组合为机器学习模型的实用化提供了高效解决方案,未来有望更加智能和个性化。
|
2月前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
7月前
|
Web App开发 JavaScript 前端开发
如何使用浏览器自动化框架Playwright开发“万媒易发”实现多平台自动发布文章?
作为一名程序员和开发者,我深知在多个媒体平台手动发布和管理文章的痛苦。因此,我决定使用Playwright浏览器自动化框架,开发一款名为“万媒易发”的工具,实现多平台自动发布文章。下面我将分享这款工具的开发过程和成果,希望能对大家有所启发和帮助。
|
11月前
|
数据库
深入理解Streamlit中的按钮行为(四):示例与最佳实践(上)
深入理解Streamlit中的按钮行为(四):示例与最佳实践
2083 0
|
11月前
|
数据可视化
Streamlit应用中构建多页面(三):两种方案(下)
Streamlit应用中构建多页面(三):两种方案
1185 0
|
11月前
|
数据库 索引
深入理解Streamlit中的按钮行为(四):示例与最佳实践(下)
深入理解Streamlit中的按钮行为(四):示例与最佳实践
1913 0
|
11月前
|
机器学习/深度学习 开发工具 计算机视觉
舌体分割的初步展示应用——依托Streamlit搭建demo
舌体分割的初步展示应用——依托Streamlit搭建demo
159 0