Web前后端分離開發(fā)的方法是什么

發(fā)布時間：2021-11-02 09:16:59 來源：億速云閱讀：192 作者：iii 欄目：編程語言

本篇內容主要講解“Web前后端分離開發(fā)的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Web前后端分離開發(fā)的方法是什么”吧!

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

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

提升開發(fā)效率。前后端分離以后，可以實現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結束。在這種情況下，前后端工程師都可以只專注于自己的開發(fā)工作，有助于打造出更好的團隊。除此之外，在前后端分離的開發(fā)模式下，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進行變動即可。
增強代碼的可維護性。前后端分離后，應用的代碼不再是前后端混合，只有在運行期才會有調用依賴關系，這樣的話維護代碼的工作將變得輕松愉快很多，再不會牽一發(fā)而動全身。當你的代碼變得簡明且整潔時，代碼的可讀性和可維護性都會有質的提升。
支持多終端和服務化架構。前后端分離后，同一套數(shù)據(jù)接口可以為不同的終端提供服務，更有助于打造多終端應用；此外，由于后端提供的接口之間可以通過HTTP(S)進行調用，有助于打造服務化架構（包括微服務）。

接下來我們就用前后端分離的方式來改寫之前的投票應用。

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

剛才說過，在前后端分離的開發(fā)模式下，后端需要為前端提供數(shù)據(jù)接口，這些接口通常返回JSON格式的數(shù)據(jù)。在Django項目中，我們可以先將對象處理成字典，然后就可以利用Django封裝的JsonResponse向瀏覽器返回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)遍歷查詢學科得到的QuerySet對象，將每個學科的數(shù)據(jù)處理成一個字典，在將字典保存在名為subjects的列表容器中，最后利用JsonResponse完成對列表的序列化，向瀏覽器返回JSON格式的數(shù)據(jù)。由于JsonResponse序列化的是一個列表而不是字典，所以需要指定safe參數(shù)的值為False才能完成對subjects的序列化，否則會產(chǎn)生TypeError異常。

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

安裝三方庫bpmappers。

pip install bpmappers

編寫映射器（實現(xià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映射，然后訪問該接口，可以得到如下所示的JSON格式數(shù)據(jù)。

[
    {
        "no": 
101,
        "name": 
"Python全棧+人工智能",
        "intro": 
"Python是一種計算機程序設計語言。是一種面向對象的動態(tài)類型語言，最初被設計用于編寫自動化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨立的、大型項目的開發(fā)。",
        "create_date": 
"2017-08-01",
        "is_hot": 
true
    },
    // 此處省略下面的內容
]

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

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')

再次查看學科接口返回的JSON數(shù)據(jù)。

[
    {
        "no": 
101,
        "name": 
"Python全棧+人工智能",
        "intro": 
"Python是一種計算機程序設計語言。是一種面向對象的動態(tài)類型語言，最初被設計用于編寫自動化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用于獨立的、大型項目的開發(fā)。",
        "isHot": 
true
    },
    // 此處省略下面的內容
]

關于bpmappers詳細的使用指南，請參考它的官方文檔，這個官方文檔是用日語書寫的，可以使用瀏覽器的翻譯功能將它翻譯成你熟悉的語言即可。

使用Vue.js渲染頁面

關于Vue.js的知識，我們在第21天到第30天（之前）的內容中已經(jīng)介紹過了，這里我們不再進行贅述。如果希望全面的了解和學習Vue.js，我整理了視頻版的學習教程，要學習的伙伴可以留言回復：“Python視頻教程”，領取視頻教程。

重新改寫subjects.html頁面，使用Vue.js來渲染頁面。

<!DOCTYPE 
html>
<html lang="en">
<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>

前后端分離的開發(fā)需要將前端頁面作為靜態(tài)資源進行部署，項目實際上線的時候，我們會對整個Web應用進行動靜分離，靜態(tài)資源通過Nginx或Apache服務器進行部署，生成動態(tài)內容的Python程序部署在uWSGI或者Gunicorn服務器上，對動態(tài)內容的請求由Nginx或Apache路由到uWSGI或Gunicorn服務器上。

到此，相信大家對“Web前后端分離開發(fā)的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

向AI問一下細節(jié)

Web前后端分離開發(fā)的方法是什么

猜你喜歡

最新資訊

相關推薦

相關標簽