當前位置:首頁 » 網頁前端 » 前端寫apppy
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端寫apppy

發布時間: 2023-06-08 12:33:48

㈠ python可以做前端開發嗎

可以的。python會學到web前端開發的一部分內容,是可以做前端開發的。

㈡ 純 Python 寫一個 Web 框架,就是這么簡單

造輪子是最好的一種學習方式,本文嘗試從0開始造個Python Web框架的輪子,我稱它為 ToyWebF 。

本文操作環境為:MacOS,文中涉及的命令,請根據自己的系統進行替換。

ToyWebF的簡單特性:

下面我們來實現這些特性。

首先,我們需要安裝gunicorn,回憶一下Flask框架,該框架有內置的Web伺服器,但不穩定,所以上線時通常會替換成uWSGI或gunicorn,這里不搞這個內置Web服務,直接使用gunicorn。

我們創建新的目錄與Python虛擬環境,在該虛擬環境中安裝gunicorn

在啥都沒有的情況下,構建最簡單的Web服務,在ToyWebF目錄下,創建app.py與api.py文件,寫入下面代碼。

運行 gunicorn app:app 訪問 http://127.0.0.1:8000 ,可以看見 Hello, World! ,但現在請求體中的參數在environ變數中,難以解析,我們返回的response也是bytes形式。

我們可以使用webob庫,將environ中的數據轉為Request對象,將需要返回的數據轉為Response對象,處理起來更加直觀方便,直接通過pip安裝一下。

然後修改一下API類的 __call__方法 ,代碼如下。

上述代碼中,通過webob庫的Request類將environ對象(請求的環境信息)轉為容易處理的request,隨後調用handle_request方法對request進行處理,處理的結果,通過response對象返回。

handle_request方法在ToyWebF中非常重要,它會匹配出某個路由對應的處理方法,然後調用該方法處理請求並將處理的結果返回,在解析handle_request前,需要先討論路由注冊實現,代碼如下。

其實就是將路由和方法存到self.routes字典中,可以通過route裝飾器的形式將路由和方法關聯,也可以通過add_route方法關聯,在app.py中使用一下。

因為url中可以存在變數,如 @app.route("/hello/{name}") ,所以在匹配時,需要進行解析,可以使用正則匹配的方式進行匹配,parse這個第三方庫已經幫我們實現了相應的正則匹配邏輯,pip安裝使用一下則可。

這里定義find_handler方法來實現對self.routes的遍歷。

了解了路由與方法關聯的原理後,就可以實現handle_request方法,該方法主要的路徑就是根據路由調度對應的方法,代碼如下。

在該方法中,首先實例化webob庫的Response對象,然後通過self.find_handler方法獲取此次請求路由對應的方法和對應的參數,比如。

它將返回hello方法對象和name參數,如果是 /hello/二兩 ,那麼name就是二兩。

因為route裝飾器可能裝飾器的類對象,比如。

此時self.find_handler方法返回的hanler就是個類,但我們希望調用的是類中的get、post、delete等方法,所以需要一個簡單的判斷邏輯,通過inspect.isclass方法判斷handler如果是類對象,那麼就通過getattr方法獲取類對象實例的中對應的請求方法。

如果類對象中沒有該方法屬性,則拋出該請求類型不被允許的錯誤,如果不是類對象或類對象中存在該方法屬性,則直接調用則可。

此外,如果方法的路由並沒有注冊到self.routes中,即404的情況,定義了defalut_response方法返回其中內容,代碼如下。

如果handle_request方法中調度的過程出現問題,則直接raise將錯誤拋出。

至此,一個最簡單的web服務就編寫完成了。

回顧Flask,Flask可以支持HTML、CSS、JavaScript等靜態文件,利用模板語言,可以構建出簡單但美觀的Web應用,我們讓TopWebF也支持這一功能,最終實現圖中的網站,完美兼容靜態文件。

Flask使用了jinja2作為其html模板引擎,ToyWebF同樣使用jinja2,jinja2其實實現一種簡單的DSL(領域內語言),讓我們可以在HTML中通過特殊的語法改變HTML的結構,該項目非常值得研究學習。

首先 pip install jinja2 ,然後就可以使用它了,在ToyWebF項目目錄中創建templates目錄,以該目錄作為默認的HTML文件根目錄,代碼如下。

首先利用jinja2的FileSystemLoader類將file system中的某個文件夾作為loader,然後初始化Environment。

在使用的過程中(即調用template方法),通過get_template方法獲得具體的某個模板並通過render方法將對應的內容傳遞給模板中的變數。

