Simple web development framework based on Flask _2, development

2.1 project directory

Here Insert Picture Description
The initial directory structure above:

static directory :
as the name suggests, static folder, which prevent some static files, such as js, css, and images
templates directory :
Chinese as a template placed inside the html file
venv directory :
virtual environment python project, which only need to look at some of the library Lib-site-packages placed inside the directory of the current project needs for the call. Download the library in the project are also in there.
app.py :
it can be understood as a simple html page background control program
The Libraries External:
External compared to you by the Libraries pip install some packages python in the
library if you do not have time to check in new construction allows the import option of external dependencies, it can not be directly installed in the pip, but also by internal engineering the method of introducing import packages:
- Copied directly into venv-Lib-site-packages folder
- Networking download within pycharm project:

2.2 adding html file in the project

We know that most pages are based on the main html file, so there is no html, web developers unable to start. Here's how to add html file in the project

Import html
find templates directory, right-click: New a HTML File, named test.html

in the test.html
Rename title (here I helped a friend to do a small project, as an example, Biexian strange name)
write a string of characters into the test
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
</head>
<body>
<p>hello！</p>
</body>
</html>
```
Render_template rendering html used
in the app.py
introduced render_template package
will hello_word return () is changed to the following code
```
from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('test.html')
    
if __name__ == '__main__':
    app.run(Debug=True)
```
This code means, to render a html page templates
can be directly understood to display this page
ok, so a html file can be applied in the framework of the flask, congratulations, you've won half the battle.

2.3 adding css file

Find static directory, right in the new a new directory (the directory, folder) named css, this special directory used to store the css file
Here Insert Picture Description
and then right-click the new css directory a css style file (stylesheet) named mystyle.css

after you create a successful accession css stylesheets in the head tag in html

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
    
    <link rel="stylesheet" href="../static/css/mystyle.css">
 
</head>

href path in the path of your css style sheet file
"... /" means to return to the parent directory
here html directory for template, then he was on a directory in my project folder here called Flask- Demo,
(in fact, only two points "../", but played two English characters in this MarkDown edit grammar. "" he will automatically help me fill the whole three ..., to point out that, to avoid misleading to the code the film subject)

Html body tag followed by the addition of a div, set with id bg, and modifications in css stylesheet id bg background color for the block, whether the verification is successful css html renderer to play the role of introduced and style
html file:

<body>

    <div id="input"></div>

</body>

css files
(css styles do not have to read too tangled, just casually wrote about here, to facilitate the back of the display)

#input
{
    background-color: lightblue;    
    width: 100px;                   
    height: 40px;                   
    position: absolute;             
    top: 100px;                     
    left: 100px;              
}

After then Ctrl + s refreshing to see the original page, or click on the following 127.0.0.1:5000
(If you do not refresh after effect, may be the reason prequel, it is recommended to refresh after clearing the cache, or turn on developer mode browser)
effect as follows:
Here Insert Picture Description
this shows your css stylesheets has been successfully imported

2.4 Import js file

Supra new directory under a static js directory name, and then under a new js file named control.js
Here Insert Picture Description
then the head html tag, add the following code to import the file js:

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>

    <link rel="stylesheet" href="../static/css/mystyle.css">
    <script type="text/javascript" src="../static/js/control.js" ></script>

</head>

So far, js file import is complete

Based on the simple web development _2 Flask framework, adding html file and css, js file

Simple web development framework based on Flask _2, development

2.1 project directory

2.2 adding html file in the project

2.3 adding css file

2.4 Import js file

Guess you like