作者：劉早起

來源：早起Python

如何在線執(zhí)行 pandas 代碼感興趣，今天就簡單來說一下我探索這一功能的過程。

首先在設計這一功能時，需要先明確大致需求：

• ???用戶可以在當前頁面執(zhí)行
• 不同用戶之間獨立運行
• 不需要加載額外代碼或操作

其中最重要的一點就是用戶可以在當前網(wǎng)站、當前單元格執(zhí)行代碼，其次盡可能的減少其他操作。

其實為了實現(xiàn)這個功能，我探索了大半個月，不斷修改方案，刪掉了幾個寫了很久但是不能完美實現(xiàn)的代碼，幾度放棄，最后還是磕磕碰碰的做出來，下面是我的一些經(jīng)驗，僅供參考。

方案1

首先最簡單的思路就是用自己的服務器，前端寫一個輸入框，然后將用戶提交的代碼到后臺，執(zhí)行后再返回前端，就像這樣

但是思索了一番還是放棄了，除了要防止惡意用戶執(zhí)行sudo rm - rf /*之類的代碼，為了滿足第二個需求就要給每個用戶分配一定的空間，這就很吃服務器的配置，例如前天最高100+用戶同時運行，我的 4c8g 服務器肯定是帶不動的。

并且如果采取這個的方案，理論上可以實現(xiàn)，但除了升級服務器要錢，我也沒有開發(fā)類似產(chǎn)品的經(jīng)驗，時間成本不好預估，遂放棄。

方案2

之后又是一番面向 stackoverflow 編程，我了解到很多可以在線執(zhí)行代碼的網(wǎng)站，就像這樣

確實可以在線執(zhí)行一段代碼，但是除去我是否能做出來，如何控制權(quán)限等問題，這樣的網(wǎng)站主要是以執(zhí)行代碼為主，無法完成 pandas 教程的任務。

并且代碼不能預設置，只能進入頁面后手動輸入，本地數(shù)據(jù)也不好加載，而且執(zhí)行一次就要跳轉(zhuǎn)到一個新的頁面，十分繁瑣（寫一個爬蟲接口也是一個辦法，但是就太依賴對方網(wǎng)站），于是很快放棄了這條思路。

Jupyterhub

繼續(xù)一番搜索后，我發(fā)現(xiàn)了一個神器 —— Jupyterhub

如上圖架構(gòu)展示的一樣，使用Jupyterhub 可以給每個用戶分配一個獨立的Jupyter Notebook，并且無需考慮權(quán)限等問題，我也可以提前將代碼和數(shù)據(jù)進行預設。

但問題在于采取此方案無法滿足教程需求，因為全部內(nèi)容都需要放在 Jupyter Notebook中，整體上就是將 pandas300題做成了在線版，而我想要的是一個網(wǎng)站。

并且使用Jupyterhub不可避免的要進行一些 docker 或 k8s 操作，這也不是我熟悉的領(lǐng)域，雖熱在這條思路上走了一段時間，但還是放棄了。

JupyterBook

之后又是一番檢索，但無非都是上面幾種方案，在我感覺要放棄做這個網(wǎng)站時，無意中發(fā)現(xiàn)一個項目JupyterBook

簡單來說，他可以將你的 Jupyter Notebook 轉(zhuǎn)換為 html 頁面（基于 sphinx），并且一個很重要的特點就是可以在線、交互式執(zhí)行代碼。

具體怎么實現(xiàn)的呢？首先需要將你的項目上傳到一個公共資源平臺binder，這個網(wǎng)站會為你的項目創(chuàng)建一個鏡像，這樣可以方便給不同用戶使用

簡單來說，可以理解為將你的 Jupyter Notebook 掛在這個網(wǎng)站，別人就能去在線執(zhí)行，但是很明顯，我們都需要跳轉(zhuǎn)到這個頁面去使用，而我希望在當前頁面執(zhí)行代碼。

這時就需要在使用另一個項目（Thebe）

它使用JupyterLab API，通過加載一段JS代碼，再指定一個執(zhí)行后端（上面提到的binder），就可以在當前頁面執(zhí)行代碼。

聽起來很復雜，但是實現(xiàn)起來很簡單，上面我們說到，JupyterBook 是基于 Sphinx制作頁面的，所以只需要提前在配置 Sphinx時加載 sphinx_thebe插件即可，

至此，開頭我需求中的1、2就完美實現(xiàn)了，還剩最后一個問題就是如何讓用戶更少的執(zhí)行代碼？

如果你體驗過我的網(wǎng)站，你會發(fā)現(xiàn)執(zhí)行一個 pandas 操作連 import pandas as pd和讀取數(shù)據(jù)的操作都不用！

其實這些代碼在啟動jupyter notebook時就預先加載了，只需要在對應單元格上加上 thebe-init的 tag 即可。

當然，使用 JupyterBook 還是有很多坑，消耗我最多的時間就是在修改樣式上，默認的樣式如下，可能英文狀態(tài)下表現(xiàn)還行，但是到中文并不是很適配

為了大家不僅用的爽，我對網(wǎng)站顏值的要求也很高，于是爆改了幾千行的 css 和 js 代碼，甚至組件的位置都調(diào)整到小數(shù)點后兩位才讓我滿意，磕磕碰碰一個多月終于將整個網(wǎng)站做出來

最后，本文僅是對在線執(zhí)行代碼做了一個快速、不完整的總結(jié)。由于篇幅限制，還有很多搭建、部署網(wǎng)站細節(jié)的內(nèi)容沒有涉及到，如果你覺得不錯，歡迎點贊、轉(zhuǎn)發(fā)。