」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 僅使用 Python 建構前端

僅使用 Python 建構前端

發佈於2024-11-05
瀏覽:325

對於專注於後端的開發人員來說,前端開發可能是一項艱鉅的、甚至是噩夢般的任務。在我職業生涯的早期,前端和後端之間的界線是模糊的,每個人都被期望能夠處理這兩者。 CSS,尤其是,是一場持續不斷的鬥爭;這感覺像是一個不可能的任務。

雖然我喜歡前端工作,但 CSS 對我來說仍然是一個複雜的挑戰,特別是因為我是透過反覆試驗才學會它的。 Peter Griffin 努力打開百葉窗的表情包完美地捕捉到了我學習 CSS 的經歷。
Building a frontend using only Python

但今天,一切都改變了。像 Streamlit 這樣的工具已經為像我這樣喜歡舒適的終端黑屏的開發者帶來了徹底的遊戲變革。與看起來像是來自外星人的神秘消息的代碼行搏鬥的日子已經一去不復返了(看著你,CSS!)。
正如《兩分鐘論文》中的卡羅利·茲索爾奈-費赫博士經常說的那樣:「活著真是太美好了!」
借助 Streamlit,您可以僅使用 Python 程式碼建立整個 Web 應用程式。
想看看它的實際效果嗎?繫好安全帶,因為我即將分享我使用這個很棒的工具為 SQLZilla 創建前端的嘗試。

要安裝它,只需打開終端並施放這個咒語:

pip install streamlit

(或您可以將其新增至您的requirements.txt檔案中。)

建立檔案 app.py 並新增以下程式碼片段以顯示「SQLZilla」標題:

import streamlit as st

st.title("SQLZilla")

主持演出!

再次打開終端並輸入以下命令來啟動您的創建:

streamlit run app.py

瞧!您的 Streamlit 應用程式應該會出現在您的 Web 瀏覽器中,並自豪地顯示標題「SQLZilla」。

使用圖像方法添加圖像,為了將其集中,我只需創建 3 列並添加到中心(真丟臉)

   st.title("SQLZilla")

   left_co, cent_co, last_co = st.columns(3)
   with cent_co:
       st.image("small_logo.png", use_column_width=True)

要管理配置和查詢結果,您可以使用會話狀態。以下是保存配置值和儲存查詢結果的方法:

if 'hostname' not in st.session_state:
    st.session_state.hostname = 'sqlzilla-iris-1'
if 'user' not in st.session_state:
    st.session_state.user = '_system'
if 'pwd' not in st.session_state:
    st.session_state.pwd = 'SYS'
# Add other session states as needed

要將 SQLZilla 連接到 InterSystems IRIS 資料庫,您可以使用 SQLAlchemy。首先,安裝 SQLAlchemy:

pip install sqlalchemy

然後,在 app.py 檔案中設定連線:

from sqlalchemy import create_engine
import pandas as pd

# Replace with your own connection details
engine = create_engine(f"iris://{user}:{password}@{host}:{port}/{namespace}")

def run_query(query):
    with engine.connect() as connection:
        result = pd.read_sql(query, connection)
        return result

連接到資料庫後,您可以使用 Pandas 和 Streamlit 顯示查詢結果。以下是如何在 Streamlit 應用程式中顯示 DataFrame 的範例:

if 'query' in st.session_state:
    query = st.session_state.query
    df = run_query(query)
    st.dataframe(df)

為了讓您的應用程式更具互動性,您可以在查詢更改時使用 st.rerun() 刷新應用程式:

if 'query' in st.session_state and st.button('Run Query'):
    df = run_query(st.session_state.query)
    st.dataframe(df)
    st.rerun()

您可以找到各種可以使用的 Streamlit 元件。在 SQLZilla 中,我新增了一個名為 Streamlit-code-editor 的 ACE 程式碼編輯器版本:

from code_editor import code_editor

editor_dict = code_editor(st.session_state.code_text, lang="sql", height=[10, 100], shortcuts="vscode")

if len(editor_dict['text']) != 0:
    st.session_state.code_text = editor_dict['text']

由於SQLZilla助手是用Python寫的,所以我只是呼叫該類別:

from sqlzilla import SQLZilla

