哪个不是人工智能的三层基本架构（从零开始打造云端AI管理调度平台）

最近闲来无事，想着把自己工作正在做的一个项目做一个简单的分享与实战教程，该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解Python知识。主要内容涉及Python、HTML5、JavaScript、云计算、AI等。

如果有大佬发现问题，也非常欢迎指教

上期回顾

上期我们聊到如何创建我们的第一个APP并在浏览器中显示出来，这期我们将详细介绍如何设计自己的主页。

创建STATICs文件夹

在我们的项目文件夹下创建statics文件夹，同时在里面分别创建css、images、js三个文件夹分别保存相对应的文件。

同时在settings.py中尾部写入以下设置：

STATIC_URL = '/statics/' staticFILES_DIRS = [ os.path.join(BASE_DIR, "statics"), ]

注意：STATIC_URL默认的值是'/static/'，这里我们将其改成与statics文件夹名称相符，防止后面混淆。

主页设计

首先我们要明确我们想要一个什么样的主页，当前互联网中有各式各样的主页，有介绍型、商城型、博客型等等，但是考虑我们这次设计的是一个AI管理调度平台，那么我们优先考虑管理后台型的主页。

首先我们来看一下完全搭建完成后是一个什么样子的：

然后我们可以把这个主页分成五个部分建设：

第1部分

首先我们将整个页面划分为两个部分，分别是图中的第1部分和其他部分

<main> <div class="col-2"> #这里是第1部分 </div> <div class="col-10 container-fluid bg-light"> #这里是其他部分 </div> </main>

注意：本次平台设计bootstrap jquery的技术路线，在body中需要引入相应的文件，在主页设计完成后会给出需要引入哪些文件。

上述代码中我们可以看到有两个相似的类分别是"col-2"及"col-10"，这两个类的主要作用是将网页中的一行按比例进行分割，因为在bootstrap中完整的一行被认为由12个小格子分割而成，所以这里我们第一部分在这一行中就占了2/12，而其他部分占了10/12。

然后接着我们在第1部分写入以下代码：

<div class="col-2"> #这里是第1部分 <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 active" aria-current="page"> <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="/content_storage/" class="nav-link text-white"> <svg class="bi me-2" width="16" height="16"> </svg> 内容库 </a> </li> </ul> <hr> </div> </div>

然后我们就可以实现以下效果：

这里我们可以看到第1部分的效果已经出来了，这里你可以按照自己的需求来增加导航栏、修改名称、修改图标等等。

第2部分

<div class="col-10 container-fluid bg-light"> #这里是其他部分 <div class="row container-fluid bg-light"> #这里是第2部分 <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>

然后我们就可以实现以下效果：

这里我们可以看到顶部导航栏、搜索栏、用户头像及相关配置的功能的设计已经实现了。在下一期我们将会继续介绍剩下的内容如何实现。

如果文章帮助到了您，可否给一个点赞关注收藏呢~

如果遇到编程上的问题，欢迎留言哦~