[PYTHON] I want you to introduce Flask's teaching materials at once so far ~ Let's implement Yubaba with Flask ~
Introduction
Yubaba is not the main.
One day
I wanted to make a web app and decided to study Flask. I googled properly and arrived at a certain site. Um, what?
Sample code
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"
Do this at the Windows command prompt
cmd
set FLASK_APP = hello.py
flask run
And execute.
I think it's unfriendly to have someone cast such a spell without a disclaimer like "I've saved the sample code here as hello.py ", but anyway, this
The result can be obtained. I mean, this is just standard output on the browser.
With this, "I'm glad that the content was easy to understand!" Yukari Oishi, are you satisfied with this content? </ s>
Those who want to learn Flask are those who have some understanding of Python and html and want to connect them. I can't be satisfied with such a sample.
After that, I visited several sites and found many sample programs that simply rendered html and Hello {{name}}.
It's a web app! I want a sample web app that's easy enough to decipher, but really programmatic!
Then you can see what Flask is like!
Delusion
For example, before I explain Flask, I'd like to see a sample like this.
app.py
from flask import Flask, render_template
import random
app = Flask(__name__)
@app.route("/")
def hello_world():
a = random.randint(1, 9)
b = random.randint(1, 9)
c = a * b
return render_template("index.html",
val1 = a,
val2 = b,
val3 = c)
if __name__ == "__main__":
app.run(debug=True)
When,
templates/index.html Put html in the templates folder
<html>
<body>
I calculated it in Python instead of Javascript<br>
<b>{{val1}}</b>*<b>{{val2}}</b> = <b>{{val3}}</b>What did you say.<br>
</body>
</html>
When,
The output result.
If you show this from the beginning, you may be able to decide for yourself where you can understand at this point, where you see the description for the first time, and what you should learn. That way, even if you learn from the standard output to a browser that is not html, you will get a better understanding, but there are not many such learning sites.
Yubaba
I wasn't satisfied with the sample above, and said, "It's a web app! It's a web app! Input it in the browser, calculate it in Python, and output it to the browser. Without it, it's not a web app. Some may be extravagant, demanding a more practical sample.
I will present such a sample to such a person. Yes, it's Yubaba.
My knowledge of html stopped 25 years ago, so I might be scolded for saying "Don't use \
like that!".
Also, although omitted this time, it is better to write <meta charset =" utf-8 "> etc. properly.
app.py
from flask import Flask, render_template, request, redirect
import random
app = Flask(__name__)
@app.route("/")
def input():
return render_template("input.html")
@app.route("/answer", methods=["post"])
def answer():
name = request.form["inputname"]
try:
new_name = random.choice(name)
return render_template("answer_named.html",
name = name,
new_name = new_name)
except Exception as e:
return render_template("answer_noname.html",
error = e)
if __name__ == "__main__":
app.run(debug=True)
templates/input.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/style.css">
</head>
<body>
<img src = "static/yuba.png "><br>
It's a contract. Write your name there.<br>
<br>
<form action="/answer" method="post">
<textarea name="inputname"></textarea><br>
<button type="submit">POST</button>
</form>
</body>
</html>
templates/answer_named.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/style.css">
</head>
<body>
<img src = "static/yuba.png "><br>
Hung.<dev class="before">{{name}}</dev>I mean. It's a luxurious name.<br>
From now on your name is<dev class="after">{{new_name}}</dev>It is. Mind you,<dev class="after">{{new_name}}</dev>That's right.<br>
I'll reply when I understand<dev class="after">{{new_name}}</dev>!!<br>
<br>
<a href="/">Return to TOP</a>
</body>
</html>
templates/answer_noname.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/style.css">
</head>
<body>
<img src = "static/haku.png "><br>
Thank you Chihiro. my name is<div class="haku"> {{error}}</div><br>
I remember when you put null in me and fell.<br>
You tried to pick up the error.<br>
<br>
<a href="/">Return to TOP</a>
</body>
</html>
static/style.css css and images are placed in a static folder
.before {
color: #FF0000;
font-size: 120%;
font-style: italic;
}
.after {
color: #0000FF;
font-size: 150%;
}
.haku {
color: #FF00FF;
font-size: 120%;
font-weight: bold;
}
Looking at this kind of thing, I feel like I can make Saizeriya 1000 Yen Gacha. I think it's important to say, "I feel like I can do it myself." "Let's learn Flask from scratch, the standard output isreturn "Hello World!". Repeat After Me" doesn't motivate you.
At the end
I've always used OpenCV to draw Japanese (https://qiita.com/mo256man/items/b6e17b5a66d1ea13b5e3) composite images Since I've done that, I was planning to write an article here as well, saying, "If you use OpenCV in Flask, you will be able to make something that was once popular ** just like an outer road generator **!" I got on the hot spring because it was popular. Currently studying heroku.
reference
Implementing Yubaba in Java
Avoid Yubaba's error in Java
I used Python's try ~ except for the first time.
Implementing Yubaba in Python
Recommended Posts