def assistant_interaction(sqlzilla, prompt):
    response = sqlzilla.prompt(prompt)
    st.session_state.chat_history.append({"role": "user", "content": prompt})
    st.session_state.chat_history.append({"role": "assistant", "content": response})

    if "SELECT" in response.upper():
        st.session_state.query = response

    return response

恭喜!您已經建立了自己的 SQLZilla。繼續探索 Streamlit 並透過更多功能增強您的應用程式。如果您喜歡 SQLZilla,請投票給這個將文字轉換為查詢的令人難以置信的助手!

版本聲明 本文轉載於:https://dev.to/intersystems/building-a-frontend-using-only-python-2ndn?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Polyfills-填充物還是縫隙? (第 1 部分)
    Polyfills-填充物還是縫隙? (第 1 部分)
    幾天前,我們在組織的 Teams 聊天中收到一條優先訊息,內容如下:發現安全漏洞 - 偵測到 Polyfill JavaScript - HIGH。 舉個例子,我在一家大型銀行公司工作,你必須知道,銀行和安全漏洞就像主要的敵人。因此,我們開始深入研究這個問題,並在幾個小時內解決了這個問題,我將在下...
    程式設計 發佈於2024-11-05
  • 移位運算子與位元簡寫賦值
    移位運算子與位元簡寫賦值
    1。移位運算子 :向右移動。 >>>:無符號右移(零填充)。 2.移位運算子的一般語法 value > num-bits:將值位向右移動,保留符號位。 value >>> num-bits:透過在左側插入零將值位向右移動。 3.左移 每次左移都會導致該值的所有位元向左移動一位。 右側插入0...
    程式設計 發佈於2024-11-05
  • 如何使用 VBA 從 Excel 建立與 MySQL 資料庫的連線?
    如何使用 VBA 從 Excel 建立與 MySQL 資料庫的連線?
    VBA如何在Excel中連接到MySQL資料庫? 使用VBA連接到MySQL資料庫嘗試連接使用 VBA 在 Excel 中存取 MySQL 資料庫有時可能具有挑戰性。在您的情況下,您在嘗試建立連線時遇到錯誤。 若要使用 VBA 成功連線至 MySQL 資料庫,請依照下列步驟操作:Sub Connec...
    程式設計 發佈於2024-11-05
  • 測試自動化:使用 Java 和 TestNG 進行 Selenium 指南
    測試自動化:使用 Java 和 TestNG 進行 Selenium 指南
    测试自动化已成为软件开发过程中不可或缺的一部分,使团队能够提高效率、减少手动错误并以更快的速度交付高质量的产品。 Selenium 是一个用于自动化 Web 浏览器的强大工具,与 Java 的多功能性相结合,为构建可靠且可扩展的自动化测试套件提供了一个强大的框架。使用 Selenium Java 进...
    程式設計 發佈於2024-11-05
  • 我對 DuckDuckGo 登陸頁面的看法
    我對 DuckDuckGo 登陸頁面的看法
    「為什麼不穀歌一下呢?」是我在對話中得到的常見答案。谷歌的無所不在甚至催生了新的動詞「Google」。但是我寫的程式碼越多,我就越質疑我每天使用的數位工具。也許我對谷歌使用我的個人資訊的方式不再感到滿意。或者我們很多人依賴谷歌進行互聯網搜索和其他應用程序,說實話,我厭倦了在搜索某個主題或產品後彈出的...
    程式設計 發佈於2024-11-05
  • 為什麼 Turbo C++ 的「cin」只讀取第一個字?
    為什麼 Turbo C++ 的「cin」只讀取第一個字?
    Turbo C 的「cin」限制:僅讀取第一個單字在Turbo C 中,「cin」輸入運算符有一個處理字元數組時的限制。具體來說,它只會讀取直到遇到空白字元(例如空格或換行符)。嘗試讀取多字輸入時,這可能會導致意外行為。 請考慮以下 Turbo C 代碼:#include <iostream....
    程式設計 發佈於2024-11-05
  • 使用 Buildpack 建立 Spring Boot 應用程式的 Docker 映像
    使用 Buildpack 建立 Spring Boot 應用程式的 Docker 映像
    介绍 您已经创建了一个 Spring Boot 应用程序。它在您的本地计算机上运行良好,现在您需要将该应用程序部署到其他地方。在某些平台上,您可以直接提交jar文件,它将被部署。在某些地方,您可以启动虚拟机,下载源代码,构建并运行它。但是,大多数时候您需要使用容器来部署应用程序。大...
    程式設計 發佈於2024-11-05
  • 如何保護 PHP 程式碼免於未經授權的存取?
    如何保護 PHP 程式碼免於未經授權的存取?
    保護PHP 代碼免於未經授權的訪問保護PHP 軟體背後的智慧財產權對於防止其濫用或盜竊至關重要。為了解決這個問題,可以使用多種方法來混淆和防止未經授權的存取您的程式碼。 一個有效的方法是利用 PHP 加速器。這些工具透過快取頻繁執行的部分來增強程式碼的效能。第二個好處是,它們使反編譯和逆向工程程式碼...
    程式設計 發佈於2024-11-05
  • React:了解 React 的事件系統
    React:了解 React 的事件系統
    Overview of React's Event System What is a Synthetic Event? Synthetic events are an event-handling mechanism designed by React to ach...
    程式設計 發佈於2024-11-05
  • 為什麼在使用 Multipart/Form-Data POST 請求時會收到 301 Moved Permanently 錯誤?
    為什麼在使用 Multipart/Form-Data POST 請求時會收到 301 Moved Permanently 錯誤?
    Multipart/Form-Data POSTsMultipart/Form-Data POSTs嘗試使用multipart/form-data POST 資料時,可能會出現類似所提供的錯誤訊息遭遇。理解問題需要檢視問題的構成。遇到的錯誤是 301 Moved Permanently 回應,表示資...
    程式設計 發佈於2024-11-05
  • 如何使用日期和時間物件來確定 PHP 中的時間邊界?
    如何使用日期和時間物件來確定 PHP 中的時間邊界?
    確定PHP 中的時間邊界在此編程場景中,我們的任務是確定給定時間是否在預先定義的範圍內。具體來說,我們得到三個時間字串:當前時間、日出和日落。我們的目標是確定當前時間是否位於日出和日落的邊界時間之間。 為了應對這個挑戰,我們將使用 DateTime 類別。這個類別使我們能夠表示和操作日期和時間。我們...
    程式設計 發佈於2024-11-05
  • 如何使用 CSS 變換比例修復 jQuery 拖曳/調整大小問題?
    如何使用 CSS 變換比例修復 jQuery 拖曳/調整大小問題?
    jQuery 使用CSS 轉換縮放拖曳/調整大小問題: 當應用CSS 轉換時,特別是變換:矩陣(0.5, 0, 0, 0.5, 0, 0);,對於一個div 並在子元素上使用jQuery 的draggable() 和resizing() 插件,jQuery 所做的更改變得與滑鼠位置「不同步”。 解決...
    程式設計 發佈於2024-11-05
  • 如何修復 TensorFlow 中的「ValueError:無法將 NumPy 陣列轉換為張量(不支援的物件類型浮點)」錯誤?
    如何修復 TensorFlow 中的「ValueError:無法將 NumPy 陣列轉換為張量(不支援的物件類型浮點)」錯誤?
    TensorFlow:解決「ValueError: Failed to Convert NumPy Array to Tensor (Unsupported Object Type Float)」工作時遇到的常見錯誤TensorFlow 的錯誤是「ValueError:無法將NumPy 陣列轉換為T...
    程式設計 發佈於2024-11-05
  • 如何有效率判斷本機儲存項目是否存在?
    如何有效率判斷本機儲存項目是否存在?
    確定本地儲存專案是否存在使用 Web 儲存時,在存取或修改特定專案之前驗證它們是否存在至關重要。在本例中,我們想要確定 localStorage 中是否設定了特定項目。 當前方法檢查項目是否存在的當前方法似乎是:if (!(localStorage.getItem("infiniteScr...
    程式設計 發佈於2024-11-05
  • Java 中的原子是什麼?了解 Java 中的原子性和線程安全
    Java 中的原子是什麼?了解 Java 中的原子性和線程安全
    1. Java 原子簡介 1.1 Java 中什麼是原子? 在Java中,java.util.concurrent.atomic套件提供了一組支援對單一變數進行無鎖定線程安全程式設計的類別。這些類別統稱為原子變數。最常使用的原子類別包括 AtomicInteger ...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3