最近闲来无事，想着把自己工作正在做的一个项目做一个简单的分享与实战教程，该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容涉及Python、HTML5、JavaScript、云计算、AI等。
文章最后有源码获取攻略哦~
如果有大佬发现问题，也非常欢迎指教
上期回顾
上期我们完成了数据库的创建及内容库部分的数据库设计，这期我们将介绍内容库的UI及功能设计。
内容库UI
首先我们可以看到其实UI的左侧导航栏和上侧导航栏其实是一样的，不一样的地方主要在于中间红色框部分。红色框部分的上部分表头是静态数据，而下部分因为还没数据所以暂时没有内容，下部分则是动态数据。
以下是这一部分UI设计的内容：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>AI调度管理平台</title>
<!-- Bootstrap core CSS -->
<link href="/statics/css/bootstrap.min.css" rel="stylesheet">
<link href="/statics/css/all.css" rel="stylesheet">
<link href="/statics/css/myfont.css" rel="stylesheet">
<style>
.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;
}
}
</style>
<!-- Custom styles for this template -->
<link href="/statics/css/sidebars.css" rel="stylesheet">
</head>
<body>
<main>
<div class="col-2">
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="height: 100vh;">
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<i class="fas fa-cloud" style="font-size: 30px;"></i>
<span class="fs-4"> AI调度管理平台</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
</svg> 主页
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
</svg> 智能标签
</a>
</li>
<li>
<a href="/ai_cut/" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
</svg> 智能拆条
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
</svg> 智能唱词
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi me-2" width="16" height="16">
</svg> 人脸检测
</a>
</li>
<li>
<a href="#" class="nav-link active" aria-current="page">
<svg class="bi me-2" width="16" height="16">
</svg> 内容库
</a>
</li>
</ul>
<hr>
</div>
</div>
<div class="col-10 container-fluid bg-light">
<div class="row container-fluid bg-light">
<header class="p-3 mb-3 border-bottom">
<div class="container-fluid">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-4 link-secondary">概况</a></li>
<li><a href="#" class="nav-link px-4 link-dark">用户管理</a></li>
<li><a href="#" class="nav-link px-4 link-dark">开发者支持</a></li>
<li><a href="#" class="nav-link px-4 link-dark">帮助</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/statics/images/头像.jpg" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">个人信息</a></li>
<li><a class="dropdown-item" href="#">安全凭证</a></li>
<li><a class="dropdown-item" href="#">钱包</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">退出登录</a></li>
</ul>
</div>
</div>
</div>
</header>
</div>
<div class="row my-3 flex-wrap mx-3 shadow">
<div class="row m-1" style="font-family: pinfang;">
<table class="table">
<thead>
<tr>
<th scope="col">媒体ID</th>
<th scope="col">创建时间</th>
<th scope="col" style="min-width: 120px;">媒体名称</th>
<th scope="col" style="min-width: 120px;">素材大小</th>
<th scope="col">状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="media_table">
</tbody>
</table>
</div>
</div>
</div>
</main>
<script src="/statics/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/statics/js/echarts.min.js"></script>
<script type="text/javascript" src="/statics/js/westeros.js"></script>
<script src="/statics/js/sidebars.js"></script>
<script src="/statics/js/jquery-3.6.0.min.js"></script>
<script src="/statics/js/content_storage_myjs.js"></script>
</body>
</html>注意：一般情况下表格的下方都要设置分页按钮，即平常我们浏览其他网页时可以看到的首页、上一页、下一页这种按钮，这里我们暂时不做设置，想要把该系统完善的更好的朋友可以尝试一下。
我们的界面设计好了，如何让数据从后台传过来呢？
这里我个人习惯是采用jquery里面的ajax方法，从上面代码我们可以看到我们引入了一个叫做content_storage_myjs.js的js文件：
<script src="/statics/js/content_storage_myjs.js"></script>该文件里面的内容如下：
$(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+"<tr>" \
"<th>{}</th>" \
"<td>{}</td>" \
"<td>{}</td>" \
"<td>{}</td>" \
"<td><i class=\"fas fa-check-circle\" style=\"color:lawngreen;\"></i></td>" \
"<td><a href=\"#\">查看详情</a></td></tr>".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:\\测试素材');然后刷新内容库界面，我们就可以看到数据啦
如果文章帮助到了您，可否给一个点赞关注收藏呢~
如果遇到编程上的问题，欢迎留言哦~
关注作者回复：aiweb，获取源码下载地址哦~
本文暂时没有评论，来添加一个吧(●'◡'●)