基于Django和Vue的低代碼平臺(tái)構(gòu)建

摘要：文章主要介紹了一種基于Django和Vue的低代碼平臺(tái)構(gòu)建方案。首先闡述本低代碼平臺(tái)采用的前后端技術(shù)框架，接著分析了后端API代碼結(jié)構(gòu)和前端UI的代碼結(jié)構(gòu)以及自動(dòng)化代碼構(gòu)建的原理，然后提出了本低代碼平臺(tái)的構(gòu)建方案和詳細(xì)步驟，最后給出了具體的應(yīng)用實(shí)例驗(yàn)證。

關(guān)鍵詞：Django；Vue；低代碼平臺(tái)；自動(dòng)化構(gòu)建

doi：10.3969/J.ISSN.1672-7274.2024.01.015

中圖分類號(hào)：TP 393.09? ? ? ? ? ? 文獻(xiàn)標(biāo)志碼：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

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

本文在前后端分離的Web開發(fā)模式下，整合后端Django Restful Framework（DRF）框架和前端d2-crud-x框架，以表單模型為驅(qū)動(dòng)，利用模板技術(shù)自動(dòng)化構(gòu)建代碼，搭建低代碼平臺(tái)。

1? ?技術(shù)框架分析

1.1 后端框架分析

在前后端分離的Web開發(fā)模式下^[2]開發(fā)REST API時(shí)，有兩個(gè)重要部分。

（1）序列化與反序列化：將Python對象（如模型實(shí)例）序列化成JSON、XML等格式，然后將其傳輸?shù)娇蛻舳嘶蚍葱蛄谢蒔ython對象供視圖使用。

（2）視圖：每個(gè)視圖具體操作的數(shù)據(jù)不同，但增、刪、改、查的實(shí)現(xiàn)流程基本套路化。增：校驗(yàn)請求數(shù)據(jù)→執(zhí)行反序列化過程→保存數(shù)據(jù)庫→將保存的對象序列化并返回；刪：判斷要?jiǎng)h除的數(shù)據(jù)是否存在→執(zhí)行數(shù)據(jù)庫刪除；改：判斷要修改的數(shù)據(jù)是否存在→校驗(yàn)請求的數(shù)據(jù)→執(zhí)行反序列化過程→保存數(shù)據(jù)庫→將保存的對象序列化并返回；查：查詢數(shù)據(jù)庫→將數(shù)據(jù)序列化并返回。

DRF是一個(gè)基于Django框架的RESTful API開發(fā)框架。

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

（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組件庫，它能夠自動(dòng)化構(gòu)建CRUD界面，支持搜索、篩選、排序、分頁等功能。

d2-crud-x可以根據(jù)models.py中的模型自動(dòng)化構(gòu)建前端UI代碼。通過在api.js中定義API接口，使用crud.js中的方法調(diào)用接口，在index.vue中定義表格和表單等組件，即可實(shí)現(xiàn)CRUD界面的搭建。相關(guān)代碼文件的模板定義如下。

（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）

}， // 數(shù)據(jù)請求，添加請求，修改請求，刪除請求類似

}}

（3）crud.js模板。

columns： [{

title： "ID"，

key： "id"，

}，

${placeholder}]

2? ?低代碼平臺(tái)構(gòu)建方案

本低代碼平臺(tái)的構(gòu)建方案分為以下步驟。

2.1 構(gòu)建項(xiàng)目工程

使用Django的腳手架django-admin startproject構(gòu)建Django項(xiàng)目工程。在工程中，我們需要引入用戶、角色、部門、菜單和權(quán)限管理模型，加入setting.py文件的INSTALLED_APPS中。這樣，就可以實(shí)現(xiàn)用戶、角色、部門和權(quán)限管理相關(guān)功能的自動(dòng)化構(gòu)建。

2.2 構(gòu)建應(yīng)用，編輯數(shù)據(jù)模型，自動(dòng)化生成后端應(yīng)用代碼

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

2.3 生成前端代碼

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

2.4 添加菜單和權(quán)限

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

2.5 啟動(dòng)后端

使用python manager.py runserver 0.0.0.0：8000啟動(dòng)后端API接口服務(wù)。

2.6 配置nginx

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

2.7 發(fā)布前端

使用npm run build構(gòu)建前端Web應(yīng)用，將構(gòu)建好的代碼移入提前配置的nginx對應(yīng)目錄下，啟動(dòng)nginx即可啟動(dòng)低代碼平臺(tái)。

