[data visualization] flash framework + jinjia2 advanced

Posted by mwaw on Mon, 31 Jan 2022 19:00:53 +0100

Hello, I am a sophomore of e-commerce who is not a computer major but is very interested in python crawler

This code is for me to look back and give you reference and exchange together in the future

Can reprint, but indicate the original, thank you!

 

Function of jinjia2: render template

jinjia2 is a third-party module and needs to be installed

Next, we use render in jinjia2_ Template renders the template
 

First bring in the package we need today:

from flask import Flask, render_template,request
import datetime  # Import package displaying time [date, time]

Build a basic framework:

from flask import Flask, render_template
import datetime  # Import package displaying time [date, time]
app = Flask(__name__)

# Pass a variable to the user
@app.route('/')
def index2():
    time = datetime.datetime.now()  # Define a time ordinary variable to display the current time
    return render_template('index.html',var = time)  # Implement time ordinary variable on html file

if __name__ == '__main__':
    app.run()

How to implement it on html?

Look at the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Small grocery store</title>
</head>
<body>
    <!----Enclose a variable with two curly braces and let jinjia2 Render the module and identify the server---->
    Today is{{ var }}Welcome
</body>
</html>

So we need to add multiple variables?

Here we try to add a list:

def index2():
    time = datetime.datetime.now()
    name = ['Zhang Shan','tony','john','Li Si']  # List variable
    return render_template('index.html',var = time,list = name)

Reference of list in html:

Customer service personnel:<br/>              # Wrap lines with br tags to enhance the look and feel
    {% for data in list %}  # The format of the code for jinjia loop
        <li>{{ data }}</li> # Circular data, which is displayed as a list in the format of li label
    {% endfor %}            # End cycle

 

Let's try adding a dictionary:

task = {"task":"cleaning","Cleaning Time ":"3 hour"}

Implemented in html:

How to implement tables in html?

Let's first implement it with html statement:

[a table is a table, a tr is a row, and a td is one in a row]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Small grocery store</title>
</head>
<body>
    Today is{{ var }}Welcome<br/>
    Customer service personnel:<br/>
    {% for data in list %}
        <li>{{ data }}</li>
    {% endfor %}

    Task:<br/>
    <table border="1px solid">
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test 4</td>
        </tr>
        <tr>
            <td>Test 5</td>
            <td>Test 6</td>
        </tr>
    </table>
</body>
</html>

We use it in our projects:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Small grocery store</title>
</head>
<body>
    Today is{{ var }}Welcome<br/>
    Customer service personnel:<br/>
    {% for data in list %}
        <li>{{ data }}</li>
    {% endfor %}

    Task:<br/>
    <table border="1">
        {% for key,value in task.items() %}  <!----iteams Convert a dictionary into a list[(key,value),(key,value),(key,value)]--->
            <tr>
                <td>{{key}}</td>
                <td>{{value}}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

We tried to create a user registration interface:

Create a new folder under templates

Create another register HTML file

Let's use pycharm to quote:

#Form submission
@app.route('/test/register')
def register():
    return render_template("test/register.html")

Improve the register:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://localhost:5000/result" method="post">
    <p>full name:<input type="text" name="name"></p>
    <p>Age:<input type="text" name="age"></p>
    <p>Gender:<input type="text" name="sex"></p>
    <p>Address:<input type="text" name="address"></p>
    <p><input type="submit" value="Submit"></p>
</form>
</body>
</html>

Let's write another path and URL to be displayed after submitting the form:

Then create a result in the test folder HTML file

Use pycharm to quote:

# To receive the route submitted by the form, you need to specify the method as post
@app.route('/result',method = ['POST','GET'])
def result():
    if request.method == 'POST':  # The information in the form can be encrypted by changing the method of post to html
        result = request.form  # Output the data in tabular form
        return render_template("test/result.html",result = result)

First put the result The HTML file is carried by result, and the content is not written:

Note the access method here. The default access method is get, as follows:

@app.route('/result')
def result():
    return render_template("test/result.html")

The following is displayed:

Method Not Allowed

The method is not allowed for the requested URL.

Then we need to change the way of access:

Because our jump in register uses post encryption in order to keep the information confidential, we need to use post to obtain the information

The route for receiving form submission needs to be specified methods by post
@app.route('/result',methods = ['POST','GET'])

Save and refresh the web page and submit it again. The content of the result file we set will be displayed: result

Of course, it's no use just displaying. We also need to get the contents of the form:

There is no need to define variables. At this time, we need to use request to help me pack the information of the form and send it to us

# To receive the route submitted by the form, you need to specify methods as post
@app.route('/result',methods = ['POST','GET'])
def result():
    if request.method == 'POST':  # Post can encrypt information. The form method in html is post, so it is also changed here. The method must not be written wrong
        result = request.form  # Output data as a dictionary
        return render_template("test/result.html",result = result)

After quoting, let's improve the result file and let the form output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        {% for key,value in result.items() %}  <!----iteams Convert a dictionary into a list[(key,value),(key,value),(key,value)]--->
            <tr>
                <th>{{key}}</th>   <!----th Label title, let key The value is more obvious--->
                <td>{{value}}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

Finally, it is suggested that the action in the register file should obtain the dynamic address

<form action="http://localhost:5000/result" method="post">

You can do this:

<form action="{{ url_for('result')}}" method="post">

In this way, our http address will not be directly displayed in the web page source code, and it is convenient to continue to use when changing the port and domain name. The way of reverse search routing, and result is the function name defined by you

Topics: Python html Flask