基于Django和Vue的低代碼平臺構建

摘要：文章主要介紹了一種基于Django和Vue的低代碼平臺構建方案。首先闡述本低代碼平臺采用的前后端技術框架，接著分析了后端API代碼結構和前端UI的代碼結構以及自動化代碼構建的原理，然后提出了本低代碼平臺的構建方案和詳細步驟，最后給出了具體的應用實例驗證。

關鍵詞：Django；Vue；低代碼平臺；自動化構建

doi：10.3969/J.ISSN.1672-7274.2024.01.015

中圖分類號：TP 393.09? ? ? ? ? ? 文獻標志碼：B? ? ? ? ? ? 文章編碼：1672-7274（2024）01-00-04

Building a Low Code Platform Based on Django and Vue

ZHANG Liangfeng

（Hainan Vocational and Technical College of Economics and Trade， Haikou 571127， China）

Abstract： The article mainly introduces a low code platform construction solution based on Django and Vue. Firstly， the front-end and back-end technical framework adopted by this low code platform is elaborated， and the code structure of the back-end API and front-end UI， as well as the principles of automated code construction， are analyzed. Subsequently， a construction plan and detailed steps for this low code platform were proposed， and specific application examples were provided for verification.

Key words： Django; Vue; low code platform; automated build

低代碼平臺是一種通過可視化界面、拖曳組件等方式快速開發Web應用的平臺。它將應用開發的復雜性封裝在平臺內部，降低了開發人員的入門門檻和開發難度，讓更多非專業開發人員也能夠快速實現Web應用的開發。低代碼平臺的作用主要體現在增加應用開發的效率、加快應用部署的時間、降低應用開發的風險和成本^[1]等幾個方面。

本文在前后端分離的Web開發模式下，整合后端Django Restful Framework（DRF）框架和前端d2-crud-x框架，以表單模型為驅動，利用模板技術自動化構建代碼，搭建低代碼平臺。

1? ?技術框架分析

1.1 后端框架分析

在前后端分離的Web開發模式下^[2]開發REST API時，有兩個重要部分。

（1）序列化與反序列化：將Python對象（如模型實例）序列化成JSON、XML等格式，然后將其傳輸到客戶端或反序列化成Python對象供視圖使用。

（2）視圖：每個視圖具體操作的數據不同，但增、刪、改、查的實現流程基本套路化。增：校驗請求數據→執行反序列化過程→保存數據庫→將保存的對象序列化并返回；刪：判斷要刪除的數據是否存在→執行數據庫刪除；改：判斷要修改的數據是否存在→校驗請求的數據→執行反序列化過程→保存數據庫→將保存的對象序列化并返回；查：查詢數據庫→將數據序列化并返回。

DRF是一個基于Django框架的RESTful API開發框架。

models.py和定義視圖函數的views.py文件，并定義與views.py中ViewSet配套的定義路由的urls.py。models.py文件必須根據具體業務需求來手工創建，但是，基于models.py提供的模型類和字段定義，我們可以通過定義代碼模板，替換占位符${placeholder}，在serializers.py和views.py中自動化構建Serializer和ViewSet代碼，并在urls.py中自動生成路由。上述的代碼文件的模板定義如下。

（1）Serializer模板。

class ${placeholder}Serializer（BaseModelSerializer）：

class Meta：

model = ${placeholder}

fields = '__all__'

（2）ViewSet模板。

class ${placeholder}ViewSet（ModelViewSet）：

queryset = ${placeholder}.objects.all（）

serializer_class = ${placeholder}Serializer

（3）urls.py模板。

system_url = routers.SimpleRouter（）

${placeholder}

urlpatterns = []

urlpatterns += system_url.urls

1.2 前端框架分析

d2-crud-x是一種基于Vue框架的前端UI組件庫，它能夠自動化構建CRUD界面，支持搜索、篩選、排序、分頁等功能。

d2-crud-x可以根據models.py中的模型自動化構建前端UI代碼。通過在api.js中定義API接口，使用crud.js中的方法調用接口，在index.vue中定義表格和表單等組件，即可實現CRUD界面的搭建。相關代碼文件的模板定義如下。

（1）api.js模板。

import { request } from '@/api/service'

export const urlPrefix = '/api/${placeholder}/'

export function GetList（query） {

return request（{

url： urlPrefix，

method： 'get'，

params： query

}）}#AddObj/UpdateObj/DelObj（id）類似

（2）index.vue模板。

export default {

name： '${modelname}'，

mixins： [d2CrudPlus.crud]， // 最核心部分，繼承d2CrudPlus.crud

methods： {

getCrudOptions （） {

return crudOptions（this）

}，

pageRequest （query） {

return GetList（query）

}， // 數據請求，添加請求，修改請求，刪除請求類似

}}

（3）crud.js模板。

columns： [{

title： "ID"，

key： "id"，

}，

${placeholder}]

2? ?低代碼平臺構建方案

本低代碼平臺的構建方案分為以下步驟。

2.1 構建項目工程

使用Django的腳手架django-admin startproject構建Django項目工程。在工程中，我們需要引入用戶、角色、部門、菜單和權限管理模型，加入setting.py文件的INSTALLED_APPS中。這樣，就可以實現用戶、角色、部門和權限管理相關功能的自動化構建。

2.2 構建應用，編輯數據模型，自動化生成后端應用代碼

使用Django的腳手架django-admin startapp構建應用。在應用中，我們需要根據業務需求抽象并設計數據表，將其編寫為models.py的數據模型與字段定義，然后利用模板自動生成后端ViewSet、Serializer和urls的python代碼。在Django應用setting和urls中添加新創建的應用后，使用Django的腳手架makemigrations和migrate完成數據庫的創建和數據遷移，后端應用API就自動化構建完成了。

