使用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'>accessible</i><div class='mdui-list-item-content'>"+String(i+(pro_id-1)*15)+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+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 += "<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'>accessible</i><div class='mdui-list-item-content'>"+String(i+(pro_id-1)*15)+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+ptitle+"</div></li>"; } } }; </script>

4.调整布局 debug