前后端黃金組合：Django+Vue+Element UI，助你構(gòu)建完美平臺(tái)！

這是一篇什么文章？

一篇你對(duì)測(cè)試開(kāi)發(fā)工作感興趣，想了解系統(tǒng)工作邏輯的文章。

一篇是你在開(kāi)始動(dòng)手搭建環(huán)境前需要了解各工具原理的文章。

這是一篇你真正開(kāi)始前需要查閱的文章。

本文介紹了前后端工作原理，前后端搭建的流程、搭建過(guò)程中需要用到的技術(shù)以及開(kāi)發(fā)環(huán)境版本

一、前后端如何工作

后端開(kāi)發(fā)（Django+Rest Framework+MySQL）：

Django負(fù)責(zé)處理HTTP請(qǐng)求和響應(yīng)，以及URL路由的配置。它接收來(lái)自前端的HTTP請(qǐng)求，并根據(jù)URL將請(qǐng)求分發(fā)給相應(yīng)的視圖函數(shù)進(jìn)行處理。

Rest Framework是Django的擴(kuò)展，用于快速構(gòu)建RESTful API接口。通過(guò)Rest Framework，可以定義API視圖和序列化器，實(shí)現(xiàn)數(shù)據(jù)的序列化和反序列化，從而方便地與前端進(jìn)行數(shù)據(jù)交互。

MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)，用于存儲(chǔ)后端的數(shù)據(jù)。

前端開(kāi)發(fā)（Vue+Element UI）：

Vue是一種現(xiàn)代的JavaScript框架，用于構(gòu)建用戶界面。Vue提供了豐富的組件和模塊，可以幫助開(kāi)發(fā)者構(gòu)建交互式的單頁(yè)面應(yīng)用（SPA）。

Element UI是一個(gè)基于Vue的UI組件庫(kù)，提供了豐富的預(yù)定義組件，用于快速搭建美觀的用戶界面。

前后端交互：

后端通過(guò)Django Rest Framework提供API接口，前端通過(guò)Vue發(fā)起HTTP請(qǐng)求調(diào)用這些API接口。

前端通過(guò)HTTP請(qǐng)求向后端發(fā)送數(shù)據(jù)請(qǐng)求，后端根據(jù)請(qǐng)求進(jìn)行相應(yīng)的數(shù)據(jù)處理，并返回響應(yīng)數(shù)據(jù)給前端。

前端接收到后端返回的數(shù)據(jù)，并根據(jù)數(shù)據(jù)更新頁(yè)面展示，實(shí)現(xiàn)與用戶的交互。

總體而言，這種前后端分離的開(kāi)發(fā)模式有助于實(shí)現(xiàn)前后端開(kāi)發(fā)的解耦，使得各自的開(kāi)發(fā)工作更加專注和高效。前端負(fù)責(zé)用戶界面的呈現(xiàn)和交互，后端負(fù)責(zé)數(shù)據(jù)處理和業(yè)務(wù)邏輯，通過(guò)API接口進(jìn)行數(shù)據(jù)傳輸和交互，從而實(shí)現(xiàn)一個(gè)完整的Web應(yīng)用。

二、搭建流程

2.1后端搭建流程

安裝相關(guān)包->創(chuàng)建工程->后端依賴（pipenv）創(chuàng)建虛擬環(huán)境->后端服務(wù)配置啟動(dòng)->后端創(chuàng)建子應(yīng)用->后端Rest Framework->數(shù)據(jù)庫(kù)配置

簡(jiǎn)要說(shuō)明：

安裝相關(guān)包：在開(kāi)始之前，首先需要安裝Python和pip，然后安裝Django等相關(guān)包，可以使用pip命令來(lái)安裝。

創(chuàng)建工程：使用Django的命令行工具創(chuàng)建Django項(xiàng)目，例如：django-admin startproject projectname。

后端依賴（pipenv）創(chuàng)建虛擬環(huán)境：建議使用pipenv來(lái)創(chuàng)建和管理虛擬環(huán)境，以便隔離項(xiàng)目的依賴和環(huán)境。

