使用flask和h5搭建网站/应用的简要步骤

在 传送门 的基础上，做一些修改、加了一些功能。
之前很早就想试试自己全栈做一个网站 算是补齐了一些知识。
简单地描述一下开发页面的过程。
使用了mdui
1.先规划好页面

最开始想找个accept相关的图标 但是发现accessible用上去更有趣
题目列表可以通过在特定模块添加代码的方式实现 很有趣
像这样

document.getElementById('plists').innerHTML += "<a href='/group?id="+String(i+(pro_id-1)*15)+"' class='mdui-list-item mdui-ripple mdui-col-offset-md-2'><i class='mdui-icon mdui-list-item-icon material-icons'>accessiblei><div class='mdui-list-item-content'>"+String(i+(pro_id-1)*15)+'     '+ptitle+"div>li>";

2.编写路由
以上图为例 需要编写至少2个路由
a.网页本身的路由

@app.route("/contestlist")
def contestlist():
    return send_from_directory(root,'grouplist.htm')

b.页面获取信息方法的路由

@app.route("/contests",methods=['POST'])
def contests():
    data=json.loads(request.get_data(as_text=True))
    page=int(data['page'])
    return contest_file('html/problem/groups',page)
def contest_file(file_dir,page):
    problems={"id":"href"}
    start_id=(page-1)*15+1000
    end_id=page*15+1000-1
    for i in range(start_id,end_id):
        try:
            f=read_file_as_str('html/problem/groups/'+str(i)+'.json')
            f = f.replace('\'','\"')
            data=json.loads(f)
            problems[str(i)]=data['name']
        except:
            problems[str(i)]='NotFound'
    return json.dumps(problems)

3.连接前后端方法的功能函数
比如post一个请求 再收到信息写入到网页上

<script>
if (pro_id === undefined){
                pro_id = [1];
            }
            var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
            httpRequest.open('POST', '/contests', true); //第二步：打开连接
            httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
            var data={'page':pro_id[0]};
            httpRequest.send(JSON.stringify(data));
            httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
                    var json = httpRequest.responseText;//获取到服务端返回的数据
                    var info = JSON.parse(json);
                    var page=pro_id;
                    var start_id=(page-1)*15+1000;
                    var end_id=page*15+1000-1;
                    console.log(info);
                    for(var i=start_id;i<end_id;i++){
                        var ptitle=info[(i)];
                        if(ptitle=='NotFound'){
                            continue;
                        }
                        document.getElementById('plists').innerHTML += "accessible
"+String(i+(pro_id-1)*15)+'     '+ptitle+"
";
                    }
                }
            };
script>

4.调整布局 debug