在Web應用開發(fā)的傳統(tǒng)模式中,，瀏覽器被視為前后端的分界線,。前端負責頁面展示，而后端則提供業(yè)務邏輯和數(shù)據(jù)處理,。前后端分離的開發(fā)模式要求前后端工程師約定數(shù)據(jù)交互接口,，實現(xiàn)并行開發(fā)和測試。后端僅提供數(shù)據(jù),，前端通過HTTP請求獲取數(shù)據(jù)并渲染頁面,，JavaScript在瀏覽器中完成渲染工作。前后端分離的好處1. 提升開發(fā)效率- 代碼解耦前后端分離后,，只需約定接口和參數(shù),，即可并行開發(fā)，無需等待對方,。
- 專注專業(yè)領(lǐng)域前后端工程師可以專注于自己的工作,，提高團隊效率。
- 應對需求變更需求變更時,，只要接口和數(shù)據(jù)格式不變,，后端無需修改代碼，前端調(diào)整即可,。
2. 增強代碼可維護性- 代碼結(jié)構(gòu)清晰前后端分離后,，代碼不再是混合的,，只有在運行時才有依賴關(guān)系,。
- 維護工作簡化
3. 支持多終端和服務化架構(gòu)- 多終端服務同一套數(shù)據(jù)接口可以服務于不同終端,，便于多終端應用開發(fā),。
- 服務化架構(gòu)后端接口可通過HTTP(S)調(diào)用，促進服務化架構(gòu)（包括微服務）的建設(shè),。
01 返回JSON格式的數(shù)據(jù) 在前后端分離的開發(fā)模式下,，后端需要為前端提供數(shù)據(jù)接口，這些接口通常返回JSON格式的數(shù)據(jù),。在Django項目中,，我們可以先將對象處理成字典，然后就可以利用Django封裝的JsonResponse向瀏覽器返回JSON格式的數(shù)據(jù),。以下是具體的實現(xiàn)方法： # 定義視圖函數(shù),，用于展示學科信息
def show_subjects(request):
# 查詢所有學科對象
queryset = Subject.objects.all()
# 初始化一個空列表，用于存儲學科信息的字典
subjects = []
# 遍歷查詢結(jié)果,，將每個學科對象轉(zhuǎn)換為字典,，并添加到列表中
for subject in queryset:
subjects.append({
'no': subject.no, # 學科編號
'name': subject.name, # 學科名稱
'intro': subject.intro, # 學科介紹
'isHot': subject.is_hot # 是否為熱門學科
})
# 使用JsonResponse返回JSON格式的數(shù)據(jù)，設(shè)置safe=False以允許序列化列表
return JsonResponse(subjects, safe=False)
自己寫代碼將對象轉(zhuǎn)成字典可能會比較麻煩,，尤其是當對象屬性較多或關(guān)聯(lián)到復雜對象時,。為了簡化這一過程，我們可以使用名為bpmappers的第三方庫,，它提供了對Django框架的支持,。 首先，安裝bpmappers庫： 然后,，編寫映射器以實現(xiàn)對象到字典的轉(zhuǎn)換： # 導入ModelMapper和Subject模型
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
# 定義SubjectMapper類,，繼承自ModelMapper
class SubjectMapper(ModelMapper):
# 定義Meta類，指定映射的模型和排除的字段
class Meta:
model = Subject
接下來,，修改視圖函數(shù)以使用映射器： # 定義視圖函數(shù),，用于展示學科信息
def show_subjects(request):
# 查詢所有學科對象
queryset = Subject.objects.all()
# 初始化一個空列表，用于存儲學科信息的字典
subjects = []
# 遍歷查詢結(jié)果,，使用映射器將每個學科對象轉(zhuǎn)換為字典,，并添加到列表中
for subject in queryset:
subjects.append(SubjectMapper(subject).as_dict())
# 使用JsonResponse返回JSON格式的數(shù)據(jù)，設(shè)置safe=False以允許序列化列表
return JsonResponse(subjects, safe=False)
配置URL映射后,，訪問該接口,，可以得到如下所示的JSON格式數(shù)據(jù)： [
{
'no': 101,
'name': 'Python全棧+人工智能',
'intro': 'Python是一種計算機程序設(shè)計語言。是一種面向?qū)ο蟮膭討B(tài)類型語言,，最初被設(shè)計用于編寫自動化腳本(shell),，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨立的,、大型項目的開發(fā),。',
'create_date': '2017-08-01',
'is_hot': true
},
// 此處省略下面的內(nèi)容
]
如果不希望在JSON數(shù)據(jù)中顯示學科的成立時間,，我們可以在映射器中排除create_date屬性；如果希望將是否為熱門學科對應的鍵取名為isHot（默認的名字是is_hot）,，也可以通過修改映射器來實現(xiàn),。具體做法如下： # 導入RawField
from bpmappers import RawField
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
# 定義SubjectMapper類，繼承自ModelMapper
class SubjectMapper(ModelMapper):
# 使用RawField指定is_hot字段的名稱
isHot = RawField('is_hot')
# 定義Meta類,，指定映射的模型和排除的字段
class Meta:
model = Subject
exclude = ('create_date', 'is_hot')
再次查看學科接口返回的JSON數(shù)據(jù)： [
{
'no': 101,
'name': 'Python全棧+人工智能',
'intro': 'Python是一種計算機程序設(shè)計語言,。是一種面向?qū)ο蟮膭討B(tài)類型語言，最初被設(shè)計用于編寫自動化腳本(shell),，隨著版本的不斷更新和語言新功能的添加,，越來越多被用于獨立的、大型項目的開發(fā),。',
'isHot': true
},
// 此處省略下面的內(nèi)容
]
關(guān)于bpmappers的詳細使用指南,，請參考它的官方文檔，這個官方文檔是用日語書寫的,，可以使用瀏覽器的翻譯功能將它翻譯成你熟悉的語言即可,。
02 返回JSON格式的數(shù)據(jù)
在使用Vue.js渲染頁面的上下文中，我們可以重新編寫subjects.html頁面,，以便利用Vue.js的強大功能來動態(tài)展示學科信息,。以下是改寫后的頁面代碼，適合在公眾號中發(fā)布： html <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>學科</title>
</head>
<body>
<!-- 頁面標題 -->
<h1>所有學科</h1>
<!-- 分隔線 -->
<hr>
<!-- Vue.js應用容器 -->
<div id='app'>
<!-- 使用v-for指令循環(huán)渲染每個學科 -->
<div v-for='subject in subjects'>
<!-- 學科標題,，使用:href綁定生成教師頁面的鏈接 -->
<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>
<!-- 引入Vue.js庫 -->
<script src='https://cdn./vue/2.6.10/vue.min.js'></script>
<script>
// 創(chuàng)建Vue實例
const app = new Vue({
// 綁定Vue實例到id為app的DOM元素
el: '#app',
// 定義數(shù)據(jù)對象，初始時subjects數(shù)組為空
data: {
subjects: []
},
// Vue實例創(chuàng)建完成后立即執(zhí)行的鉤子函數(shù)
created() {
// 使用fetch API從后端獲取學科數(shù)據(jù)
fetch('/subjects/')
.then(resp => resp.json())
.then(json => this.subjects = json)
},
// 定義方法對象,，包含getTeachersHref方法
methods: {
// 生成教師頁面的鏈接
getTeachersHref(sno) {
return `/static/teachers.html/?sno=${sno}`;
}
}
})
</script>
</body>
</html>
在前后端分離的開發(fā)模式下,，前端頁面通常作為靜態(tài)資源進行部署。在項目實際上線時,，我們會對Web應用進行動靜分離,，靜態(tài)資源通過Nginx或Apache服務器部署，而生成動態(tài)內(nèi)容的Python程序則部署在uWSGI或Gunicorn服務器上,。動態(tài)內(nèi)容的請求由Nginx或Apache路由到uWSGI或Gunicorn服務器上,。 在開發(fā)階段，我們通常會使用Django自帶的測試服務器,。如果要嘗試前后端分離,，可以先將靜態(tài)頁面放在之前創(chuàng)建的放靜態(tài)資源的目錄下。具體的做法可以參考項目的完整代碼,。對于想要全面了解和學習Vue.js的讀者,，建議閱讀Vue.js的官方教程或者在YouTube上搜索Vue.js的新手教程（Crash Course）進行學習。 03 學習資源 想要深入了解Vue.js，有許多優(yōu)質(zhì)的資源可以幫助你快速上手并掌握這門強大的前端框架,。以下是一些推薦的學習資源： 官方教程- Vue.js官方文檔(https://v2.cn./v2/guide/)這是學習Vue.js的最佳起點,。官方文檔詳細介紹了Vue.js的核心概念、API以及最佳實踐,。它不僅全面覆蓋了從基礎(chǔ)到高級的所有內(nèi)容,，還提供了豐富的示例代碼,，幫助你更好地理解和應用,。
- Vue Mastery(https://www./)Vue Mastery是一個專門針對Vue.js的在線學習平臺，提供了豐富的視頻教程和實戰(zhàn)項目,。它的課程由Vue.js核心團隊成員和行業(yè)專家講授,，內(nèi)容系統(tǒng)且更新頻繁。
在線教育平臺- Udemy(https://www./topic/vue-js/)Udemy提供了大量的Vue.js課程,，涵蓋初級,、中級和高級內(nèi)容。這些課程由資深開發(fā)者和講師錄制,，結(jié)構(gòu)清晰且內(nèi)容豐富,。你可以根據(jù)自己的需求和預算選擇合適的課程。
- Coursera(https://www./courses?query=vue.js)Coursera與知名大學和機構(gòu)合作,，提供Vue.js相關(guān)的專業(yè)課程和認證,。這些課程通常結(jié)合理論和實踐，適合希望系統(tǒng)學習Vue.js的學習者,。
YouTube教程- Traversy Media(https://www./blog/vue-crash-course)由Brad Traversy主持的頻道,，提供了高質(zhì)量的Vue.js教程和項目實例。這些視頻不僅免費,，而且內(nèi)容豐富,，適合初學者和有一定基礎(chǔ)的學習者。
- The Net Ninja(https://v/courses/category/vue-js)：這個頻道提供了系統(tǒng)且易懂的Vue.js教程,，適合初學者入門,。通過觀看這些視頻，你可以從不同的視角了解Vue.js的使用方法,。
社區(qū)和書籍- Vue.js社區(qū)加入Vue.js的社區(qū),，如論壇(https://forum./)、GitHub(https://github.com/vuejs/vue),、Slack(https:///questions/tagged/vue.js)等,，可以與其他開發(fā)者交流，獲取更多資源和支持,。
- 書籍推薦（https://weread.qq.com/web/bookDetail/84b32820813ab7c23g017d5a）《Vue.js權(quán)威指南》由Vue.js的創(chuàng)始人尤雨溪撰寫,，深入淺出地介紹了Vue.js的基本原理和核心概念。
通過結(jié)合這些資源，你可以全面掌握Vue.js的各個方面,，從基礎(chǔ)的概念到高級的應用技巧,。動手實踐是學習的關(guān)鍵，因此建議在學習過程中多編寫代碼,，構(gòu)建自己的項目,，以加深理解和應用能力. 部署與開發(fā)：在實際部署時，靜態(tài)資源通過Nginx或Apache部署,，而動態(tài)內(nèi)容則通過uWSGI或Gunicorn部署,。在開發(fā)階段，可以使用Django自帶的測試服務器,，并把靜態(tài)頁面放在專門的靜態(tài)資源目錄下,。 部署與開發(fā)
在實際部署時，靜態(tài)資源通過Nginx或Apache部署
靜態(tài)資源部署命令示例（以Nginx為例）
sudo cp -r /path/to/static /var/www/html
sudo nginx -s reload
動態(tài)內(nèi)容則通過uWSGI或Gunicorn部署
動態(tài)內(nèi)容部署命令示例（以Gunicorn為例）
gunicorn myproject.wsgi:application --bind 0.0.0.0:8000
在開發(fā)階段,，可以使用Django自帶的測試服務器
啟動Django測試服務器命令
python manage.py runserver
并把靜態(tài)頁面放在專門的靜態(tài)資源目錄下
靜態(tài)頁面存放目錄示例
/path/to/myproject/static
這樣既保留了內(nèi)容的序列號和邏輯結(jié)構(gòu),，又通過命令示例，清晰易懂,，方便讀者理解和應用,。同時，代碼塊的格式也符合公眾號的排版風格,，增強了可讀性和專業(yè)感,。 通過前后端分離，開發(fā)者可以更專注于自己的領(lǐng)域,，提高開發(fā)效率和代碼質(zhì)量,。這種方式是現(xiàn)代Web開發(fā)的不二之選。 前后端分離開發(fā)入門綜合案例 本文由python工程師俱樂部獨家發(fā)布,，請在獲得賬號管理員授權(quán)后轉(zhuǎn)載,。策劃：清風 丨 監(jiān)制：明月
編輯：嘯嘯 丨 圖片來源：稿定設(shè)計及網(wǎng)絡(luò)，侵刪 熟悉嘯嘯的小伙伴都知道,，只要有空,，我答疑都是免費的，不收任何粉絲的紅包,。但是,，為了篩選出一批真正想跟嘯嘯學習python的粉絲小友，給你提供一個干凈高效的python圈子,，真正回歸技術(shù)交流,；由資深工程師嘯嘯帶頭發(fā)起[python俱樂部]知識星球，面向編程行業(yè)技術(shù)從業(yè)者們,。與1000+工程師一起分享技術(shù),、經(jīng)驗、資源。星球內(nèi)有海量項目案例分享,、大佬實戰(zhàn)經(jīng)驗分享,、1v1有問必答、運維崗位內(nèi)推,、還有N多實用工具和資料干貨,，囊括了各種技術(shù)知識點，行業(yè)數(shù)據(jù)分析報告等等,。如果你對編程感興趣,，或者正在學習編程，歡迎加入我的編程俱樂部,。下篇開始學習RESTfuI架構(gòu)和DRF入門,，內(nèi)容如下：RESTful架構(gòu)簡介REST（Representational State Transfer）是一種軟件架構(gòu)風格,，它定義了客戶端和服務器之間如何通過HTTP協(xié)議進行通信,。RESTful架構(gòu)具有以下特點： - 無狀態(tài)服務器不存儲任何客戶端請求的狀態(tài)，每個請求都包含所有必要的信息,。
- 統(tǒng)一接口使用標準的HTTP方法（如GET,、POST、PUT,、DELETE）來操作資源,。
- 資源標識每個資源都有一個唯一的URI（統(tǒng)一資源標識符）。
- 表現(xiàn)層與數(shù)據(jù)層分離客戶端通過請求資源的表現(xiàn)形式（如JSON,、XML）來獲取數(shù)據(jù),。
Django REST Framework（DRF）簡介Django REST Framework是一個功能強大的工具包，用于構(gòu)建Web API,。它是Django的一個第三方庫,，提供了以下優(yōu)勢： - 序列化將Django模型轉(zhuǎn)換為JSON、XML等格式,，方便客戶端解析,。
- 視圖和路由簡化API視圖的編寫，支持多種視圖類型和自動路由,。
- 認證和權(quán)限提供多種認證方式和權(quán)限控制,，確保API的安全性。
- 文檔生成自動生成API文檔,，方便開發(fā)者和用戶了解API的使用方法,。
DRF入門示例以下是一個簡單的DRF入門示例，展示如何創(chuàng)建一個簡單的API來獲取學科信息： 安裝DRFpip install djangorestframework
定義模型和序列化器# models.py
from django.db import models
class Subject(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
# serializers.py
from rest_framework import serializers
from .models import Subject
class SubjectSerializer(serializers.ModelSerializer):
class Meta:
model = Subject
fields = ['id', 'name', 'description']
創(chuàng)建視圖和路由# views.py
from rest_framework import viewsets
from .models import Subject
from .serializers import SubjectSerializer
class SubjectViewSet(viewsets.ModelViewSet):
queryset = Subject.objects.all()
serializer_class = SubjectSerializer
# urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import SubjectViewSet
router = DefaultRouter()
router.register(r'subjects', SubjectViewSet)
urlpatterns = [
path('', include(router.urls)),
]
通過以上步驟,，我們創(chuàng)建了一個簡單的DRF API,，可以使用HTTP方法（如GET、POST）來獲取和操作學科信息。DRF的強大功能和簡潔的語法使得構(gòu)建RESTful API變得輕松高效,。
|
