FLASK+MYSQL+bootstrap 页面增删改查 - 学习记录

最新推荐文章于 2024-04-19 21:45:55 发布

疯狂的红烧肉

最新推荐文章于 2024-04-19 21:45:55 发布

阅读量1.6k

点赞数 7

分类专栏： python 文章标签： python flask mysql 前端

本文链接：https://blog.csdn.net/qq_30021011/article/details/109718949

版权

python 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

完成后的样式
后台服务 Flask

#coding:utf8
from flask import Flask, request, render_template
import pymysql as mysql
import json
import re

con = mysql.connect(
    host='127.0.0.1',
    user='root',
    password='123456',
    database='prj',
    charset='utf8'
)
con.autocommit(True)
cur = con.cursor()


app = Flask(__name__)   #新建app
@app.route('/')         #设置路由
def index():            # 设置路由对应的函数
    sql1 = "SELECT SUM(allprj) FROM sitsprj1 union SELECT SUM(doneprj) FROM sitsprj1"
    cur.execute(sql1)
    data1 = cur.fetchall()
    d1 = str(data1)                 #转化成Str，否则不能算
    d2 = re.findall(r"\d+", d1)     #用正则，只取数字
    d3 = round(int(d2[1])/int(d2[0])*100, 1)

    sql2 = "SELECT SUM(allprj) FROM sitsprj1"
    cur.execute(sql2)
    t2 = cur.fetchone()             #allprj的值

    sql3 = "SELECT SUM(doneprj) FROM sitsprj1"
    cur.execute(sql3)
    t3 = cur.fetchone()             #doneprj的值
    t4 = round(t3[0]/t2[0]*100, 1)  #python保留一位小数

    # context = {'data1': d2,'data2': data2}
    return render_template("prj1.html", d1=d1, d2=d2, d3=d3, t2=t2, t3=t3, t4=t4)


@app.route("/list")
def sitsprj1():
    sql = "select * from sitsprj1"
    cur.execute(sql)
    data = cur.fetchall()
    dump_data = json.dumps(data)
    print(dump_data)
    return dump_data

@app.route('/delete')
def delete():
    id = request.args.get("id")
    print(id)
    sql = 'delete from sitsprj1 where id="%s"' %(id)
    print(sql)
    cur.execute(sql)
    return "ok"

@app.route('/add')
def add():
    market = request.args.get('market')
    allprj = request.args.get('allprj')
    doneprj = request.args.get('doneprj')
    sql = 'insert into sitsprj1 values(DEFAULT,"%s","%s","%s")' %(market, allprj, doneprj)
    print(sql)
    cur.execute(sql)
    return "ok"

@app.route('/edit')
def edit():
    market = request.args.get('market')
    allprj = request.args.get('allprj')
    doneprj = request.args.get('doneprj')
    sql = 'update sitsprj1 set allprj="%s",doneprj="%s" where market="%s"' %(allprj, doneprj, market)
    print(sql)
    cur.execute(sql)
    return "ok"


if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0')

数据库 Mysql

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for sitsprj
-- ----------------------------
DROP TABLE IF EXISTS `sitsprj`;
CREATE TABLE `sitsprj`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `market` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `allprj` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `doneprj` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `donerat` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Table structure for sitsprj1
-- ----------------------------
DROP TABLE IF EXISTS `sitsprj1`;
CREATE TABLE `sitsprj1`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `market` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `allprj` int(255) NULL DEFAULT NULL,
  `doneprj` int(255) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 27 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

前端页面 bootstrap + jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
    <!-- 引入bootstrap.css 基于flask需要使用全路径-->
</head>
<body>
<div class="container">         <!-- 使用bootstrap的container容器 -->
    <div>             <!-- 使用bootstrap的 row -->
        <div class="col-md-2">     <!-- 使用bootstrap布局 col-md-2 占2份 ，总共12份 -->
        </div>
        <div class="col-md-8">     <!-- 使用bootstrap布局 col-md-2 占2份 ，总共12份 -->
            <div style="margin: 25px" class="table">
                <lable>市场:</lable>
                <input type="text" style="width: 20%;" class="market-input">
                <lable>总量:</lable>
                <input type="text" style="width: 20%;" class="allprj-input">
                <lable>完成:</lable>
                <input type="text" style="width: 20%;" class="doneprj-input">
                <button type="button" class="btn btn-primary" id="add-button">添加</button>
            </div>
            <hr />
            <div>
                <table class="table table-bordered text-center" style="margin-bottom: 1px">
                    <tr>
                        <td style="width: 20%">市场</td>
                        <td style="width: 20%">总数</td>
                        <td style="width: 20%">完成</td>
                        <td style="width: 20%">完成率</td>
                        <td style="width: 20%">操作</td>
                    </tr>
                </table>
                <table class="table table-bordered text-center" id="all-list" style="margin-bottom: 1px"></table>
                <table class="table table-bordered text-center" style="margin-bottom: 1px;background-color: rgba(104,222,255,0)">
                    <tr>
                        <td style="width: 20%">Total</td>
                        <td style="width: 20%">{{ d2[0] }}</td>
                        <td style="width: 20%">{{ d2[1] }}</td>
                        <td style="width: 20%">{{ d3 }}%</td>
                        <td style="width: 20%">Flask后台计算</td>
                    </tr>
                </table>
                <table class="table table-bordered text-center">
                    <tr>
                        <td style="width: 20%">Total</td>
                        <td style="width: 20%">{{ t2[0] }}</td>
                        <td style="width: 20%">{{ t3[0] }}</td>
                        <td style="width: 20%">{{ t4 }}%</td>
                        <td style="width: 20%">Flask单值计算</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-md-2">     <!-- 使用bootstrap布局 col-md-2 占2份 ，总共12份 -->
        </div>
     </div>