2.3 生成前端代碼

根據models.py的數據模型與字段定義，利用模板自動化生成前端api.js、crud.js和index.vue代碼同樣可以省時省力。通過使用d2-crud-x提供的模板^[3]，我們可以快速地生成這些代碼，并根據業務需求進行自定義修改，實現前端UI的自動化構建^[4]。

2.4 添加菜單和權限

獲取models.py的類名與字段：MyClass= getattr（module， model）；構建菜單對應的頁面名稱；MyClass._meta.verbose_name[0：-1]+'管理'；頁面訪問路徑："/"+model.lower（），Vue組件名稱model.lower（）；組件文件路徑：appName+"/"+model.lower（）；api接口路徑：r"/api/"+appName+r"/"+model.lower（）+r"/"。將上述參數構造成初始化腳本init_menu.json，通過Django.db.models提供的ORM機制加載入庫，實現前端動態加載新創建的應用頁面菜單。

2.5 啟動后端

使用python manager.py runserver 0.0.0.0：8000啟動后端API接口服務。

2.6 配置nginx

在nginx配置文件中，配置好端口和前后端服務路徑。

2.7 發布前端

使用npm run build構建前端Web應用，將構建好的代碼移入提前配置的nginx對應目錄下，啟動nginx即可啟動低代碼平臺。

2.8 擴展應用

在啟動后的低代碼平臺中，依據上述流程，可以根據業務發展需要維護和擴展應用。

3? ?應用案例驗證

3.1 案例需求

本案例是一個智慧校車的需求，要求校車司機上報校車的車輛位置，以便搭乘校車的教師查看校車到站情況（包括時間、距離等）。經過業務抽象，后端數據模型如下。

（1）路線管理：路線id、路線名稱。

（2）站點管理：站點id、站點名稱、站點時間、站點順序。

（3）車輛管理：車輛id、車牌號碼。

（4）司機管理：司機id、司機姓名、司機手機號。

（5）排班管理：司機id、車輛id、路線id、排班日期。

命名應用為mybus，將上述數據模型轉換為models.py，路線模型代碼如下。

class Route（models.Model）：

name = models.CharField（null=False， max_length=32， verbose_name="線路名稱"， help_text="線路名稱"）

station = models.ManyToManyField（to="Station"，verbose_name="站點名稱"， db_constraint=False， help_text="站點名稱"）

class Meta：

app_label = 'mybus'

db_table = "mybus_routes"

verbose_name = "路線表"

ordering = （"id"，）

3.2 自動化代碼構建

以Serializer和ViewSet為例，模板中的占位符placeholder = Route，替換后即可生成路線管理對應的views。

class RouteSerializer（BaseModelSerializer）：

station_info = DynamicSerializerMethodField（）

class Meta：

model = Route

fields = '__all__'

def get_station_info（self， instance， parsed_query）：

stations = instance.station.all（）

serializer = StationSerializer（

stations，

many=True，

parsed_query=parsed_query

）

return serializer.data

class RouteViewSet（CustomModelViewSet）：

queryset = Route.objects.all（）

serializer_class = RouteSerializer

對于urls.py，在模板中替換占位符為system_url.register（r'route'， RouteViewSet）即可完成路線管理路徑的配置。

system_url = routers.SimpleRouter（）

system_url.register（r'route'， RouteViewSet）

system_url.register（r'station'， StationViewSet）

system_url.register（r'bus'， BusViewSet）

system_url.register（r'position'， PositionViewSet）

system_url.register（r'dispatch'， DispatchViewSet）

根據模型中的類名和字段名稱，依次替換前端api.js，crud.js和Index.vue中的對應占位符，接口生成前端代碼。

3.3 構建頁面菜單

根據模型中的類名和字段名稱構建菜單配置文件。

{

"name"： "mybus"，

"children"： [

{

"name"： "路線管理"，

"web_path"： "/route"，

"component"： "mybus/route"，

"component_name"： "route"，

"menu_button"： [

{

"name"： "路線列表"，

"value"： "Search"，

"api"： "/api/mybus/route/"，

"method"： 0

}，]

}]

}

將配置導入數據庫，即可完成頁面菜單的配置。

3.4 應用界面

代碼構建完畢，添加菜單后，依次啟動前后端服務，訪問路線管理前端路徑，添加數據，如圖1所示，即說明應用服務成功。

4? ?結束語

本文介紹了基于Django和Vue的低代碼平臺構建方案。該方案可以快速構建Web應用程序，并具有快速開發和部署、易于維護和自定義特性等優點。我們通過一個實際案例驗證了該方案的可行性，建議將其用于各種基于表單模型的Web應用程序的開發中，并在此基礎上構建易用性更強和自動化程度更高的低代碼平臺。

參考文獻

[1] 康世杰，黃鶴．針對企業級應用復雜性的低代碼開發平臺架構[J]．綿陽師范學院學報，2023，42（2）：86-93.

[2] 郭文學．Web應用快速開發工具設計與實現[D]．濟南：山東大學，2022.

[3] 閆丹丹．基于低代碼的管理系統模板庫的設計與實現[D]．西安：西安電子科技大學，2022.

[4] 周鑫磊．基于低代碼的前端關鍵技術研究與實現[D]．西安：西安電子科技大學，2022.

基金項目：海南經貿職業技術學院“雙高計劃”院級科研項目（hnjmk2022209）；數據服務與大數據技術應用研究科研創新團隊（HNJMT2022-201）。

作者簡介：張良峰（1982-），男，湖北天門人，碩士研究生，研究方向為軟件技術。