【开源】使用Python+Flask+Mysql快速开发一个用户增删改查系统

项目演示

项目本身很简单，增删改查是几乎所有系统的骨架。正所谓万丈高楼平地起，学会了增删改查，航母就指日可待了：），光速入门，直接看演示图：

项目地址

https://github.com/mudfish/python-flask-user-crud

Flask框架介绍

说白了就是一个Web框架，能够让你快速开发出Python web应用。简单易用，大家直接看官网就行：
https://flask.palletsprojects.com/en/3.0.x/quickstart/

开发步骤

开发工具

懒得折腾Pycharm了，直接Vscode安装pyhon和flask插件即可，也是比较丝滑的。

准备静态文件

主要用了Bootstrap5和Jquery这两个前端框架，一个是UI，一个是js。
都放到static文件夹下面：

开发入口文件

这个就是flask运行的文件，里面包括了启动入口，端口号和业务逻辑接口。

from flask import Flask, render_template, request, redirect, url_for, flash
import pymysql.cursors

# Connect to the database
connection = pymysql.connect(host='localhost',
                             user='root',
                             password='123456',
                             db='user_test',
                             charset='utf8mb4',
                             cursorclass=pymysql.cursors.DictCursor)
    
app = Flask(__name__)# 保持数据库连接defgetconnection():
    connection.ping(reconnect=True)return connection
    
# 首页@app.route('/')defindex():try:with getconnection().cursor()as cursor:
            sql ="SELECT * FROM `tb_user`"
            cols =['id','name','age','gender','phone']
            cursor.execute(sql)
            result = cursor.fetchall()
            cursor.close()return render_template("index.html", items=result, cols=cols, success='')except Exception as e:
        cursor.close()return render_template("index.html", items=[], cols=[], success='Can\'t view index: '+str(e))# 搜索@app.route('/search')defsearch():
    keyword = request.args.get('keyword').strip()try:with getconnection().cursor()as cursor:
            sql ="SELECT * FROM `tb_user` where name like concat('%%',%s,'%%')"
            cols =['id','name','age','gender','phone']
            cursor.execute(sql,(keyword))
            result = cursor.fetchall()# print(result)
            cursor.close()return render_template("index.html", items=result, keyword=keyword, cols=cols, success='')except Exception as e:
        cursor.close()return render_template("index.html", items=[], cols=[], success='search error: '+str(e))@app.route('/toAddPage')deftoAddPage():return render_template('add.html')@app.route('/toEditPage/<int:id>')deftoEditPage(id):# print(id)try:with getconnection().cursor()as cursor:
            sql ="select * from `tb_user` where id=%s"
            cursor.execute(sql,(id))
            result = cursor.fetchone()
            cursor.close()return render_template("edit.html", item=result, success='')except Exception as e:
        cursor.close()return render_template("edit.html", success='Can\'t edit User: '+str(e))@app.route('/add', methods=['POST'])defadd():
    name = request.form['name'].strip()
    age = request.form['age'].strip()
    gender = request.form['gender'].strip()
    phone = request.form['phone'].strip()try:with getconnection().cursor()as cursor:
            sql ="INSERT INTO `tb_user` (`name`, `age`,`gender`,`phone`) VALUES (%s, %s,%s,%s)"
            cursor.execute(sql,(name, age,gender,phone))
            cursor.close()return redirect(url_for("index"))except Exception as e:
        cursor.close()return render_template("add.html", success='Can\'t add User: '+str(e))@app.route('/edit',methods=['POST'])defedit():id= request.form['id'].strip()
    name = request.form['name'].strip()
    age = request.form['age'].strip()
    phone = request.form['phone'].strip()
    gender = request.form['gender'].strip()try:with getconnection().cursor()as cursor:
            sql ="update `tb_user` set name=%s,age=%s,gender=%s,phone=%s where id=%s"
            cursor.execute(sql,(name, age,gender,phone,id))
            cursor.close()return redirect(url_for("index"))except Exception as e:
        cursor.close()return render_template("edit.html", success='Can\'t edit User: '+str(e))@app.route('/remove/<int:id>/')defremove(id):try:with getconnection().cursor()as cursor:
            sql ="delete from `tb_user` where id=%s"
            cursor.execute(sql,(id))
            cursor.close()return redirect(url_for("index"))except Exception as e:
        cursor.close()return render_template("index.html", success='Can\'t remove User: '+str(e))@app.errorhandler(404)defpage_not_found(error):return render_template('page_not_found.html'),[email protected](500)defsystem_error(error):return render_template('500.html'),500if __name__ =='__main__':# 静态文件缓存自动刷新
    app.jinja_env.auto_reload =True
    app.run(host='127.0.0.1',port=8001, debug=True)

开发html文件

后端接口有了，接下来就是web端发起调用，完成增删改查交互操作了。
此处flask提供了简单易用的渲染语法，请看：

