Catapult start - Python web development Flask framework, front-end native + Flask back-end framework + mysql database actual combat (with a small case)

 Hello everyone, I am the blogger of csdn: lqj_ myself

This is my personal blog homepage:

lqj_My blog_CSDN blog-WeChat applet, front-end, python field blogger lqj_ I am good at WeChat applet, front-end, python, etc. https://blog.csdn.net/lbcyllqj?spm=1011.2415 .3001.5343 Bilibili welcome attention:Xiao Miao Develop

Xiaomiao Develop's personal space-Xiaomiao Develop personal homepage-哔哩哔哩Video

This article mainly talks about: Quick start, pythonweb development Flask framework

Table of contents

Python is suitable for web application development

Flask framework

Small case file structure

 mysql database table structure

Backend code implementation

Front-end native code implementation

The front-end and back-end interaction effects of the small case:


Python is suitable for web application development

One is easy to learn: Python is the most popular language for beginners, and you can write less code and make fewer mistakes than other languages ​​​​such as Java and C++, which can improve efficiency. Not only that, but it also has a low barrier to entry as it is relatively more similar to everyday languages, making it easy to understand the code.

The second is that it has a rich ecosystem and libraries: Python provides a wide range of library tools and packages, and can access many pre-written codes, thereby reducing the development time of applications. For example, you can use Numpy and Pandas for mathematical analysis, Pygal for graph analysis, and SLQALchemy for composable queries. Python also offers amazing web frameworks, such as Django and Flask, which are explored in depth in later sections.

The third is rapid prototyping: Compared with other programming languages, Python can save a lot of time to build projects, and your ideas can be realized faster, so that you can get feedback faster and iterate quickly. This efficient development makes Python especially suitable for startups that can get to market faster to gain a competitive advantage.

Fourth, it is widely popular: Python is one of the most popular languages ​​in the world, with community contributions from all over the world, almost all technical problems can be quickly found through search engines. Python itself is constantly being updated with new features and libraries, along with excellent documentation and community support. Especially for new developers, Python offers extensive support and frameworks.

Flask framework

Flask is considered a microframework, a minimalist web framework. It's less "battery packed," meaning it lacks many of the features and functionality offered by full-stack frameworks like Django, such as web templating engines, account authorization, and authentication. Its main features are as follows:

• A lightweight, micro-framework • Relatively low learning cost, quick to get started • Support JinJa2 template engine • Modern template language after Django template language

Flask is minimal and lightweight, which means you can add the extensions and libraries you need as you write your code. The idea behind Flask is that it provides only the components needed to build an application, so developers have a lot of flexibility and control. Flask is also a popular and powerful web framework used by big companies like Netflix, Linkedin, and Uber.

Small case file structure

 mysql database table structure

Backend code implementation

Brief description: call Flask framework library, pymysql third-party library, request module library, render_template.

Instantiate the Flask object:

app = Flask(__name__)

/add/user This page is used to add data to the table of the mysql database;

/show/user This page is used to render the data of the data table in the mysql database in real time;

request.method == "GET" is used to specify the add/user page, intelligently send the request through the "GET" request method;
render_template is used to connect to the front-end html native page;
from flask import Flask, render_template, request
import pymysql

app = Flask(__name__)


@app.route("/add/user",methods=["GET","POST"])
def add_user():
    if request.method == "GET":
        return render_template("add_user.html")
    # print(request.form)
    username = request.form.get("user")
    password = request.form.get("pwd")
    mobile = request.form.get("mobile")

    #1.连接mysql
    conn = pymysql.connect(host="你自己的ip", port=你自己的端口, user='root', password='你自己的mysql密码', charset='utf8', db='unicom')

    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

    #2.执行sql
    sql = "insert into admin(username,password,mobile) values (%s,%s,%s)"
    cursor.execute(sql, [username, password, mobile])

    conn.commit()
    #3.关闭连接
    cursor.close()
    conn.close()
    return "xxx"

@app.route("/show/user")
def show_user():
    #连接mysql
    conn = pymysql.connect(host="你自己的ip", port=你自己的端口, user='root', password='你自己的mysql密码', charset='utf8', db='unicom')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

    #执行sql
    sql = "select * from admin"
    cursor.execute(sql)
    data_list = cursor.fetchall()

    # 3.关闭、
    cursor.close()
    conn.close()
    # print(data_list)
    return render_template('show_user.html',data_list=data_list)



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

Front-end native code implementation

/add/user page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/add/user">
    <input type="text" name="user" placeholder="用户名">
    <input type="text" name="pwd" placeholder="密码">
    <input type="text" name="mobile" placeholder="手机号">
    <input type="submit" value="提 交">
</form>

</body>
</html>

/show/user page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            display: flex;
            flex-direction: row;
            justify-content: space-around;

        }
        h1{
            color: orange;
        }
        .box1{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        table{
            border: bisque 1px double;
            height: 300px;
        }
        td{
            width: 200px;
            border: bisque 1px double;
            background: #238a8e;
        }
        th{
            border: orangered 1px double;
            background: #a07c5f;

        }
        body{
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="title">
        <h1>用户列表</h1>
    </div>
    <div class="box1">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>账户</th>
                <th>密码</th>
                <th>手机号</th>
            </tr>
        </thead>
        <thead>
        {% for item in data_list%}
            <tr class="box2">
                <td>{
   
   {item.id}}</td>
                <td>{
   
   {item.username}}</td>
                <td>{
   
   {item.password}}</td>
                <td>{
   
   {item.mobile}}</td>
            </tr>
        {% endfor%}
        </thead>
    </table>
    </div>
</body>
</html>

The front-end and back-end interaction effects of the small case:

Guess you like

Origin blog.csdn.net/lbcyllqj/article/details/130537458