溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天的Python學習教程跟大家講講關于：前后端分離開發入門的相關內容！
在傳統的Web應用開發中，大多數的程序員會將瀏覽器作為前后端的分界線。將瀏覽器中為用戶進行頁面展示的部分稱之為前端，而將運行在服務器，為前端提供業務邏輯和數據準備的所有代碼統稱為后端。所謂前后端分離的開發，就是前后端工程師約定好數據交互接口，并行的進行開發和測試，后端只提供數據，不負責將數據渲染到頁面上，前端通過HTTP請求獲取數據并負責將數據渲染到頁面上，這個工作是交給瀏覽器中的JavaScript代碼來完成。
使用前后端分離開發有諸多的好處，下面我們簡要的說下這些好處：
接下來我們就用前后端分離的方式來改寫之前的投票應用。
返回JSON格式的數據
剛才說過，在前后端分離的開發模式下，后端需要為前端提供數據接口，這些接口通常返回JSON格式的數據。在Django項目中，我們可以先將對象處理成字典，然后就可以利用Django封裝的JsonResponse向瀏覽器返回JSON格式的數據，具體的做法如下所示。
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)
上面的代碼中，我們通過循環遍歷查詢學科得到的QuerySet對象，將每個學科的數據處理成一個字典，在將字典保存在名為subjects的列表容器中，最后利用JsonResponse完成對列表的序列化，向瀏覽器返回JSON格式的數據。由于JsonResponse序列化的是一個列表而不是字典，所以需要指定safe參數的值為False才能完成對subjects的序列化，否則會產生TypeError異常。
可能大家已經發現了，自己寫代碼將一個對象轉成字典是比較麻煩的，如果對象的屬性很多而且某些屬性又關聯到一個比較復雜的對象時，情況會變得更加糟糕。為此我們可以使用一個名為bpmappers的三方庫來簡化將對象轉成字典的操作，這個三方庫本身也提供了對Django框架的支持。
安裝三方庫bpmappers。
pip install bpmappers
編寫映射器（實現對象到字典轉換）。
from bpmappers.djangomodel import ModelMapperfrom poll2.models import Subjectclass SubjectMapper(ModelMapper): class Meta: model = Subject
修改視圖函數。
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格式數據。
[ { "no": 101, "name": "Python全棧+人工智能", "intro": "Python是一種計算機程序設計語言。是一種面向對象的動態類型語言，最初被設計用于編寫自動化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨立的、大型項目的開發。", "create_date": "2017-08-01", "is_hot": true }, // 此處省略下面的內容]
如果不希望在JSON數據中顯示學科的成立時間，我們可以在映射器中排除create_date屬性；如果希望將是否為熱門學科對應的鍵取名為isHot（默認的名字是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')
再次查看學科接口返回的JSON數據。
[ { "no": 101, "name": "Python全棧+人工智能", "intro": "Python是一種計算機程序設計語言。是一種面向對象的動態類型語言，最初被設計用于編寫自動化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨立的、大型項目的開發。", "isHot": true }, // 此處省略下面的內容]
關于bpmappers詳細的使用指南，請參考它的官方文檔，這個官方文檔是用日語書寫的，可以使用瀏覽器的翻譯功能將它翻譯成你熟悉的語言即可。
使用Vue.js渲染頁面
關于Vue.js的知識，我們在第21天到第30天的內容中已經介紹過了，這里我們不再進行贅述。如果希望全面的了解和學習Vue.js，建議閱讀它的官方教程或者在YouTube上搜索Vue.js的新手教程（Crash Course）進行學習。
重新改寫 subjects.html頁面，使用 Vue.js來渲染頁面。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>學科</title></head><body> <h2>所有學科</h2> <hr> <div id="app"> <div v-for="subject in subjects"> <h4> <a :href="getTeachersHref(subject.no)">{{ subject.name }}</a> <img v-if="subject.isHot" src="/static/images/hot.png" width="32"> </h4> <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>
前后端分離的開發需要將前端頁面作為靜態資源進行部署，項目實際上線的時候，我們會對整個Web應用進行動靜分離，靜態資源通過Nginx或Apache服務器進行部署，生成動態內容的Python程序部署在uWSGI或者Gunicorn服務器上，對動態內容的請求由Nginx或Apache路由到uWSGI或Gunicorn服務器上。
在開發階段，我們通常會使用Django自帶的測試服務器，如果要嘗試前后端分離，可以先將靜態頁面放在之前創建的放靜態資源的目錄下。
更多的 Python學習教程接下來繼續會為大家更新！大家有那些不清楚的地方，也可以留言！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