后端服務(wù)配置啟動(dòng)：在虛擬環(huán)境下，通過(guò)Django的manage.py啟動(dòng)服務(wù)，例如：python manage.py runserver。

后端創(chuàng)建子應(yīng)用：根據(jù)項(xiàng)目的需要，可以創(chuàng)建多個(gè)子應(yīng)用（app）來(lái)管理不同的功能模塊。

后端Rest Framework：使用Django Rest Framework來(lái)構(gòu)建RESTful API，方便前端和其他應(yīng)用調(diào)用后端接口。

數(shù)據(jù)庫(kù)配置：配置Django項(xiàng)目的數(shù)據(jù)庫(kù)連接，通常使用MySQL作為后端數(shù)據(jù)庫(kù)，可以在settings.py中進(jìn)行配置。

2.2前端搭建流程

創(chuàng)建工程（模板）->前端依賴（npm install）->前端服務(wù)配置啟動(dòng)

簡(jiǎn)要說(shuō)明：

創(chuàng)建工程（模板）：可以使用Vue腳手架工具或其他模板工具來(lái)創(chuàng)建Vue項(xiàng)目的初始結(jié)構(gòu)。

前端依賴（npm install）：在項(xiàng)目目錄下執(zhí)行npm install命令，安裝項(xiàng)目所需的前端依賴包，這些依賴包通常存儲(chǔ)在package.json文件中。

前端服務(wù)配置啟動(dòng)：在項(xiàng)目目錄下執(zhí)行npm run serve命令，啟動(dòng)前端開(kāi)發(fā)服務(wù)器，可以在瀏覽器中預(yù)覽項(xiàng)目。

三、關(guān)鍵技術(shù)介紹

1、后端為什么要?jiǎng)?chuàng)建虛擬環(huán)境，創(chuàng)建虛擬環(huán)境可以達(dá)到什么效果？

隔離項(xiàng)目依賴：通過(guò)創(chuàng)建后端虛擬環(huán)境，每個(gè)項(xiàng)目都擁有獨(dú)立的Python解釋器和包安裝目錄，這樣可以避免不同項(xiàng)目之間的依賴沖突。每個(gè)虛擬環(huán)境只包含該項(xiàng)目所需的依賴，使得項(xiàng)目可以在獨(dú)立的環(huán)境中運(yùn)行，而不受其他項(xiàng)目的影響。

確保依賴一致性：虛擬環(huán)境通常會(huì)配合使用Pipenv等工具來(lái)管理項(xiàng)目的依賴，這樣可以確保項(xiàng)目在不同環(huán)境中安裝相同的依賴版本，從而避免由于依賴版本不一致而引發(fā)的錯(cuò)誤。

提高項(xiàng)目可移植性：將項(xiàng)目的依賴放在虛擬環(huán)境中，可以使得項(xiàng)目在不同的計(jì)算機(jī)或服務(wù)器上都能輕松地部署和運(yùn)行，而不需要擔(dān)心依賴問(wèn)題。

簡(jiǎn)化依賴管理：虛擬環(huán)境可以將項(xiàng)目所需的依賴以及其版本信息保存在一個(gè)文件中（例如Pipfile.lock），這樣可以方便地重現(xiàn)項(xiàng)目的開(kāi)發(fā)環(huán)境，使得依賴的安裝和管理更加簡(jiǎn)單和自動(dòng)化。

2、Pipenv介紹

Pipenv是Python的一個(gè)包管理工具和虛擬環(huán)境管理工具，它是為了解決Python項(xiàng)目中依賴管理和虛擬環(huán)境創(chuàng)建的問(wèn)題而開(kāi)發(fā)的。Pipenv結(jié)合了pip（Python的包管理工具）和virtualenv（Python的虛擬環(huán)境管理工具）的功能，提供了更方便、更高級(jí)的包管理和虛擬環(huán)境管理功能。

Pipenv的主要特點(diǎn)和功能包括：

