## 目标
本项目将学习 Mariadb 作为数据库后端，Bootstrap 作为前端的技术栈，并实现一个清单应用。从中我们可以学习 Flask Web 应用框架，及 Mariadb 关系型数据库和 BootStrap web开发框架。
## 项目介绍
本应用修改自 TodoMVC 的 todo list 应用，使用 Mariadb 作为数据库后端，Bootstrap 作为前端的 Flask 应用。先给它起个好听的名字吧，方便之后称呼。
todo list => (自定义，随便起名称) => todoest
就像一般的 todo list 应用一样，todoest 实现了以下功能：
- 管理数据库连接
- 列出所有的 todo 项
- 创建新的 todo
- 检索单个 todo
- 编辑单个 todo 或将其标记为已完成
- 删除单个 todo
## 项目效果
### 新建标签页，启动 todoest
### 打开浏览器访问 http://localhost:8000/
## 技术分析
- 为什么选择Flask?
Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。
Flask也被称为 “microframework” ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。
因此Flask是一个使用Python编写的轻量级Web应用框架。轻巧易扩展，而且够主流，有问题不怕找不到人问，最适合 todoest 这种轻应用了。
- 为什么选择Mariadb?
MariaDB数据库管理系统是MySQL的一个分支，主要由开源社区在维护，采用GPL授权许可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能轻松成为MySQL的代替品。MariaDB虽然被视为MySQL数据库的替代品，但它在扩展功能、存储引擎以及一些新的功能改进方面都强过MySQL。而且从MySQL迁移到MariaDB也是非常简单的.
- 为什么选择Bootstrap?
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--定义全局属性-->
<script >
var _list = [];
<!--获取table对象,通过document.getElementById-->
var _table = document.getElementById("table");
<!--改变状态-->
function changevalue(t) {
t.value = '已完成'
}
<!--删除 //table会自动添加tbody标签d.parentNode.parentNode.parentNode.removeChild(d.parentNode.parentNode); //this当前a标签-->td-->tr-->tbody//从tbody中移除tr，-->
function delete1(d) {
d.parentNode.parentNode.parentNode.removeChild(d.parentNode.parentNode)
}
<!--添加属性-->
function addtask() {
<!--js动态添加表格-->
var newtr = table.insertRow();
var newtd0 = newtr.insertCell();
var newtd1 = newtr.insertCell();
var newtd2 = newtr.insertCell();
var newtd3 = newtr.insertCell();
var newtd4 = newtr.insertCell();
var newtd5 = newtr.insertCell();
<!--放入数据-->
newtd0.innerText = _list.length +1;
_list.unshift(1);
newtd1.innerText = document.getElementById('task').value;
var now = new Date();
newtd2.innerText = now.toLocaleString();
var state = '<input type="submit" value="未完成" style="color: yellow;" onclick="changevalue(this)">';
newtd3.innerHTML = state;
var section = document.getElementById('section').value;
newtd4.innerText = section;
var _delete = '<input type="submit" value="删除" style="color: red" onclick="delete1(this)">';
newtd5.innerHTML = _delete;
}
</script>
<body>
<!--输入任务内容-->
<input type="text" placeholder="请输入任务内容" id="task">
<!--下拉表格-->
<select id="section">
<option>--选择部门--</option>
<option>开发部</option>
<option>人事部</option>
<option>运维部</option>
</select>
<!--提交-->
<input type="submit" value="添加任务" onclick="addtask()"></body><br>
<h1 style="color: #A9A9A9;">任务显示</h1>
<table style="width: 50%;" border="1px" cellpadding="5px" cellspacing="0px" id="table">
<tr>
<th>编码</th>
<th>任务内容</th>
<th>创建时间</th>
<th>状态</th>
<th>所属部门</th>
<th>删除</th>
</tr>
</table>
</body>
</html>
把已完成的删除
