如何在網(wǎng)頁中執(zhí)行一段 pandas 代碼？
很多粉絲對如何在線執(zhí)行 pandas 代碼感興趣，那么今天就簡單來說一下我探索這一功能的過程。
首先在設(shè)計(jì)這一功能時(shí)，需要先明確大致需求：
???用戶可以在當(dāng)前頁面執(zhí)行 不同用戶之間獨(dú)立運(yùn)行 不需要加載額外代碼或操作
其中最重要的一點(diǎn)就是用戶可以在當(dāng)前網(wǎng)站、當(dāng)前單元格執(zhí)行代碼，其次盡可能的減少其他操作。
其實(shí)為了實(shí)現(xiàn)這個(gè)功能，我探索了大半個(gè)月，不斷修改方案，刪掉了幾個(gè)寫了很久但是不能完美實(shí)現(xiàn)的代碼，幾度放棄，最后還是磕磕碰碰的做出來，下面是我的一些經(jīng)驗(yàn)，僅供參考。
方案1
首先最簡單的思路就是用自己的服務(wù)器，前端寫一個(gè)輸入框，然后將用戶提交的代碼到后臺(tái)，執(zhí)行后再返回前端，就像這樣??
但是思索了一番還是放棄了，除了要防止惡意用戶執(zhí)行sudo rm - rf /*之類的代碼，為了滿足第二個(gè)需求就要給每個(gè)用戶分配一定的空間，這就很吃服務(wù)器的配置，例如前天最高100+用戶同時(shí)運(yùn)行，我的 4c8g 服務(wù)器肯定是帶不動(dòng)的。
并且如果采取這個(gè)的方案，理論上可以實(shí)現(xiàn)，但除了升級(jí)服務(wù)器要錢，我也沒有開發(fā)類似產(chǎn)品的經(jīng)驗(yàn)，時(shí)間成本不好預(yù)估，遂放棄。
方案2
之后又是一番面向 stackoverflow 編程，我了解到很多可以在線執(zhí)行代碼的網(wǎng)站，就像這樣
確實(shí)可以在線執(zhí)行一段代碼，但是除去我是否能做出來，如何控制權(quán)限等問題，這樣的網(wǎng)站主要是以執(zhí)行代碼為主，無法完成 pandas 教程的任務(wù)。
并且代碼不能預(yù)設(shè)置，只能進(jìn)入頁面后手動(dòng)輸入，本地?cái)?shù)據(jù)也不好加載，而且執(zhí)行一次就要跳轉(zhuǎn)到一個(gè)新的頁面，十分繁瑣（寫一個(gè)爬蟲接口也是一個(gè)辦法，但是就太依賴對方網(wǎng)站），于是很快放棄了這條思路。
Jupyterhub
繼續(xù)一番搜索后，我發(fā)現(xiàn)了一個(gè)神器 —— Jupyterhub
如上圖架構(gòu)展示的一樣，使用Jupyterhub 可以給每個(gè)用戶分配一個(gè)獨(dú)立的Jupyter Notebook，并且無需考慮權(quán)限等問題，我也可以提前將代碼和數(shù)據(jù)進(jìn)行預(yù)設(shè)。
但問題在于采取此方案無法滿足教程需求，因?yàn)槿績?nèi)容都需要放在 Jupyter Notebook中，整體上就是將 pandas300題做成了在線版，而我想要的是一個(gè)網(wǎng)站。
并且使用Jupyterhub不可避免的要進(jìn)行一些 docker 或 k8s 操作，這也不是我熟悉的領(lǐng)域，雖熱在這條思路上走了一段時(shí)間，但還是放棄了。
JupyterBook
之后又是一番檢索，但無非都是上面幾種方案，在我感覺要放棄做這個(gè)網(wǎng)站時(shí)，無意中發(fā)現(xiàn)一個(gè)項(xiàng)目JupyterBook
簡單來說，他可以將你的 Jupyter Notebook 轉(zhuǎn)換為 html 頁面（基于 sphinx），并且一個(gè)很重要的特點(diǎn)就是可以在線、交互式執(zhí)行代碼。
具體怎么實(shí)現(xiàn)的呢？首先需要將你的項(xiàng)目上傳到一個(gè)公共資源平臺(tái)binder，這個(gè)網(wǎng)站會(huì)為你的項(xiàng)目創(chuàng)建一個(gè)鏡像，這樣可以方便給不同用戶使用
簡單來說，可以理解為將你的 Jupyter Notebook 掛在這個(gè)網(wǎng)站，別人就能去在線執(zhí)行，但是很明顯，我們都需要跳轉(zhuǎn)到這個(gè)頁面去使用，而我希望在當(dāng)前頁面執(zhí)行代碼。
這時(shí)就需要在使用另一個(gè)項(xiàng)目（Thebe）
它使用JupyterLab API，通過加載一段JS代碼，再指定一個(gè)執(zhí)行后端（上面提到的binder），就可以在當(dāng)前頁面執(zhí)行代碼。
聽起來很復(fù)雜，但是實(shí)現(xiàn)起來很簡單，上面我們說到，JupyterBook 是基于 Sphinx制作頁面的，所以只需要提前在配置 Sphinx時(shí)加載 ?sphinx_thebe插件即可，
至此，開頭我需求中的1、2就完美實(shí)現(xiàn)了，還剩最后一個(gè)問題就是如何讓用戶更少的執(zhí)行代碼？
如果你體驗(yàn)過我的網(wǎng)站，你會(huì)發(fā)現(xiàn)執(zhí)行一個(gè) pandas 操作連 import pandas as pd和讀取數(shù)據(jù)的操作都不用！
其實(shí)這些代碼在啟動(dòng)jupyter notebook時(shí)就預(yù)先加載了，只需要在對應(yīng)單元格上加上 thebe-init的 tag 即可。
當(dāng)然，使用 JupyterBook 還是有很多坑，消耗我最多的時(shí)間就是在修改樣式上，默認(rèn)的樣式如下，可能英文狀態(tài)下表現(xiàn)還行，但是到中文并不是很適配
為了大家不僅用的爽，我對網(wǎng)站顏值的要求也很高，于是爆改了幾千行的 css 和 js 代碼，甚至組件的位置都調(diào)整到小數(shù)點(diǎn)后兩位才讓我滿意，磕磕碰碰一個(gè)多月終于將整個(gè)網(wǎng)站做出來
最后，本文僅是對在線執(zhí)行代碼做了一個(gè)快速、不完整的總結(jié)。由于篇幅限制，還有很多搭建、部署網(wǎng)站細(xì)節(jié)的內(nèi)容沒有涉及到，如果你覺得不錯(cuò)，歡迎點(diǎn)贊、轉(zhuǎn)發(fā).
數(shù)據(jù)前線
后臺(tái)回復(fù)關(guān)鍵字：1024，獲取一份精心整理的技術(shù)干貨 后臺(tái)回復(fù)關(guān)鍵字：進(jìn)群，帶你進(jìn)入高手如云的交流群。 推薦閱讀