自動(dòng)創(chuàng)建虛擬環(huán)境：在使用Pipenv安裝項(xiàng)目依賴時(shí)，它會(huì)自動(dòng)創(chuàng)建一個(gè)虛擬環(huán)境，確保項(xiàng)目的依賴不會(huì)與其他項(xiàng)目沖突。

管理依賴：Pipenv會(huì)自動(dòng)地管理項(xiàng)目的依賴關(guān)系，并將依賴信息保存在Pipfile和Pipfile.lock文件中，這樣可以確保項(xiàng)目在不同環(huán)境中安裝相同的依賴版本。

簡(jiǎn)化依賴安裝：使用Pipenv安裝依賴非常簡(jiǎn)單，只需要運(yùn)行一個(gè)命令即可，而不需要手動(dòng)管理依賴的安裝。

提供更友好的命令行界面：Pipenv提供了一組易于使用的命令，使得包管理和虛擬環(huán)境管理更加直觀和簡(jiǎn)便。

支持開(kāi)發(fā)模式：Pipenv支持將項(xiàng)目的開(kāi)發(fā)依賴和運(yùn)行時(shí)依賴分開(kāi)，這樣可以減少項(xiàng)目打包時(shí)的冗余依賴。

3、Django Rest Framework介紹

Django Rest Framework（簡(jiǎn)稱DRF）是一個(gè)用于構(gòu)建Web API的強(qiáng)大框架，它是基于Django（一個(gè)流行的Python Web框架）開(kāi)發(fā)的。DRF提供了一系列工具和功能，使得構(gòu)建RESTful API變得簡(jiǎn)單、靈活和高效。

DRF的主要特點(diǎn)和功能包括：

序列化：DRF提供了序列化器，可以將數(shù)據(jù)對(duì)象轉(zhuǎn)換成JSON等格式，以便于在API中進(jìn)行傳輸。同時(shí)，它也可以將傳入的JSON數(shù)據(jù)反序列化為數(shù)據(jù)對(duì)象，便于在后端進(jìn)行處理。

視圖：DRF提供了各種視圖類，用于處理API請(qǐng)求，并返回適當(dāng)?shù)捻憫?yīng)。包括基于函數(shù)的視圖和基于類的視圖，還有通用視圖和視圖集等。

路由：DRF提供了靈活的路由功能，用于將API請(qǐng)求映射到相應(yīng)的視圖處理函數(shù)上。

認(rèn)證和權(quán)限：DRF支持各種認(rèn)證和權(quán)限控制方式，可以保護(hù)API的安全性。

分頁(yè)和過(guò)濾：DRF提供了分頁(yè)和過(guò)濾功能，便于處理大量數(shù)據(jù)和篩選查詢結(jié)果。

強(qiáng)大的請(qǐng)求和響應(yīng)處理：DRF支持各種數(shù)據(jù)格式的請(qǐng)求和響應(yīng)處理，包括JSON、XML、HTML等。

API文檔生成：DRF自帶的Browsable API功能可以生成易于閱讀和理解的API文檔，方便開(kāi)發(fā)人員和團(tuán)隊(duì)的協(xié)作。

最后：在我的V：atstudy-js，可以免費(fèi)領(lǐng)取一份10G軟件測(cè)試工程師面試寶典文檔資料。以及相對(duì)應(yīng)的視頻學(xué)習(xí)教程免費(fèi)分享！其中包括了有基礎(chǔ)知識(shí)、Linux必備、Shell、互聯(lián)網(wǎng)程序原理、Mysql數(shù)據(jù)庫(kù)、抓包工具專題、接口測(cè)試工具、測(cè)試進(jìn)階-Python編程、Web自動(dòng)化測(cè)試、APP自動(dòng)化測(cè)試、接口自動(dòng)化測(cè)試、測(cè)試高級(jí)持續(xù)集成、測(cè)試架構(gòu)開(kāi)發(fā)測(cè)試框架、性能測(cè)試、安全測(cè)試等。