---
# System prepended metadata

title: ACM learning note

---

# ACM learning note
## flask exercise_1



## Route
![](https://i.imgur.com/N5gF0fB.jpg)

## Route 參數
![](https://i.imgur.com/ihCu5Do.jpg)

## 乘法表
![](https://i.imgur.com/CyIivhu.jpg)


## 資料表單
![](https://i.imgur.com/UVtA3Za.jpg)
![](https://i.imgur.com/oR2k8zk.jpg)

## 加法器
![](https://i.imgur.com/oDHJaAO.jpg)
![](https://i.imgur.com/7JOvyT0.jpg)


## Total code
### app.py Code
```
from flask import Flask, request,render_template

app = Flask(__name__)

@app.route("/")
def test():
    return "<p>Hello,World!</p>"

@app.route("/<name>")
def test2(name):
    return "<p>Hello "+name+"</p>"
    
@app.route("/nine/<int:num>")
def test3(num):
    return render_template("abc.html", num=range(1,num))

@app.route("/form")
def test4():
    return render_template("form.html")

@app.route("/recv", methods=["POST"]) # Default is GET
def index():
    name = request.form["name"]
    id=request.form["id"]
    return render_template("index.html",name=name,id=id)

@app.route("/plus")
def test5():
    return render_template("plus.html")

@app.route("/recv2", methods=["POST"])
def index2():
    first= request.form["first"]
    second=request.form["second"]
    result=int(first)+int(second)
    return render_template("index2.html",result=result)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=10943)
```
### abc.html Code
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <table border= 1>
        {% for i in num %}
                <tr>
                    {% for a in num %}
                    <th>{{i * a}}</th>
                    {% endfor %}
                <tr>        
        {% endfor %}
    </table>
</body>
</html>
```
### form.html Code
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <form action="recv", method="POST">
        <label for="name">name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="id">num:</label><br>
        <input type="text" id="id" name="id"><br>
        <input type="submit" value="Submit">
    </form> 
    
</body>
</html>
```
### index.html Code
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <h1>POST:</h1>
    <h1>name:{{name}}</h1>
    <h1>id:{{id}}</h1>
</body>
</html>
```
### index2.html Code
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <h1>POST:ANS={{result}}</h1>
</body>
</html>
```
### plus.html Code
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Page</title>
</head>
<body>
    <form action="recv2", method="POST">
        <input type="text" name="first" />+<input type="text" name="second" />
        <input type="submit" value="Submit">
    </form> 
</body>
</html>
```

![](https://i.imgur.com/Fn8BZNX.gif)
