摘" 要：东巴画数字展示平台基于Python语言开发，以Djago+Ajax+MySQL作为前端数据展示及后端数据处理的关键技术，能够为广大用户提供东巴画在线查看、检索等服务。借助该平台的后端管理功能还能实现东巴画的上传、修改、删除等功能，同时还能够灵活地调整东巴画分类及前台动态菜单的生成。东巴数字化展示平台建设对纳西东巴画的保护、传承、传播具有重要意义。
关键词：东巴画数字展示；Django；Ajax
中图分类号：TP311" 文献标识码：A" 文章编号：2096-4706（2024）19-0109-06
Design and Implementation of Dongba Painting Digital Exhibition Platform Based on Django + Ajax
YANG Zhiqin
（Lijiang Culture and Tourism College， Lijiang" 674199， China）
Abstract： The Dongba painting digital exhibition platform is developed based on Python language， and Django + Ajax + MySQL are the key technologies for front-end data display and back-end data processing. It can provide online viewing， searching and other services of Dongba paintings for a wide range of users. With the help of the back-end management function of the platform， it can also realize uploading， modification， deletion and other functions of Dongba paintings， and can flexibly adjust the classification of Dongba paintings and the generation of dynamic menus on the front desk. The construction of the Dongba painting digital exhibition platform is of great significance to the protection， inheritance and dissemination of Naxi Dongba paintings.
Keywords： Dongba painting digital exhibition; Django; Ajax
0" 引" 言
东巴文化指纳西族传统文化，围绕各种祭祀仪式，产生了文字、绘画、泥塑、法器、音乐、舞蹈、经文等形式的文化遗产[1]。纳西族东巴画是东巴文化的有机组成部分，东巴画以艺术语言反映了东巴文化所蕴含的宗教观、价值观[2]。东巴画是纳西族东巴文化艺术的一项重要组成内容，流传在云南省丽江市和迪庆州香格里拉市三坝地区，它是纳西族东巴进行宗教活动仪式时，绘制的各种各样的佛神、人物、动物、植物以及妖魔鬼怪的形象，并对他们进行膜拜与祭祀，这种服务于宗教活动的各种绘画统称为东巴画。
非物质文化遗产作为中华优秀传统文化的一部分，既是人类在漫长的历史发展中所遗留下来的文化成果，同时镌刻着民族的记忆。因此，确保非物质文化遗产具有良好的保护和传播态势，对继承和发展中华优秀传统文化、推进文化自信自强有着重大战略意义[3]。非物质文化遗产数字化有利于非物质文化遗产突破时空限制[4]。当下，在信息化、智慧化技术应用不断渗透和深入到各行各业的背景下，使用数字化技术对东巴进行展示，不仅可以更好地保护东巴画本身，同时也能更加广泛的传播东巴文化知识，对于东巴画的传承与保护有着重要的意义。在互联网高速发展的背景下，应为东巴画的保护与传播寻找适应方案，充分利用新媒体的优势，构建线上线下立体式的传播路径，使东巴画从特定地域中传播出来[5]。
东巴画数字展示平台具有东巴画收集、处理、分类展示及管理功能。该平台是基于Python Django框架开发的B/S模式Web服务系统，利用Ajax实现服务器端的异步数据交互。Web服务器端采用MTV架构实现业务分层，数据库服务器端可以持久化保存东巴画数据，并通过自定义存储过程实现数据的查询优化，最终实现将东巴画以数字化的形式加以展示。
1" 平台技术简介
1.1" Django框架
Python下有多款开源的Web框架比如Django、Tornado、Flask等，其中Django最有代表性、应用范围最广泛[6]。Django是用Python编写的一个开源Web开发框架，它同时集成了一个轻量的Web Server，使开发人员可以以最少的代码、最快的速度，方便高效地进行各种Web应用的开发和调试。Django是一款由Python驱动的、开源的、采用模型M（Model）、模板T（Template）和视图V（View）的MTV设计模式的Web应用框架。Django框架的设计模式借鉴了MVC框架的思想，也是分成三部分，来降低各个部分之间的耦合性。Django框架的不同之处在于它拆分的三部分为：模型M、模板T和视图V，即MTV的框架模式。模型层负责具体业务与数据库对象，模板层负责向用户呈现页面效果，视图层则负责所有业务逻辑的实现及对模型层M和模板层T的调用[7]。
1.2" Ajax技术
Ajax全称为“Asynchronous JavaScript and XML（异步JavaScript和XML）”，它集HTML、JavaScriptTM、DHTML和DOM技术的优点于一身[8]。Ajax可以为以太网提供更新服务且无须刷新页面[9]，它解决了传统定时刷新页面时整个页面会闪烁的问题，优化了用户体验，另外由于只是页面局部进行刷新操作，提交刷新请求和接收返回数据更少，节约了带宽资源。
当访问采用Ajax机制的网页时，通过给Ajax请求提供新的URL地址动态获取网页数据，经过浏览器渲染后呈现在用户面前[10]。目前有非常多使用Ajax的应用程序案例：新浪微博、微信网页版、开心网等。Ajax工作原理如图1所示。
2" 平台设计与实现
2.1" 平台架构及数据流设计
要将东巴画以数字化的方式展现给用户，需要前端页面与后台进行数据交互，尤其是图片数据的交互，其核心问题就是平台的架构以及数据的流转，如图2所示。
用户在浏览器中输入东巴画展示平台地址后发起访问请求，Web服务器在收到请求后根据请求地址中的信息查找Django的路由文件，路由文件根据请求地址将请求转至对应的视图层中的函数，在此过程中需要与模型层进行配合，完成数据的处理。数据处理完毕后由视图层将数据封装为JSON格式数据传递给路由文件，并由Web服务器返回给用户界面，用户界面接收到JSON格式的返回数据后对其进行渲染并最终呈现给用户。
东巴画数字展示平台除了有前端的数据展示界面，如图2、图3所示，还包括后台管理界面，后台管理的架构与前端展示界面架构一致，如图4所示。
2.2" 关键技术实现
要使用Ajax必须先引用jQuery，本文使用的jQuery版本为1.10.2，引用方法如下：
lt;script src=\"https：//www.jq22.com/jquery/jquery-1.10.2.js\"gt;lt;/scriptgt;
2.2.1" 构建动态菜单
东巴画数字展示平台支持动态菜单的构建和展示，菜单项由后台进行添加和维护，展示页面会自动根据后台添加的菜单项动态构建展示用菜单。
构建动态菜单过程分为如下几步：
1）用户输入东巴画数字展示平台网址发起访问，如：http：//127.0.0.1：8000。
2）Web服务器根据访问地址将请求转至路由文件URLs，若请求地址存在，则执行与之对应的视图层中的处理函数，此处的处理函数仅做一个操作：将页面引导至主页，核心代码如下：
return render（request，index.html）
3）Web服务器将主页进行编码并返回给用户端的浏览器。
4）用户端浏览器接收到返回数据后进行解码并展示主页。
5）主页中包含了Ajax异步请求，该请求的作用是异步获取动态菜单的内容，核心代码如下：
//获取菜单项数据
$.ajax（{
type： \"POST\"，//请求方式为POST
url： \"/htgl/sjgl/\"，//请求处理地址
data： {lx： glfl}，//具体参数
dataType： \"JSON\"，//数据返回值的类型
beforeSend： function （xhr， settings） {
xhr.setRequestHeader（\"X-CSRFToken\"， \"{{ csrf_token }}\"）;
}，
success： function （data） {
//请求成功后的处理动作
if （data.length gt; 0） {
var html_flnr=\"\";
for （var i=0; i lt; data.length; i++） {
html_flnr +=lt;div class=\"col s4\"gt;;
html_flnr +=lt;a class=\"content\" style=\" margin-bottom： 20px; display： block;\" href=\"/flnr/？flid=+data[i].flid+\"gt;;
html_flnr +=lt;i class=\"fas fa-leaf\"gt;lt;/igt;;
html_flnr +=lt;spangt;+data[i].flmc+lt;/spangt;;
html_flnr +=lt;/agt;;
html_flnr +=lt;/divgt;;
}
//渲染菜单
$（\"#flnr\"）.html（html_flnr）;
}
}
}）
6）Web服务器接收到Ajax异步请求后将请求地址转至路由文件URLs，Pyhton将执行URLs文件中的代码，若请求地址存在，则执行与之对应的视图层中的处理函数，最后将处理结果封装为JSON格式的数据返回给用户端浏览器。视图层对应的处理函数名称为SJGL，该函数核心代码如下：
if request.method==\"POST\"：
# 接收参数
lx=request.POST.get（\"lx\"）
result=\"\"
sql=\"\"
# 判断是否为空
if （lx==\"glfl\"）：
sql=\"select * from dbhzs_fl order by tjsj desc\"
jg=DB（sql）.Cx（）
//返回json格式的数据
return HttpResponse（json.dumps（jg，cls=DateEncoder））
7）用户端浏览器接收到返回的JSON格式数据后对其进行处理并重新渲染页面。
2.2.2" 分类展示页面的实现
分类展示页面已经使用HTML+CSS设计完毕，这里不再赘述，效果如图5所示。当用户点击东巴画某一分类后，浏览器会将请求的地址及参数一并提交给Web服务器，Web服务器接收到请求后将请求转至URLs文件，Python将执行URLs文件并根据路由地址执行与之对应的视图层中的函数。
使用Django框架中的模板语言（Django Template Language， DTL）也能够实现分类展示页面的动态加载，但该方法在实现上需要视图层将处理完毕后的数据传递给模板页面，再通过相应的DTL进行处理才能够完成数据的加载和呈现，开发人员必须掌握DTL的语法规则方能灵活运用。此外，由于DTL是操作整个页面的内容，如果需要加载的分类内容较多时，页面加载的速度会明显变慢。使用Ajax则不需要额外学习DTL，只需要掌握HTML语法知识即可，在易用性上相对简单，加之Ajax是异步请求，可在页面加载过程中同步实现数据的更新，无须刷新页面，减少用户等待时间[11]，因此在页面加载速度上Ajax更快。基于以上原因，东巴画数字展示平台在进行分类页面的展示采用了Ajax技术。分类展示的步骤如下：
1）用户点击某一分类的超链接按钮发起浏览请求并附带该分类的ID号。
2）Web服务器接收请求后将请求地址转至路由文件URLs，Python查找并执行URLs文件中与之对应的视图层函数。该请求的URLs代码如下：
urlpatterns=[path（flnr/，htgl_views.flnr），]
对应的函数为flnr，其核心代码如下：
return render（request，\"flnr.html\"）;
flnr函数的作用是打开flnr.html页面。
3）flnr.html页面在加载中将触发Ajax请求，该请求的作用是加载属于某一分类ID中的所有数据信息。其核心代码如下：
$.ajax（{
type： \"POST\"，
url： \"/htgl/sjgl/\"，//请求处理地址
data： {lx： flnr，cs：$（\"#flid\"）.val（）}，//具体参数
dataType： \"JSON\"，//数据返回值的类型
beforeSend： function （xhr， settings） {
xhr.setRequestHeader（\"X-CSRFToken\"， \"{{ csrf_token }}\"）;
}，
success： function （data） {
//渲染页面
if （data.length gt; 0） {
var html=\"\";
for （var i=0; i lt; data.length; i++） {
html += lt;ligt;lt;a href=\"/flnr_mx/？id=+data[i].id+\"gt; + data[i].flmc + lt;/agt;lt;/ligt;;
}
$（\"#left_menu\"）.html（html）;
}
}
}）
Web服务器接收Ajax请求后会将请求地址转至路由文件URLs，Python查找并执行URLs文件中与之对应的视图层函数。该请求的URLs代码如下：
urlpatterns=[path（htgl/sjgl/，htgl_views.sjgl），]
SJGL函数的核心代码如下：
cs=request.POST.get（\"cs\"）
if （lx== \"flgl\"）：
sql=\"select * from dbhzs_fl a，dbhzs_th b where a.flid=b.flid and a.flid={0}\".format（cs）
jg=DB（sql）.Cx（）
return HttpResponse（json.dumps（jg， cls=DateEncoder））
上述代码的处理逻辑首先是接收Ajax传入的名称为cs的参数，该参数表示具体的某一分类ID，然后从数据库中查询出该分类ID的所有内容，最后将查询结果封装为JSON格式的数据返回给Ajax所在的页面。
4）flnr.html接收到Web服务器返回的JSON格式数据后开始根据数据渲染页面。代码参考第3步中的Ajax请求核心代码。
至此，分类展示页面加载完毕。
2.2.3" 详细展示页面的实现
详细展示页面的实现过程与分类页面相似，如图6所示。不同的地方是：
1）页面文件不同。详细展示的页面文件为：flnr_Mx.html。
2）Ajax请求的参数中lx参数和cs参数值不同。
3）Ajax获取数据后对页面的渲染代码不同。
4）处理函数中SQL查询语句不同。
除以上4点外，详细页面的展示原理与2.2.2中的原理是一致的，这里不再赘述。
2.2.4" 图片上传功能的实现
图片上传功能属于东巴画数字展示平台后台管理中的重要功能。通过该功能可实现将搜集到的东巴画以数字化的方式上传至Web服务器进行保存。根据本平台的设计要求，上传的东巴画格式为JPEG文件，图片大小不限。图片上传后保存在Web服务器磁盘内，MySQL数据库仅保存对应图片的存放位置及分类、上传时间等信息。上传界面如图7所示。
要实现图片上传功能可借助FormData对象实现，同时也可通过客户端对图片进行Base64位编码，Web服务器端接收编码后解码还原图片再将图片进行保存。前者在速度和效率上都比后者强，但缺点是有的浏览器只部分支持FormData对象，比如苹果系统的Safari浏览器，在进行图片上传时就不能采用FormData对象。东巴画数字展示平台的图片上传功能仅面向PC端开放，可以不考虑移动端无法使用的情况，因此本平台使用FormData对象实现图片上传功能。
在Ajax中使用FormData对象上传图片，需要将Ajax请求参数中的data值设置为FormData类型。使用Ajax进行图片上传核心代码如下：
var formData=new FormData（）; // 创建FormData对象并将表单内容放入其中
formData.append（\"avatar_img\"，$（\"#sctp\"）[0].files[0]）;//获取图片文件数据
$.ajax（{
url： /htgl/sctp/， // 设置后台接收上传文件的URL地址
type： POST，
dataType： json，
processData： 1， // 不要处理数据
contentType： 1， // 不要设置Content-Type头部信息
data： formData，
beforeSend： function （xhr， settings） {
xhr.setRequestHeader（\"X-CSRFToken\"， \"{{ csrf_token }}\"）;
}，
success： function （data） {
for （var i=0; i lt; data.length; i++） {
if （data[i].error==1） {
swal（{
title： \"警告\"，
text： data[i].msg
}）;
}else if（data[i].error==0）{
console.log（data[i].tplj）;
$（\"#tplj\"）.val（\"\"）;
$（\"#tplj\"）.val（data[i].tplj）;
swal（{
title： \"成功\"，
text： \"上传成功\"，
type： \"success\"
}）;
}
}
}
}）;
Django中处理图片上传的函数核心代码如下：
if request.method==\"POST\"：
img=request.FILES.get（avatar_img）
# 获取图片的全文件名
img_name=img.name
# 截取文件后缀和文件名
mobile=os.path.splitext（img_name）[0]
ext=os.path.splitext（img_name）[1]
#只能上传.jpg和.jpeg文件
if ext==\".jpg\" or ext==\".jpeg\" or ext==\".JPG\" or ext==\".JPEG\"：
# 以当前时间戳重命名图片
img_name=datetime.now（）.strftime（\"%Y%m%d%H%M%S\"） +str（random.randint（100，999））+ ext
# 从配置文件中载入图片保存路径
img_path=\"static/uploads/\"+img_name
# 写入文件
with open（img_path， ab） as fp：
# 如果上传的图片非常大，就通过chunks（）方法分割成多个片段来上传
for chunk in img.chunks（）：
fp.write（chunk）
result=[{\"error\"： 0， \"msg\"： \"上传成功\"，\"tplj\"：img_path}]
return HttpResponse（json.dumps（result， cls=DateEncoder））
else：
result=[{\"error\"： 1， \"msg\"： \"只能上传jpg或jepg格式的图片\"}]
return HttpResponse（json.dumps（result））
else：
result=[{\"error\"： 1， \"msg\"： \"只支持POST请求\"}]
return HttpResponse（json.dumps（result））
3" 结" 论
本文阐述了东巴画数字展示平台的总体设计和关键技术实现。本平台采用Ajax负责前端数据的展示，Django+MySQL负责后端数据处理的可视化技术解决方案，同时探讨了将Django与Ajax技术相结合实现图片文件上传的方法，可为其他有类似需求的系统开发提供借鉴。
参考文献：
[1] 王健丰.文化可持续视角下东巴文化数字化保护探究 [J].文化学刊，2023（2）：44-47.
[2] 和爱东，杨鸿荣.试论东巴画与东巴文化的关系 [J].思想战线，2010，36（S1）：20-22.
[3] 冷嘉铭.数字档案库参与“非遗”保护发展路径探析——以岭南传统艺术影像档案库为例 [J].科技和产业，2023，23（14）：59-65.
[4] 崔红.云南省哈尼族非物质文化遗产的数字化保护研究 [J].云南农业大学学报：社会科学，2024，18（2）：150-156.
[5] 彭吉玉，吴志昊.新媒体语境下非遗传播策略研究——以纳西族东巴画为例 [J].苏州工艺美术职业技术学院学报，2023（4）：81-84.
[6] 韦平安.基于Django的网络学习平台的开发与应用 [J].山西电子技术，2023（2）：71-73.
[7] 郑棉炜，陈旭杨，钟一凡，等.基于Django的勤工俭学工资申报系统 [J].网络安全技术与应用，2023（2）：37-39.
[8] 王伦，马天才.基于Django框架的GPS Web服务器的设计与实现 [J].机电一体化，2017，23（11）：43-48.
[9] 芦杉.异步服务的以太网流量监测系统设计 [J].自动化与仪器仪表，2022（2）：100-103.
[10] 聂得欣.基于AJAX的网络爬虫应用研究 [J].河南财政税务高等专科学校学报，2022，36（5）：93-96.
[11] 徐永春，蔡龙飞.AJAX在前端开发的设计及应用 [J].工程技术研究，2023，8（15）：170-171+175.
作者简介：杨志琴（1989—），女，彝族，云南丽江人，副教授，硕士研究生，研究方向：计算机应用技术。
基金项目：2023年丽江市科技局科技计划项目（2023LJCGK02）
