今天這期的Python學(xué)習(xí)教程跟大家聊聊前后端分離開發(fā)，入門的先帶大家熟悉掌握一遍！
在傳統(tǒng)的Web應(yīng)用開發(fā)中，大多數(shù)的程序員會(huì)將瀏覽器作為前后端的分界線。將瀏覽器中為用戶進(jìn)行頁面展示的部分稱之為前端，而將運(yùn)行在服務(wù)器，為前端提供業(yè)務(wù)邏輯和數(shù)據(jù)準(zhǔn)備的所有代碼統(tǒng)稱為后端。所謂前后端分離的開發(fā)，就是前后端工程師約定好數(shù)據(jù)交互接口，并行的進(jìn)行開發(fā)和測試，后端只提供數(shù)據(jù)，不負(fù)責(zé)將數(shù)據(jù)渲染到頁面上，前端通過HTTP請求獲取數(shù)據(jù)并負(fù)責(zé)將數(shù)據(jù)渲染到頁面上，這個(gè)工作是交給瀏覽器中的JavaScript代碼來完成。
使用前后端分離開發(fā)有諸多的好處，下面我們簡要的說下這些好處：
- 提升開發(fā)效率。前后端分離以后，可以實(shí)現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結(jié)束。在這種情況下，前后端工程師都可以只專注于自己的開發(fā)工作，有助于打造出更好的團(tuán)隊(duì)。除此之外，在前后端分離的開發(fā)模式下，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進(jìn)行變動(dòng)即可。
- 增強(qiáng)代碼的可維護(hù)性。前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運(yùn)行期才會(huì)有調(diào)用依賴關(guān)系，這樣的話維護(hù)代碼的工作將變得輕松愉快很多，再不會(huì)牽一發(fā)而動(dòng)全身。當(dāng)你的代碼變得簡明且整潔時(shí)，代碼的可讀性和可維護(hù)性都會(huì)有質(zhì)的提升。
- 支持多終端和服務(wù)化架構(gòu)。前后端分離后，同一套數(shù)據(jù)接口可以為不同的終端提供服務(wù)，更有助于打造多終端應(yīng)用；此外，由于后端提供的接口之間可以通過HTTP(S)進(jìn)行調(diào)用，有助于打造服務(wù)化架構(gòu)（包括微服務(wù)）。
接下來我們就用前后端分離的方式來改寫之前的投票應(yīng)用。
返回json格式的數(shù)據(jù)
剛才說過，在前后端分離的開發(fā)模式下，后端需要為前端提供數(shù)據(jù)接口，這些接口通常返回JSON格式的數(shù)據(jù)。在Django項(xiàng)目中，我們可以先將對象處理成字典，然后就可以利用Django封裝的JsonResponse向?yàn)g覽器返回JSON格式的數(shù)據(jù)，具體的做法如下所示。
def show_subjects(request): queryset = Subject.objects.all() subjects = [] for subject in queryset: subjects.append({ \’no\’: subject.no, \’name\’: subject.name, \’intro\’: subject.intro, \’isHot\’: subject.is_hot }) return JSONResponse(subjects, safe=False)
上面的代碼中，我們通過循環(huán)遍歷查詢學(xué)科得到的QuerySet對象，將每個(gè)學(xué)科的數(shù)據(jù)處理成一個(gè)字典，在將字典保存在名為subjects的列表容器中，最后利用JsonResponse完成對列表的序列化，向?yàn)g覽器返回JSON格式的數(shù)據(jù)。由于JsonResponse序列化的是一個(gè)列表而不是字典，所以需要指定safe參數(shù)的值為False才能完成對subjects的序列化，否則會(huì)產(chǎn)生TypeError異常。
可能大家已經(jīng)發(fā)現(xiàn)了，自己寫代碼將一個(gè)對象轉(zhuǎn)成字典是比較麻煩的，如果對象的屬性很多而且某些屬性又關(guān)聯(lián)到一個(gè)比較復(fù)雜的對象時(shí)，情況會(huì)變得更加糟糕。為此我們可以使用一個(gè)名為bpmappers的三方庫來簡化將對象轉(zhuǎn)成字典的操作，這個(gè)三方庫本身也提供了對Django框架的支持。
安裝三方庫bpmappers。
pip install bpmappers
編寫映射器（實(shí)現(xiàn)對象到字典轉(zhuǎn)換）。
from bpmappers.djangomodel import ModelMapperfrom poll2.models import Subjectclass SubjectMapper(ModelMapper): class Meta: model = Subject
修改視圖函數(shù)。
def show_subjects(request): queryset = Subject.objects.all() subjects = [] for subject in queryset: subjects.append(SubjectMapper(subject).as_dict()) return JsonResponse(subjects, safe=False)
配置URL映射，然后訪問該接口，可以得到如下所示的JSON格式數(shù)據(jù)。
[ { \”no\”: 101, \”name\”: \”Python全棧 人工智能\”, \”intro\”: \”Python是一種計(jì)算機(jī)程序設(shè)計(jì)語言。是一種面向?qū)ο蟮膭?dòng)態(tài)類型語言，最初被設(shè)計(jì)用于編寫自動(dòng)化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨(dú)立的、大型項(xiàng)目的開發(fā)。\”, \”create_date\”: \”2017-08-01\”, \”is_hot\”: true }, // 此處省略下面的內(nèi)容]
如果不希望在JSON數(shù)據(jù)中顯示學(xué)科的成立時(shí)間，我們可以在映射器中排除create_date屬性；如果希望將是否為熱門學(xué)科對應(yīng)的鍵取名為isHot（默認(rèn)的名字是is_hot），也可以通過修改映射器來做到。具體的做法如下所示：
from bpmappers import RawFieldfrom bpmappers.djangomodel import ModelMapperfrom poll2.models import Subjectclass SubjectMapper(ModelMapper): isHot = RawField(\’is_hot\’) class Meta: model = Subject exclude = (\’create_date\’, \’is_hot\’)
再次查看學(xué)科接口返回的JSON數(shù)據(jù)。
[ { \”no\”: 101, \”name\”: \”Python全棧 人工智能\”, \”intro\”: \”Python是一種計(jì)算機(jī)程序設(shè)計(jì)語言。是一種面向?qū)ο蟮膭?dòng)態(tài)類型語言，最初被設(shè)計(jì)用于編寫自動(dòng)化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨(dú)立的、大型項(xiàng)目的開發(fā)。\”, \”isHot\”: true }, // 此處省略下面的內(nèi)容]
關(guān)于bpmappers詳細(xì)的使用指南，請參考它的官方文檔，這個(gè)官方文檔是用日語書寫的，可以使用瀏覽器的翻譯功能將它翻譯成你熟悉的語言即可。
使用Vue.js渲染頁面
關(guān)于Vue.js的知識(shí)，我們前面蠻久前的一期Python學(xué)習(xí)教程中已經(jīng)詳細(xì)的介紹過了，這里我們不再進(jìn)行贅述。如果希望全面的了解和學(xué)習(xí)Vue.js，建議閱讀它的官方教程或者在YouTube上搜索Vue.js的新手教程（Crash Course）進(jìn)行學(xué)習(xí)。
重新改寫subjects.html頁面，使用Vue.js來渲染頁面。
<!DOCTYPE html><html lang=\”en\”><head> <meta charset=\”UTF-8\”> <title>學(xué)科</title></head><body> <h1>所有學(xué)科</h1> <hr> <div id=\”app\”> <div v-for=\”subject in subjects\”> <h3> <a :href=\”getTeachersHref(subject.no)\”>{{ subject.name }}</a> <img v-if=\”subject.isHot\” src=\”/static/images/hot.png\” width=\”32\”> </h3> <p>{{ subject.intro }}</p> </div> </div> <script src=\”https://cdn.bootcss.com/vue/2.6.10/vue.min.js\”></script> <script> const app = new Vue({ el: \’#app\’, data: { subjects: [] }, created() { fetch(\’/subjects/\’) .then(resp => resp.json()) .then(json => this.subjects = json) }, methods: { getTeachersHref(sno) { return `/static/teachers.html/?sno=${sno}` } } }) </script></body></html>
前后端分離的開發(fā)需要將前端頁面作為靜態(tài)資源進(jìn)行部署，項(xiàng)目實(shí)際上線的時(shí)候，我們會(huì)對整個(gè)Web應(yīng)用進(jìn)行動(dòng)靜分離，靜態(tài)資源通過Nginx或Apache服務(wù)器進(jìn)行部署，生成動(dòng)態(tài)內(nèi)容的Python程序部署在uWSGI或者Gunicorn服務(wù)器上，對動(dòng)態(tài)內(nèi)容的請求由Nginx或Apache路由到uWSGI或Gunicorn服務(wù)器上。
在開發(fā)階段，我們通常會(huì)使用Django自帶的測試服務(wù)器，如果要嘗試前后端分離，可以先將靜態(tài)頁面放在之前創(chuàng)建的放靜態(tài)資源的目錄下。
關(guān)于前后端分離開發(fā)的Python學(xué)習(xí)教程，也會(huì)繼續(xù)為大家更新！有哪些不清楚的地方，伙伴們也可以留言！
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。