資訊專欄INFORMATION COLUMN
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。
Django項目前端工程化的探索
不通過node層實現非SPA網頁開發的前后端分離。
技術棧：webpack + jade + es6 + scss + swig等
項目git: webpack-django-starter
需求項目需求公司官網。
SEO很重要
頁面簡單，基本是幾臺頁面，個別頁面有動態內容
后臺是Django
成品beta版（雖然有廣告之嫌）：
http://www.bsy365.com/
我們從前怎么做？之前開發過的一些多頁面網站都是在Django template目錄下直接寫Django模板（類似于寫PHP和JSP），js和css又要寫在Django項目的static目錄下。前端沒有工程化，前端代碼被肢解分離在后端項目的目錄里。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。
缺點：
想測試？你需要一套后臺環境
想livereload？要多帶帶起個livereload進程監控前端代碼的目錄，還要在頁面里特別的嵌入一段代碼。livereload
想壓縮js和css？用django compressor吧。
想用jade？想用ES6？想用scss？想用npm管理依賴？應該都能做到，但是貌似都不太方便。
優點：
無腦，簡單，人人都好上手
別人怎么做？SPA
Angular、Vue、React，用這些框架做個SPA，頁面不需要后臺渲染了，這樣前端可以完全從后端脫離出來，前后端的交互只通過ajax來拿數據。這幾個框架相比大家都很熟悉，優點我就不用我說了，stater的項目在git上也到處都是。其中我個人最喜歡Vue，但是搜索引擎，尤其是我們大天朝的baidu爸爸對js支持的并不好，所以單純的SPA方式就不太適合我們的需求了。
后端渲染的SPA和帶node層的大前端
react和vue2.0的后臺渲染，淘寶的中途島 這些解決方案都是很精妙的，不得不佩服相處這些方案的人的睿智。然而我們的項目其實是比較簡單的，同事們都覺得沒有必要加個node層搞那么復雜。（也許并不復雜，只是我們沒有實踐過）
好吧！別人的做法不合適，只能自己想辦法了。
我們到底面臨的是什么問題？正如我已經提到的：
之前開發過的一些多頁面網站都是在Django template目錄下直接寫Django模板（類似于寫PHP和JSP），js和css又要寫在Django項目的static目錄下。
仔細想來，其實Django只是想要模板和靜態資源，我們可以直接在Django目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源copy到Django工程的相應目錄下。如下圖：
圖1
所以問題就是如何配置一個多頁面的前端項目，這個項目
release的時候：
能夠輸出Django模板的html文件、純靜態頁面的html文件、css文件、js文件以及圖片文件。2種html文件inject了所有其所依賴的靜態文件，避免每次手動配置。
dev的時候：
js、css和html都可以使用預編譯器；能夠支持livereload，實時看到代碼的結果
看著這些需求，熟悉wepack的各位大神可以已經微微一笑了。大部分的功能用webpack都可以輕松實現，不過是一個基于webpack的多頁面工程嘛。確實如此，把Django模板當做一種特別的html來看的話，其實就是如此。
唯一的不同點是開發時如何能讓node server渲染Django模板？
我想的辦法是在開發時用swig.js來代替Django渲染Django模板。（swig模板的語法和Django模板語法相似，加之它支持自定義tag和filter）
所以，最終的結構就是這樣：
圖2
項目的代碼結構：
圖3
build目錄下是webpack、express以及swig的配置文件。
config目錄下是項目的一些可變配置，比如release的路徑、是否生成sourcemap
assets是一些全局資源，比如favicon
common-style里是一些全局的css文件
components里是頁面的公用組件
組件的jade文件、scss文件和js文件是組織在一個目錄下的
pages里是頁面的實現，jade文件、scss文件和js文件是同樣是組織在一個目錄下的
mock.js 是開發時express、swig用于渲染頁面的假數據。
圖4
圖5
page目錄下的jade文件分為兩種：一種是dj.jade文件，一種是.jade文件。前者會被認為是Django模板，開發時會被swig渲染，發布時會被發布到template目錄下。后者被認為是純頁面，開發時不會被swig渲染，release時會被放到static的html目錄下。
另外，有時候一些頁面是一組頁面，他們很大一部分是一樣的，比如圖4中的about-us下面有2個頁面author和company。此時，可以在about-us下面寫一個base，把公共的內容寫在base里。而base會被識別，在dev和release時都不會被當做頁面處理。（不會生成一個base的頁面）
寫在最后東西比較多，寫的也很亂，感覺很難讓大家看明白。。。哈哈。看code吧。本項目是我們team的一次嘗試，我們用這個架構寫了2個項目，感覺還不錯，不需要引入node層，前后端徹底分離了，在我們這樣的特定項目背景下，比較適用，和大家分享下，希望有用。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80146.html
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：面試的心得體會簡歷制作我做了兩份簡歷，用兩個手機賬號，兩個簡歷名字，分別在各個招聘網站投了雙份簡歷，一個是數據分析的簡歷一個是全棧開發的簡歷，我真正接觸快年，不管是學習還是工作學到的東西，這兩年大概掌握了前端爬蟲數據分析機器學習技術， showImg(https://upload-images.jianshu.io/upload_images/13090773-b96aac7e974c...
摘要：競賽平臺項目中期總結軟件謝運帷我們小組的選題是大學生競賽平臺項目，經過我們需求分析，原型設計等等步驟，我們終于要開始著手實現這一個龐大的競賽平臺項目。 Cesar競賽平臺項目中期總結 軟件51 謝運帷 2015013185 我們小組的選題是大學生競賽平臺項目，經過我們需求分析，原型設計等等步驟，我們終于要開始著手實現這一個龐大的競賽平臺項目。我們使用Django+mysql處理后端邏輯...
閱讀 1214·2021-09-26 09:55
閱讀 3159·2019-08-30 15:55
閱讀 949·2019-08-30 15:53
閱讀 2286·2019-08-30 13:59
閱讀 2367·2019-08-29 13:08
閱讀 1098·2019-08-29 12:19
閱讀 3290·2019-08-26 13:41
閱讀 411·2019-08-26 13:24