這里我們不寫前端代碼,直接去互聯網中下載模板,這里下載了Bootstrap提供的免費模板,可以自行去 https://startbootstrap.com/themes/freelancer/ 下載,下載完後,你會獲得index.html以及對應的css、jss、img等文件,將index.html移動到ToyWebF/templates中並簡單修改了一下,添加一些變數。

然後在app.py文件中為index.html定義路由以及需要的參數。

至此html文件的支持就完成了,但此時的html無法正常載入css和js,導致頁面布局非常醜陋且交互無法使用。

接著就讓ToyWebF支持css、js,首先在ToyWebF目錄下創建static文件夾用於存放css、js或img等靜態文件,隨後直接將前面下載的模板,其中的靜態文件復制到static中則可。

通過whitenoise第三方庫,可以通過簡單的幾行代碼讓web框架支持css和js,不需要依賴nginx等服務,首先 pip install whitenoise ,隨後修改API類的 __init__ 方法,代碼如下。

其實就是通過WhiteNoise將self.wsgi_app方法包裹起來,在調用API的 __call__ 方法時,直接調用self.whitenoise。

此時,如果請求web服務獲取css、js等靜態資源,WhiteNoise會獲取其內容並返回給client,它在背後會匹配靜態資源在系統中對應的文件並將其讀取返回。

至此,一開始的網頁效果就實現好了。

web服務如果出現500時,默認會返回 internal server error ,這顯得比較丑,為了讓框架使用者可以自定義500時返回的錯誤,需要添加一些代碼。

首先API初始化時,初始self.exception_handler對象並定義對應的方法添加自定義的錯誤

在handler_request方法進行請求調度時,調度的方法執行邏輯時報500,此時不再默認將錯誤拋出,而是先判斷是否有自定義錯誤處理。

在app.py中,自定義錯誤返回方法,如下。

custom_exception_handler方法只返回自定義的一段話,你完全可以替換成美觀的template。

我們可以實驗性定義一個路由來看效果。

Web服務的中間件也可以理解成鉤子,即在請求前可以對請求做一些處理或者返回Response前對Response做一下處理。

為了支持中間件,在TopWebF目錄下創建middleware.py文件,在編寫代碼前,思考一下如何實現?

回顧一下現在請求的調度邏輯。

1.通過routes裝飾器關聯路由和方法 2.通過API.whitenoise處理 3.如果是請求API介面,那麼會將參數傳遞給API.wsgi_app 4.API.wsgi_app最終會調用API.handle_request方法獲取路由對應的方法並調用該方法執行相應的邏輯

如果希望在request前以及response後做相應的操作,那麼其實就需要讓邏輯在API.handle_request前後執行,看一下代碼。

其中add方法會實例化Middleware對象,該對象會將當前的API類實例包裹起來。

Middleware.handle_request方法其實就是在self.app.handle_request前調用self.process_request方法處理request前的數據以及調用self.process_response處理response後的數據,而核心的調度邏輯,依舊交由API.handle_request方法進行處理。

這里的代碼可能會讓人感到疑惑, __call__ 方法和handle_request方法中都有self.app.handle_request(request),但其調用對象似乎不同?這個問題暫時放一下,先繼續完善代碼,然後再回來解釋。

接著在api.py中為API創建middleware屬性以及添加新中間件的方法。

隨後,在app.py中,自定義一個簡單的中間件,然後調用add_middleware方法將其添加。

定義好中間件後,在請求調度時,就需要使用中間件,為了兼容靜態文件的情況,需要對css、js、ing文件的請求路徑做一下兼容,在其路徑中加上/static前綴

緊接著,修改API的 __call__ ,兼容中間件和靜態文件,代碼如下。

至此,中間件的邏輯就完成了。

但代碼中依舊有疑惑,Middleware類中的 __call__ 方法和handle_request方法其調用的self.app到底是誰?

為了方便理解,這里一步步拆解。

如果沒有添加新的中間件,那麼請求的調度邏輯如下。

在沒有添加中間件的情況下,self.app其實就是API本身,所以 middleware.__call__ 中的self.app.handle_request就是調用API.handle_request。

如果添加了新的中間件,如上述代碼中添加了名為SimpleCustomMiddleware的中間件,此時的請求調度邏輯如下。

因為注冊中間件時,Middleware.add方法替換了原始Middleware實例中的app對象,將其替換成了SimpleCustomMiddleware,而SimpleCustomMiddleware也有app對象,SimpleCustomMiddleware中的app對象,才是API類實例。

在請求調度的過程中,就會觸發Middleware類的handle_request方法,該方法就會執行中間件相應的邏輯去處理request和response中的數據。