</div>

<!-- 基于bootstrap修改的的模态对话框-->
<div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <input type="text" id="edit-market">
                <input type="text" id="edit-allprj">
                <input type="text" id="edit-doneprj">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-market">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 引入各种js ，路径全路径 -->
<script src="../static/bootstrap/jquery-1.12.4.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>

<script>
    //用于展示页面的函数
    function getList() {
            $.getJSON('/list', function (res) {         //请求list接口获取数据
            var str = "";
            var totalRow2 = 0
            var totalRow3 = 0
            $.each(res, function (i, v) {
                str += "<tr>";                        // str拼接出一个表格
                str += "<td style=\"width: 20%\">" + v[1] + "</td>";
                str += "<td style=\"width: 20%\">" + v[2] + "</td>";
                str += "<td style=\"width: 20%\">" + v[3] + "</td>";
                str += "<td style=\"width: 20%\">" +  Math.round((v[3]/v[2]*100)*10)/10 + "%</td>";
                str += '<td style="width: 20%"> <button data-id="' + v[0] + '" class="delete-btn btn btn-warning btn-xs">删除</button>' +
                    '<button data-market="' + v[1] + '" data-allprj="' + v[2] + '" + data-doneprj="' + v[3] + '"  ' +
                    'class="edit-btn btn btn-success btn-xs">修改</button></td>'
                str += "</tr>";
                totalRow2 += parseFloat(v[2]);
                totalRow3 += parseFloat(v[3]);
            });

            $('#all-list').html(str).append('<tr style="background-color: yellow"><td>合计</td>' +
                '<td>' + totalRow2 + '</td>' +
                '<td>' + totalRow3 + '</td>' +
                '<td>' + Math.round((totalRow3/totalRow2*100)*10)/10 + '%</td>' +
                '<td>用jquery算的</td></tr>');

        })
    }

    getList();

    $(document).on('click', '.delete-btn', function () {        //点击delete按钮的事件函数
        var id = $(this).attr('data-id');                       // 获取点击按钮时 input标签内data-id属性的值，该值在上面的str拼接中设置了
        $.get('/delete?id=' + id, function (res) {              // 发生get请求
            if (res == "ok") {
                getList();
            }
        })
    });

    var gName;
    $(document).on('click', '.edit-btn', function () {          // 点击edit按钮的事件函数
        var market = $(this).attr('data-market');
        var allprj = $(this).attr('data-allprj');
        var doneprj = $(this).attr('data-doneprj');

        {#$('#edit-market').css('readonly' ,true);              // 给模态对话框中设置值#}
        $('#edit-market').val(market).attr("readonly","readonly").css("background-color","gray");      // 给模态对话框中设置值
        $('#edit-allprj').val(allprj);
        $('#edit-doneprj').val(doneprj);
        $('#edit-modal').modal('show');                         // 显示模态对话框
    });

    $("#add-button").on('click', function () {      //点击添加按钮的事件
        var market = $('.market-input').val();      //获取值
        var allprj = $('.allprj-input').val();
        var doneprj = $('.doneprj-input').val();
           gName = name;
        if (market && allprj) {     // 输入框有输入
            $.get('/add?market=' + market + '&allprj=' + allprj + '&doneprj=' + doneprj , function (res) {   //发生请求
                if (res == 'ok') {
                    $('.market-input').val('');    //添加成功把输入框设置空
                    $('.allprj-input').val('');
                    $('.doneprj-input').val('');
                    getList();          // 打印列表
                }
            })
        } else {
            alert("please input!");   // 输入框中没输入直接 alter一个报错
        }
    });

    $('#save-market').on('click', function () {     // 模态对话框中修改值后点击save的事件
        var market = $('#edit-market').val();
        var allprj = $('#edit-allprj').val();
        var doneprj = $('#edit-doneprj').val();
        a = allprj *1   // 想办法把值搞成数字才能计算
        b = doneprj*1
        if ( b > a)
        {
            alert('完成数量大于总数量！');
        }
        else{
            $.get('/edit?market=' + market + '&allprj=' + allprj, '&doneprj=' + doneprj, function (res) {
                if (res == "ok") {
                    $("#edit-modal").modal('hide');   // 隐藏模态对话框
                    getList();     //显示列表
                }
            })
        }
    });

</script>
</body>
</html>

总结
学习完成做一下记录，准备做2.0版使用 echart图表

疯狂的红烧肉

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
5
评论
FLASK+MYSQL+bootstrap 页面增删改查 - 学习记录

完成后的样式后台服务 Flask#coding:utf8from flask import Flask, request, render_templateimport pymysql as mysqlimport jsonimport recon = mysql.connect( host='127.0.0.1', user='root', password='123456', database='prj', charset='utf8'..
复制链接

扫一扫