最近闲来无事，想着把自己工作正在做的一个项目做一个简单的分享与实战教程，该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容涉及Python、HTML5、Javascript、云计算、AI等。
在本教程完成更新后会放出源码哦~
如果有大佬发现问题，也非常欢迎指教
上期回顾
上期我们完成了数据库的创建及内容库部分的数据库设计，这期我们将介绍内容库的UI及功能设计。
内容库UI
首先我们可以看到其实UI的左侧导航栏和上侧导航栏其实是一样的，不一样的地方主要在于中间红色框部分。红色框部分的上部分表头是静态数据，而下部分因为还没数据所以暂时没有内容，下部分则是动态数据。
以下是这一部分UI设计的内容：
AI调度管理平台
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
AI调度管理平台
主页
智能标签
智能拆条
智能唱词
人脸检测
内容库
概况
用户管理
开发者支持
帮助
个人信息
安全凭证
钱包
退出登录
媒体ID
创建时间
媒体名称
素材大小
状态
操作
注意：一般情况下表格的下方都要设置分页按钮，即平常我们浏览其他网页时可以看到的首页、上一页、下一页这种按钮，这里我们暂时不做设置，想要把该系统完善的更好的朋友可以尝试一下。
我们的界面设计好了，如何让数据从后台传过来呢？
这里我个人习惯是采用jquery里面的ajax方法，从上面代码我们可以看到我们引入了一个叫做content_storage_myjs.js的js文件：
该文件里面的内容如下：
$(function () {
test()
function test(){
$.ajaxSetup({ cache: false });
$.ajax({
url:'/get_content_media/',
type:'get',
data:{},
cache:false,
timeout:10000,
success:function (result) {
$("#media_table").html(result.data)
},
error:function (result) {
},
})
}
}
)
在该文件里面，我们定义了一个test函数及在网页加载时调用了该函数。而该函数则向url:'/get_content_media/'发出get请求，返回回来的内容会填充在id为media_table的内容里面也就是我们前面定义好的table这个部分：
但是目前我们暂时还没有对url:'/get_content_media/'进行定义，以及访问内容库的函数我们也还没有定义，所以我们接下来就要先打开views.py：
定义访问内容库的函数
#返回内容库页面
def content_storage(request):
return render(request,'content_storage.html')
通过这个函数可以渲染content_storage.html这个文件，这个文件就是我们上面写好的UI界面。
然后我们到urls.py里面给这个函数定义一个访问路径：
from django.contrib import admin
from django.urls import path
from mainbody.views import *
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
path('content_storage/', content_storage),
]
同样的我们命名为content_storage，这时候你打开http://127.0.0.1:8000/content_storage就可以看到你的内容库界面了。
定义访问内容库数据库的函数
首先我们同样打开views.py，添加以下内容：
import pymysql
from django.http import HttpResponse
import json
#返回内容库数据库
def get_content_media(request):
myDict = {'data': []}
conn=pymysql.connect(host='localhost',
user='root',
password='',#输入你的数据库密码
database='test')
cursor=conn.cursor()
sql="select * from mainbody_content_media order by create_time DESC"
cursor.execute(sql)
result=cursor.fetchall()
conn.close()
html=''
for each in result:
html=html+""
"{} "
"{} "
"{} "
"{} "
"查看详情 ".format(each[0],each[1],each[2],each[3])
myDict['data']=html
return HttpResponse(json.dumps(myDict), content_type='application/json')
这里我们是通过返回json数据的方式返回内容，这里可以看出我们其实不止是返回了表格里面的数据，而是直接返回了整个表格的结构。
同时我们这里没有采用传统的django通过model取数据的方法，而是直接采用了sql语句来访问数据，这是因为我个人比较习惯用这种方法，有兴趣的朋友可以去搜索一下如何使用django的model操作数据库。
注意：上面引入了3个新的包，请放到views.py最上面。
然后我们需要在urls.py中定义一个路径：
from django.contrib import admin
from django.urls import path
from mainbody.views import *
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
path('content_storage/', content_storage),
path('get_content_media/', get_content_media),
]
测试一下
我们打开workbench，输入一个插入语句：
insert into test.mainbody_content_media (create_time,name,size,path) values ('2022-03-23 15:00:00','测试素材.mp4','500MB','D:\测试素材');
然后刷新内容库界面，我们就可以看到数据啦
如果文章帮助到了您，可否给一个点赞关注收藏呢~ 如果遇到编程上的问题，欢迎留言哦~ 关注公众号：跟着皮皮实战python 了解最新最全的python实战内容
