本篇文章為大家展示了Python中關(guān)于前后端分離開(kāi)發(fā)入門(mén)的示例分析，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

為青縣等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及青縣網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、青縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

前后端分離開(kāi)發(fā)入門(mén)

在傳統(tǒng)的Web應(yīng)用開(kāi)發(fā)中，大多數(shù)的程序員會(huì)將瀏覽器作為前后端的分界線。將瀏覽器中為用戶(hù)進(jìn)行頁(yè)面展示的部分稱(chēng)之為前端，而將運(yùn)行在服務(wù)器，為前端提供業(yè)務(wù)邏輯和數(shù)據(jù)準(zhǔn)備的所有代碼統(tǒng)稱(chēng)為后端。所謂前后端分離的開(kāi)發(fā)，就是前后端工程師約定好數(shù)據(jù)交互接口，并行的進(jìn)行開(kāi)發(fā)和測(cè)試，后端只提供數(shù)據(jù)，不負(fù)責(zé)將數(shù)據(jù)渲染到頁(yè)面上，前端通過(guò)HTTP請(qǐng)求獲取數(shù)據(jù)并負(fù)責(zé)將數(shù)據(jù)渲染到頁(yè)面上，這個(gè)工作是交給瀏覽器中的JavaScript代碼來(lái)完成。

使用前后端分離開(kāi)發(fā)有諸多的好處，下面我們簡(jiǎn)要的說(shuō)下這些好處：

1. 提升開(kāi)發(fā)效率。前后端分離以后，可以實(shí)現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應(yīng)用所需接口以及接口參數(shù)，便可以開(kāi)始并行開(kāi)發(fā)，無(wú)需等待對(duì)方的開(kāi)發(fā)工作結(jié)束。在這種情況下，前后端工程師都可以只專(zhuān)注于自己的開(kāi)發(fā)工作，有助于打造出更好的團(tuán)隊(duì)。除此之外，在前后端分離的開(kāi)發(fā)模式下，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開(kāi)發(fā)人員就不需要修改代碼，只要前端進(jìn)行變動(dòng)即可。

2. 增強(qiáng)代碼的可維護(hù)性。前后端分離后，應(yīng)用的代碼不再是前后端混合，只有在運(yùn)行期才會(huì)有調(diào)用依賴(lài)關(guān)系，這樣的話維護(hù)代碼的工作將變得輕松愉快很多，再不會(huì)牽一發(fā)而動(dòng)全身。當(dāng)你的代碼變得簡(jiǎn)明且整潔時(shí)，代碼的可讀性和可維護(hù)性都會(huì)有質(zhì)的提升。

3. 支持多終端和服務(wù)化架構(gòu)。前后端分離后，同一套數(shù)據(jù)接口可以為不同的終端提供服務(wù)，更有助于打造多終端應(yīng)用；此外，由于后端提供的接口之間可以通過(guò)HTTP(S)進(jìn)行調(diào)用，有助于打造服務(wù)化架構(gòu)（包括微服務(wù)）。

接下來(lái)我們就用前后端分離的方式來(lái)改寫(xiě)之前的投票應(yīng)用。

返回JSON格式的數(shù)據(jù)

剛才說(shuō)過(guò)，在前后端分離的開(kāi)發(fā)模式下，后端需要為前端提供數(shù)據(jù)接口，這些接口通常返回JSON格式的數(shù)據(jù)。在Django項(xiàng)目中，我們可以先將對(duì)象處理成字典，然后就可以利用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)

上面的代碼中，我們通過(guò)循環(huán)遍歷查詢(xún)學(xué)科得到的QuerySet對(duì)象，將每個(gè)學(xué)科的數(shù)據(jù)處理成一個(gè)字典，在將字典保存在名為subjects的列表容器中，最后利用JsonResponse完成對(duì)列表的序列化，向?yàn)g覽器返回JSON格式的數(shù)據(jù)。由于JsonResponse序列化的是一個(gè)列表而不是字典，所以需要指定safe參數(shù)的值為False才能完成對(duì)subjects的序列化，否則會(huì)產(chǎn)生TypeError異常。

可能大家已經(jīng)發(fā)現(xiàn)了，自己寫(xiě)代碼將一個(gè)對(duì)象轉(zhuǎn)成字典是比較麻煩的，如果對(duì)象的屬性很多而且某些屬性又關(guān)聯(lián)到一個(gè)比較復(fù)雜的對(duì)象時(shí)，情況會(huì)變得更加糟糕。為此我們可以使用一個(gè)名為bpmappers的三方庫(kù)來(lái)簡(jiǎn)化將對(duì)象轉(zhuǎn)成字典的操作，這個(gè)三方庫(kù)本身也提供了對(duì)Django框架的支持。

安裝三方庫(kù)bpmappers。

pip install bpmappers

編寫(xiě)映射器（實(shí)現(xiàn)對(duì)象到字典轉(zhuǎn)換）。

from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
class 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映射，然后訪問(wèn)該接口，可以得到如下所示的JSON格式數(shù)據(jù)。

[
 {
 "no": 101,
 "name": "Python全棧+人工智能",
 "intro": "Python是一種計(jì)算機(jī)程序設(shè)計(jì)語(yǔ)言。是一種面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型語(yǔ)言，最初被設(shè)計(jì)用于編寫(xiě)自動(dòng)化腳本(shell)，隨著版本的不斷更新和語(yǔ)言新功能的添加，越來(lái)越多被用于獨(dú)立的、大型項(xiàng)目的開(kāi)發(fā)。",
 "create_date": "2017-08-01",
 "is_hot": true
 },
 // 此處省略下面的內(nèi)容
]

如果不希望在JSON數(shù)據(jù)中顯示學(xué)科的成立時(shí)間，我們可以在映射器中排除create_date屬性；如果希望將是否為熱門(mén)學(xué)科對(duì)應(yīng)的鍵取名為isHot（默認(rèn)的名字是is_hot），也可以通過(guò)修改映射器來(lái)做到。具體的做法如下所示：

from bpmappers import RawField
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
class 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ì)語(yǔ)言。是一種面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型語(yǔ)言，最初被設(shè)計(jì)用于編寫(xiě)自動(dòng)化腳本(shell)，隨著版本的不斷更新和語(yǔ)言新功能的添加，越來(lái)越多被用于獨(dú)立的、大型項(xiàng)目的開(kāi)發(fā)。",
 "isHot": true
 },
 // 此處省略下面的內(nèi)容
]

關(guān)于bpmappers詳細(xì)的使用指南，請(qǐng)參考它的官方文檔，這個(gè)官方文檔是用日語(yǔ)書(shū)寫(xiě)的，可以使用瀏覽器的翻譯功能將它翻譯成你熟悉的語(yǔ)言即可。

使用Vue.js渲染頁(yè)面

關(guān)于Vue.js的知識(shí)，我們?cè)诘?1天到第30天的內(nèi)容中已經(jīng)介紹過(guò)了，這里我們不再進(jìn)行贅述。如果希望全面的了解和學(xué)習(xí)Vue.js，建議閱讀它的官方教程或者在YouTube上搜索Vue.js的新手教程（Crash Course）進(jìn)行學(xué)習(xí)。

重新改寫(xiě)subjects.html頁(yè)面，使用Vue.js來(lái)渲染頁(yè)面。

 
 


 
所有學(xué)科
 

 
 
 

 {{ subject.name }}
 
 
 
{{ subject.intro }}