Brief steps to build a website / application using flash and H5

stay Portal On the basis of , Make some changes 、 Added some functions .
I wanted to try my whole stack to build a website long ago It can be regarded as complementing some knowledge .
Briefly describe the process of developing pages .
Used mdui
1. Plan the page first

At first, I wanted to find accept Related icons But found accessible It's more interesting to use
The topic list can be realized by adding code to a specific module Very interesting
like this

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. Write routing
Pictured above is an example Need to write at least 2 Routes
a. The routing of the web page itself

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

b. The route of the method of obtaining information from the page

@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. Connect the function function of the front and rear end methods
such as post A request Then write the received information to the web page

<script> if (pro_id === undefined){
       pro_id = [1]; } var httpRequest = new XMLHttpRequest();// First step ： Create the objects you need  httpRequest.open('POST', '/contests', true); // The second step ： Open the connection  httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");// Set request header   notes ：post Method must set request header （ Set the request header after the connection is established ） var data={
      'page':pro_id[0]}; httpRequest.send(JSON.stringify(data)); httpRequest.onreadystatechange = function () {
      // Callback interface after request , Write the program to be executed after the request is successful  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      // Verify that the request was sent successfully  var json = httpRequest.responseText;// Get the data returned by the server  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. Adjust the layout debug