首页

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkhref="{{ url_for('static', filename = 'css/bootstrap.min.css') }}"rel="stylesheet"><title>首页</title></head><body><divclass="container"><divclass="row justify-content-center align-items-center g-1"><divclass="col-6 pt-5"><!-- search --><formaction="/search"method="get"><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholderaria-label="Example text with button addon"aria-describedby="button-addon1"name="keyword"{%ifkeyword%}value="{{keyword}}"{%endif%}><buttonclass="btn btn-primary"type="submit"id="button-addon1">查询</button><aclass="btn btn-warning "href="/toAddPage">新增</a></div></form><divclass="table-responsive"><tableclass="table table-primary"><thead><tr><thscope="col">ID</th><thscope="col">姓名</th><thscope="col">性别</th><thscope="col">年龄</th><thscope="col">联系方式</th><thscope="col">操作</th></tr></thead><tbody>
                               {% for item in items %}
                               <tr>
                                   {% for col in cols %}
                                   <td>{{ item[col] }}</td>
                                   {% endfor %}
                                   <!-- 补操作列 --><td><aclass="btn btn-sm btn-primary"href="{{url_for('toEditPage',id=item['id'])}}">编辑</a><aclass="btn btn-sm btn-danger"href="{{url_for('remove',id=item['id'])}}"onclick="returnconfirm('确定删除吗');">删除</a></td></tr>
                               {% endfor %}

                           </tbody></table><divclass="bg-warning  ">{{success}}</div></div></div></div></div><scriptsrc="{{url_for('static',filename='js/jquery.min.js')}}"></script></body></html>

新增页面

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>新增用户</title><linkhref="{{ url_for('static', filename = 'css/bootstrap.min.css') }}"rel="stylesheet"></head><body><divclass="container"><divclass="row justify-content-center align-items-center g-1"><divclass="col-6 pt-5"><divclass="card"><divclass="card-header">
             新增用户
           </div><divclass="card-body"><formaction="/add"method="post"><divclass="row mb-3"><labelfor="colFormLabelSm"class="col-sm-2 col-form-label col-form-label">姓名</label><divclass="col-sm-10"><inputtype="text"class="form-control form-control-sm"id="colFormLabelSm"name="name"required></div></div><divclass="row mb-3"><labelfor="age"class="col-sm-2 col-form-label">年龄</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="age"name="age"required></div></div><divclass="row mb-3"><labelfor="inlineRadio1"class="col-sm-2 col-form-label">性别</label><divclass="col-3"><inputclass="form-check-input"type="radio"name="gender"id="gender01"value="男"><labelclass="form-check-label"for="inlineRadio1">男</label></div><divclass="col-2"><inputclass="form-check-input"type="radio"name="gender"id="gender02"value="女"><labelclass="form-check-label"for="inlineRadio2">女</label></div></div><divclass="row mb-3"><labelfor="phone"class="col-sm-2 col-form-label">联系电话</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="phone"name="phone"required></div></div><divclass="row mb-3 justify-content-center align-items-center "><divclass="col-6"><atype="button"class="btn btn-secondary "href="/">
                     取消
                   </a><buttontype="submit"class="btn btn-primary ">
                     保存
                   </button></div></div></form></div><divclass="bg-warning  ">{{success}}</div></div></div></div></div></body></html>

编辑页面

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>修改用户</title><linkhref="{{ url_for('static', filename = 'css/bootstrap.min.css') }}"rel="stylesheet"></head><body><divclass="container"><divclass="row justify-content-center align-items-center g-1"><divclass="col-6 pt-5"><divclass="card"><divclass="card-header">
             新增用户
           </div><divclass="card-body"><formaction="/edit"method="post">
               {% if item %}
               <inputtype="hidden"name="id"value="{{item.id}}"><divclass="row mb-3"><!-- {{item}} --><labelfor="colFormLabelSm"class="col-sm-2 col-form-label col-form-label">姓名</label><divclass="col-sm-10"><inputtype="text"class="form-control form-control-sm"id="colFormLabelSm"name="name"value="{{item.name}}"required></div></div><divclass="row mb-3"><labelfor="age"class="col-sm-2 col-form-label">年龄</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="age"name="age"value="{{item.age}}"required></div></div><divclass="row mb-3"><labelfor="gender"class="col-sm-2 col-form-label">性别</label><divclass="col-3">
                   <input class="form-check-input" type="radio" name="gender"
                     id="gender01" value="男" {% if item.gender=="男" %} checked
                     {% endif %}>
                   <labelclass="form-check-label"for="gender01">男</label></div><divclass="col-2">
                   <input class="form-check-input" type="radio" name="gender"
                     id="gender02" value="女" {% if item.gender=="女" %} checked
                     {% endif %}>
                   <labelclass="form-check-label"for="gender02">女</label></div></div><divclass="row mb-3"><labelfor="phone"class="col-sm-2 col-form-label">联系电话</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="phone"name="phone"value="{{item.phone}}"required></div></div><divclass="row mb-3 justify-content-center align-items-center "><divclass="col-6"><atype="button"class="btn btn-secondary  "href="/">
                     取消
                   </a><buttontype="submit"class="btn btn-primary ">
                     保存
                   </button></div></div>
               {% endif %}
             </form></div></div><divclass="bg-warning  ">{{success}}</div></div></div></div></body></html>

收工

看完觉着有帮助的朋友，一键三连哈~~