當然,你可以通過Middleware.add方法添加多個中間件,這就會構成棧式調用的效果,代碼如下。

啟動web服務後,其執行效果如下。

㈢ 學習web前端可以進行APP前端的開發嗎

只學web是不可以的。要想用APP前端開發賺錢,你需要熟練運用HTML,CSS和Java。這些而且這些都只是最基本的東西,你還需要一定的實戰經驗,需要知道網站性能優化,SEO和各種功能運用。
前端開發技術其實變化很快,今天是這樣,明天可能就變化了。所以要有很強的基礎和靈活性。

㈣ app前端開發是什麼 m

前端即網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展,HTML5,CSS3,前端框架的應用,跨平台響應式網頁設計能夠適應各種屏幕解析度,完美的動效設計,給用戶帶來極高的用戶體驗。

㈤ 前端開發用什麼工具比較好啊

前端開發用什麼工具好?這個因人而異了,目前比較流行的有vscode、sublimetext、hbuilder、webstorm等,下面我簡單介紹一下,感興趣的朋友可以嘗試一下:

免費開源:vscode

說起vscode,許多搞前端的朋友應該非常熟悉,一個免費、開源、強大的代碼編輯器,和vs同宗同源,但比vs更簡潔輕便,支持代碼補全、語法高亮、智能提示等基本功能,除此之外,針對前端等提供了許多免費強大的插件,包括自動閉合、同步修改、斷點調試等,新手學習非常容易掌握,相信你很快就會愛上這款軟體:

簡潔輕便激旁臘:sublimetext

這也是前端一個比較常用的開發工具,基本功能和vscode相差不多,簡單輕便,支持跨平台,但原則上不免費,支持語法高亮、智能補全、代碼提示等基本功能,除此之外,也提供了非常多的插件擴展,包括emmet、docblockr等,對於開發前端效率非常高,新手學習來說也非常容易:

國產軟體:hbuilder

這是一個非常不錯的國產web開發工具,相信許多朋友應該都聽說過,明滑界面柔綠、清爽整潔,支持自動補全、語法高亮、markdown等基本功能,可以很輕松的將編寫好的前端網頁打包為安卓或iosapp,除此之外,插件擴展豐富,對於前端開發來說,也是一個非常不錯的選擇:

專業強大:webstorm

這個一個非常專業強大的web開發工具,jetbrains公司的產品,相信許多朋友都應該非常熟悉,除了常見的智能補全、語法提示等基本功能,這個軟體還支持代碼分析、代碼重構等高級功能,如果你鍾情於pycharm、idea等產品,那麼webstorm就是一個非常不錯的選擇,相信你很快就會愛上這款軟體,唯一的缺點webstorm是商業、非免費的:

目前就介紹這4個不錯的前端開發工具吧,比較常用的就是vscode、sublimetext,當然,還有許多其他軟體,像notepad++、dreamweaver等也都非常不錯,根據個人需求和愛好,選擇適合自己的一個就行,啟羨網上也有相關教程和資料,介紹的非常詳細,感興趣的話,可以搜一下,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言進行補充。

㈥ 前端運行python代碼幾種方式

(1)在python自帶的編輯器IDLE中運行
(2)將python代碼保存在.py結尾的文件中,通過命令的方式運行
(3)放置在.bat文件中,在bat文件中寫入:python -i helloworld.py,雙擊運行
(4)在解釋器中,通過函數execfile,運行
學習Python就來北京尚學堂。

㈦ 手機app前端工程師都要做什麼工作

【前端開發工程師的主要工作】前端開發工程師的主要工作是組織和實行網站重構:

1、優化:根據W3C標准進行重構後,可以讓前端的代碼組織更有帆蔽序,顯著改善網站的性能,提高網站訪問速度,還能提高可維護性,對搜索引擎也更友好;

2、加速:重構螞寬後的網站能帶來更好的用戶體驗,用XHTMLCSS重新布局後的頁面,文件更小,下載速度更快。

3、目的:網站重構的目的不是為了讓網頁更符合Web標准,重構的本質是構建一個前端靈活的MVC框架,即HTML作為信息模型(Model),CSS控制樣式(View),JavaScript負責調度數據和實現某種展現邏輯(Controller)。同時,代碼需要具有很好的復用性和可維護性。這是高效率、高質量開發以及協作開發的基礎。

隨著人們對用戶體驗的要求越來越高,前端開發的技術難度越來越大,Web前端開發工程師這一職業終於從設計和製作不分的局面態物州中獨立出來。