使用 Python 从 0 开发属于你的个人管理系统 14 篇 ｜ 个人计划功能之前端的实现
现在，我们已经完成了登录的功能，尽管还有些需要我们后续优化的地方，不过没关系，我们可以先把主要功能搞起来，接下来我们开始来开发【个人计划】的功能模块，还记得我之前分享的个人计划使用方法么，你完全可以把它开发出来，在你的系统中为你所用。
在开发功能之前，一般我们需要画原型，但我们不是有了 HTML 模板文件了嘛，我们可以直接把前端的页面规划好，这样往后就会很清晰你要实现什么样的功能，比如如何创建数据模块，后端的功能实现等。
模板文件的提取
我们可以把 HTML 那些公用的部分提取出来，比如 header 需要引用的部分，以及 js 的引用，菜单栏这些都是大部分页面都需要用到的，还记得 include 么？
创建 header.html， 将共用部分提取出来：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{{ title }}</title>
<!-- Custom fonts for this template-->
<link href="{{ url_for('static', filename='vendor/fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url_for('static', filename='css/sb-admin-2.min.css') }}" rel="stylesheet">
</head>创建 footer.html ，将底部共用部分提取出来：
本文隐藏内容 登陆 后才可以浏览
像这样：
而创建出阿里的任务列表内容，我们可以使用到 card 的样式：
<div class="col-xl-8 mx-auto mb-3">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="h5 mb-0 font-weight-bold text-gray-800">读一篇文章</div>
</div>
<div class="col-auto">
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
</div>
</div>
</div>
</div>
</div>这里的卡片内容，我们到时候可以根据任务的数量进行循环展示。
现在效果是这样：
OK，现在你的前端样式大概样子就整出来了。
请思考，创建任务，输入内容，按下回车之后，任务怎么创建到数据库中？点击每个 item 的 checkbox，表示完成，如何修改状态呢？又如何展示查询结果呢？
我们下篇见，peace！