2.8 擴(kuò)展應(yīng)用

在啟動(dòng)后的低代碼平臺(tái)中，依據(jù)上述流程，可以根據(jù)業(yè)務(wù)發(fā)展需要維護(hù)和擴(kuò)展應(yīng)用。

3? ?應(yīng)用案例驗(yàn)證

3.1 案例需求

本案例是一個(gè)智慧校車的需求，要求校車司機(jī)上報(bào)校車的車輛位置，以便搭乘校車的教師查看校車到站情況（包括時(shí)間、距離等）。經(jīng)過業(yè)務(wù)抽象，后端數(shù)據(jù)模型如下。

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

（2）站點(diǎn)管理：站點(diǎn)id、站點(diǎn)名稱、站點(diǎn)時(shí)間、站點(diǎn)順序。

（3）車輛管理：車輛id、車牌號(hào)碼。

（4）司機(jī)管理：司機(jī)id、司機(jī)姓名、司機(jī)手機(jī)號(hào)。

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

命名應(yīng)用為mybus，將上述數(shù)據(jù)模型轉(zhuǎn)換為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="站點(diǎn)名稱"， db_constraint=False， help_text="站點(diǎn)名稱"）

class Meta：

app_label = 'mybus'

db_table = "mybus_routes"

verbose_name = "路線表"

ordering = （"id"，）

3.2 自動(dòng)化代碼構(gòu)建

以Serializer和ViewSet為例，模板中的占位符placeholder = Route，替換后即可生成路線管理對應(yīng)的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）

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

3.3 構(gòu)建頁面菜單

根據(jù)模型中的類名和字段名稱構(gòu)建菜單配置文件。

{

"name"： "mybus"，

"children"： [

{

"name"： "路線管理"，

"web_path"： "/route"，

"component"： "mybus/route"，

"component_name"： "route"，

"menu_button"： [

{

"name"： "路線列表"，

"value"： "Search"，

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

"method"： 0

}，]

}]

}

將配置導(dǎo)入數(shù)據(jù)庫，即可完成頁面菜單的配置。

3.4 應(yīng)用界面

代碼構(gòu)建完畢，添加菜單后，依次啟動(dòng)前后端服務(wù)，訪問路線管理前端路徑，添加數(shù)據(jù)，如圖1所示，即說明應(yīng)用服務(wù)成功。

4? ?結(jié)束語

本文介紹了基于Django和Vue的低代碼平臺(tái)構(gòu)建方案。該方案可以快速構(gòu)建Web應(yīng)用程序，并具有快速開發(fā)和部署、易于維護(hù)和自定義特性等優(yōu)點(diǎn)。我們通過一個(gè)實(shí)際案例驗(yàn)證了該方案的可行性，建議將其用于各種基于表單模型的Web應(yīng)用程序的開發(fā)中，并在此基礎(chǔ)上構(gòu)建易用性更強(qiáng)和自動(dòng)化程度更高的低代碼平臺(tái)。

參考文獻(xiàn)

[1] 康世杰，黃鶴．針對企業(yè)級應(yīng)用復(fù)雜性的低代碼開發(fā)平臺(tái)架構(gòu)[J]．綿陽師范學(xué)院學(xué)報(bào)，2023，42（2）：86-93.

[2] 郭文學(xué)．Web應(yīng)用快速開發(fā)工具設(shè)計(jì)與實(shí)現(xiàn)[D]．濟(jì)南：山東大學(xué)，2022.

[3] 閆丹丹．基于低代碼的管理系統(tǒng)模板庫的設(shè)計(jì)與實(shí)現(xiàn)[D]．西安：西安電子科技大學(xué)，2022.

[4] 周鑫磊．基于低代碼的前端關(guān)鍵技術(shù)研究與實(shí)現(xiàn)[D]．西安：西安電子科技大學(xué)，2022.

基金項(xiàng)目：海南經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院“雙高計(jì)劃”院級科研項(xiàng)目（hnjmk2022209）；數(shù)據(jù)服務(wù)與大數(shù)據(jù)技術(shù)應(yīng)用研究科研創(chuàng)新團(tuán)隊(duì)（HNJMT2022-201）。

作者簡介：張良峰（1982-），男，湖北天門人，碩士研究生，研究方向?yàn)檐浖夹g(shù)。