python todo-list网页实现
开始先献上代码代码剖析main.py初始化添加根路由添加接口开始运行
templates/todolist.html初始化标题操作部分todo项存放用的divscript部分初始化100ms一次接收数据新建项整理todo-list部分
最后闭环
github作者
开始
先献上代码
todolist.py
from flask
import Flask
,render_template
todolist
= []
app
= Flask
(__name__
)
@app
.route
('/')
def home():
return render_template
('todolist.html')
@app
.route
('/api/todolist/checkItems',methods
=['POST'])
def checkTodo():
return str(todolist
),200
@app
.route
('/api/todolist/delItem/<int:item>',methods
=['POST'])
def delTodo(item
):
todolist
.pop
(item
)
return ''
@app
.route
('/api/todolist/addItem/<content>',methods
=['POST'])
def addTodo(content
):
todolist
.append
(content
)
return ''
app
.run
()
template/todolist.html
<!DOCTYPE html>
<html>
<head>
<title>todolist日程表
</title>
</head>
<body>
<h1>todolist日程表
</h1>
创建新的日程new todo:
<input type="text" id="newTodo" name="newTodo" /><input type="button" id="submit" value="submit确认" name="submit" />
<br />
<input type="button" id="clear" name="clear" value="删除已完成的delete the finished items">
<br />
<div id="div">
</div>
</body>
<script>
var newTodo = document.getElementById('newTodo')
var submit = document.getElementById('submit')
var clear = document.getElementById('clear')
var div = document.getElementById('div')
function init(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function recieveData(){
http = init()
http.open('POST','/api/todolist/checkItems')
http.onreadystatechange = function(){
if(http.status == 200 && http.responseText){
var resp = eval(http.responseText)
for(var i = 0;i < resp.length;i ++){
var item = resp[i]
item = '<input name="todoCheckBtns" type="checkbox"><label name="todoLabels">' + item + '</label>'
if(div.innerHTML.indexOf(item) == -1){
div.innerHTML += item
div.innerHTML += '<br name="newlines" />'
}
}
}
}
http.send(null)
}
setInterval('recieveData()',100)
submit.onclick = function(){
var todo = newTodo.value
http = init()
http.open("POST","/api/todolist/addItem/" + todo)
http.send(null)
}
clear.onclick = function(){
var checkBtns = document.getElementsByName('todoCheckBtns')
var labels = document.getElementsByName('todoLabels')
var newlines = document.getElementsByName('newlines')
if(checkBtns.length < 1){
return
}
var len = checkBtns.length
for(var i = len - 1;i >= 0;i --){
if(checkBtns[i].checked){
checkBtns[i].outerHTML = ""
labels[i].outerHTML = ""
newlines[i].outerHTML = ""
http = init()
http.open('POST','/api/todolist/delItem/' + i)
http.send(null)
}
}
}
</script>
</html>
代码剖析
main.py
初始化
from flask
import Flask
,render_template
todolist
= []
app
= Flask
(__name__
)
添加根路由
@app
.route
('/')
def home():
return render_template
('todolist.html')
添加接口
@app
.route
('/api/todolist/checkItems',methods
=['POST'])
def checkTodo():
return str(todolist
),200
@app
.route
('/api/todolist/delItem/<int:item>',methods
=['POST'])
def delTodo(item
):
todolist
.pop
(item
)
return ''
@app
.route
('/api/todolist/addItem/<content>',methods
=['POST'])
def addTodo(content
):
todolist
.append
(content
)
return ''
开始运行
app
.run
()
templates/todolist.html
初始化
<!DOCTYPE html>
<html>
标题
<head>
<title>todolist日程表
</title>
</head>
<body>
<h1>todolist日程表
</h1>
操作部分
创建新的日程new todo:
<input type="text" id="newTodo" name="newTodo" /><input type="button" id="submit" value="submit确认" name="submit" />
<br />
<input type="button" id="clear" name="clear" value="删除已完成的delete the finished items">
<br />
todo项存放用的div
<div id="div">
</div>
</body>
script部分
初始化
var newTodo
= document
.getElementById('newTodo')
var submit
= document
.getElementById('submit')
var clear
= document
.getElementById('clear')
var div
= document
.getElementById('div')
function init(){
if(window
.XMLHttpRequest
){
return new XMLHttpRequest()
}else if(window
.ActiveXObject
){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
100ms一次接收数据
function recieveData(){
http
= init()
http
.open('POST','/api/todolist/checkItems')
http
.onreadystatechange = function(){
if(http
.status
== 200 && http
.responseText
){
var resp
= eval(http
.responseText
)
for(var i
= 0;i
< resp
.length
;i
++){
var item
= resp
[i
]
item
= '<input name="todoCheckBtns" type="checkbox"><label name="todoLabels">' + item
+ '</label>'
if(div
.innerHTML
.indexOf(item
) == -1){
div
.innerHTML
+= item
div
.innerHTML
+= '<br name="newlines" />'
}
}
}
}
http
.send(null)
}
setInterval('recieveData()',100)
新建项
submit
.onclick = function(){
var todo
= newTodo
.value
http
= init()
http
.open("POST","/api/todolist/addItem/" + todo
)
http
.send(null)
}
整理todo-list部分
clear
.onclick = function(){
var checkBtns
= document
.getElementsByName('todoCheckBtns')
var labels
= document
.getElementsByName('todoLabels')
var newlines
= document
.getElementsByName('newlines')
if(checkBtns
.length
< 1){
return
}
var len
= checkBtns
.length
for(var i
= len
- 1;i
>= 0;i
--){
if(checkBtns
[i
].checked
){
checkBtns
[i
].outerHTML
= ""
labels
[i
].outerHTML
= ""
newlines
[i
].outerHTML
= ""
http
= init()
http
.open('POST','/api/todolist/delItem/' + i
)
http
.send(null)
}
}
}
最后闭环
</script>
</html>
github
github
作者
hit-road
拜拜,下课!
hit-road不定期跟新，不见不散！
