flask打造升级版ToDoList

Posted 2021-04-12 中学生计算思维与实践

首先推荐一个网站，用于制定计划，标识完成的。

http://todolist.cn/

这个H5站点，数据是存在本地浏览器的，是一个安全、极简的任务计划网站。如果你固定在一台电脑上做计划的话，这就够了。

那么本文也就结束了，感谢观看……

---

如果是要改成共享式的计划清单，数据仅仅存本地就不行了。

所以，我们我这个网站的源码下下来，做了如下改动：

给它们增加CSS用于对齐：

JS文件中增加几个函数，用于提交数据到服务器：

function get(url){
    xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.send();
    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
        res=xhr.responseText
        localStorage.setItem("todo",res);
        load()

　　    }

    }
}

function post(data,url){
    xhr = new XMLHttpRequest();
    xhr.open('post', url);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.send(data);
    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
        res=xhr.responseText
        if(res=="OK")
            alert("上传成功！")

　　    }

    }
}
function upload(){
    var collection=localStorage.getItem("todo");
    if(collection!=null){
        if(JSON.parse(collection)!=""){
            var jdata=JSON.stringify(collection);
            post(jdata,"http://49.234.187.92:5000/sendAjax");
        }
        else{
            alert("无需上传")
        }
    }
    else{
        alert("数据为空")
    }
}
function download(){
    get("http://49.234.187.92:5000/getAjax")
}

在服务器上跑一个flask程序：

from flask import Flask,request,jsonify,render_template
import json
from flask_cors import *

app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/")
def todo():
    return render_template('todo.html')

@app.route('/sendAjax', methods=['POST'])
def sendAjax():
    data = request.get_data()
    d=json.loads(data)
    with open("static/common/record.txt",'w') as f:
        f.write(d)
    return "OK"

@app.route('/getAjax', methods=['GET'])
def getAjax():
    with open("static/common/record.txt",'r') as f:
        rec=f.read()
    return rec

if __name__ == '__main__':
    app.debug = True # 设置调试模式，生产模式的时候要关掉debug
    app.run(host='0.0.0.0',port='5000')

其中flask_cors是防止跨域访问报错的。

于是最终，我们实现了，电脑网页和手机网页的互通。

打开以后，先下载。然后手机端制定、完成计划，手机端不用时点击上传。则电脑端网页就可以下载数据了，电脑端切手机的时候同理。

最后，由于是私人ToDoList，公开api，所以还是加个登录验证比较好。或者干脆，把这个站点封装成一个apk，用安卓打包工具就可以实现。