基於Flask與JS實現任務清單管理
阿新 • • 發佈：2019-01-02
## 目標 本專案將學習 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>
把已完成的刪除
