基于Flask+Mysql+EasyUI的简单用户管理系统

news2024/12/23 9:54:50

1、系统实现功能

  1. 添加用户
  2. 查看用户
  3. 修改用户
  4. 删除用户

完整代码下载地址在最后，若显示链接不存在，可能是资源还没有审核，可私聊我发完整代码。

2、功能实现

2.1 添加用户

构建添加用户的Flask接口add_user()

@app.route("/add/user", methods=["GET", "POST"])
def add_user():
    username = request.form.get("username")
    password = request.form.get("password")
    mobile = request.form.get("mobile")

    # 1、连接数据库
    conn = Connection(
        host="localhost",
        port=3306,
        user="root",
        password="3535",
    )
    cursor = conn.cursor()
    conn.select_db("mysql_learning")
    # 2、执行SQL
    sql = "INSERT INTO admins (username, password, mobile) VALUES (%s, %s, %s)"
    cursor.execute(sql, [username, password, mobile])
    conn.commit()
    # 3、关闭连接
    cursor.close()
    conn.close()
    data_list = get_users()
    return render_template("show_user.html", data_list=data_list)

编写添加用户的页面

采用弹出框的方式进行用户的添加。其中action="/add/user"就是上述构建的添加用户的接口地址

<!--添加用户弹出框-->
    <div id="add-user" class="modify-dialog" data-options="closed:true" style="padding-left: 10px;">
        <form id="ff1" method="post" action="/add/user">
            <div style="margin-top: 5px;">
                <label>姓名:</label>
                <input id="username1" class="easyui-validatebox" type="text" name="username">
            </div>
            <br>
            <div>
                <label>密码:</label>
                <input id="password1" class="easyui-validatebox" type="text" name="password">
            </div>
            <br>
            <div>
                <label>电话:</label>
                <input id="mobile1" class="easyui-validatebox" type="text" name="mobile">
            </div>
            <br>
            <div>
                <input id="confirm" class="easyui-validatebox" type="submit" name="mobile">
            </div>
        </form>
    </div>

实现效果

在这里插入图片描述

2.2 显示用户

新建查询用户方法get_user

def get_users():
    # 1、连接数据库
    conn = Connection(
        host="localhost",
        port=3306,
        user="root",
        password="3535",
    )
    cursor = conn.cursor()
    conn.select_db("mysql_learning")
    # 2、执行SQL
    sql = "SELECT * FROM admins"
    cursor.execute(sql)
    data_list = cursor.fetchall()
    # 3、关闭连接
    cursor.close()
    conn.close()
    return data_list

新建Flask接口，调用该方法

@app.route("/show/user", methods=["GET"])
def show_user():
    data_list = get_users()
    return render_template("show_user.html", data_list=data_list)

/show/user接口，查询到用户的信息data_list之后，并携带信息，跳转到show_user.html页面

新建show_user.html页面

<div class="container" style="margin-top: 10px;">
    <h1>用户列表</h1>
    <a style="float: right;margin-bottom: 10px;" id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addUser()">添加用户</a>
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>密码</th>
            <th>手机号</th>
        </tr>
        </thead>
        <tbody>
        {% for item in data_list %}
        <tr>
            <td style="width: 50px">{{ item[0] }}</td>
            <td style="width: 100px">{{ item[1] }}</td>
            <td style="width: 150px">{{ item[2] }}</td>
            <td style="width: 100px">{{ item[3] }}</td>
            <td style="width: 100px">
                <a id="btn-delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteUser(this)">删除</a>
                <a id="btn-modify" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="modifyUser(this)">修改</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

采用以下这种方式遍历用户数据

{% for item in data_list %}

{% endfor %}

实现效果

在这里插入图片描述

2.3 修改用户

创建修改用户的Flask接口modify_user()

@app.route("/modify/user", methods=["POST"])
def modify_user():
    new_data = json.loads(request.form.get("data"))
    user_id = new_data.get('id')
    username = new_data.get('name')
    password = new_data.get('password')
    mobile = new_data.get('mobile')
    # 1、连接数据库
    conn = Connection(
        host="localhost",
        port=3306,
        user="root",
        password="3535",
    )
    cursor = conn.cursor()
    conn.select_db("mysql_learning")
    # 2、执行SQL
    print("=====" + str(user_id))
    sql = "UPDATE admins SET username = %s, password = %s, mobile = %s WHERE id = %s"
    cursor.execute(sql, [username, password, mobile, user_id])
    conn.commit()
    cursor.close()
    conn.close()
    data_list = get_users()
    return render_template("show_user.html", data_list=data_list)

创建前端修改用户页面

依然采用弹出框的形式，进行修改用户

<div id="dd" class="modify-dialog" data-options="closed:true" style="padding-left: 10px;">
        <form id="ff" method="post">
            <div style="margin-top: 5px;">
                <label>姓名:</label>
                <input id="username" class="easyui-validatebox" type="text" name="username">
            </div>
            <br>
            <div>
                <label>密码:</label>
                <input id="password" class="easyui-validatebox" type="text" name="password">
            </div>
            <br>
            <div>
                <label>电话:</label>
                <input id="mobile" class="easyui-validatebox" type="text" name="mobile">
            </div>
            <br>
            <a id="btn-confirm" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="confirmModifyUser(this)">确定</a>
            <a id="btn-cancel" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteUser(this)">取消</a>
        </form>
    </div>

首先，用户点击修改之后，弹出修改狂，修改狂要显示当前的用户信息，实现的jquery代码如下：

function modifyUser(button) {
        $('#dd').dialog({
            title: '修改用户',
            width: 400,
            height: 300,
            closed: false,
            cache: false,
            modal: true
        });
        // 获取按钮所在的行
        const row = button.closest('tr');
        const id_cell = row.getElementsByTagName('td')[0];
        modifyUserId = id_cell.textContent || id_cell.innerText;
        // 获取第一列的单元格
        const name_cell = row.getElementsByTagName('td')[1];
        // 获取单元格的文本内容
        const name = name_cell.textContent || name_cell.innerText;

        // 获取第一列的单元格
        const password_cell = row.getElementsByTagName('td')[2];
        // 获取单元格的文本内容
        const password = password_cell.textContent || password_cell.innerText;

        // 获取第一列的单元格
        const mobile_cell = row.getElementsByTagName('td')[3];
        // 获取单元格的文本内容
        const mobile = mobile_cell.textContent || mobile_cell.innerText;

        $('#username').val(name);
        $('#password').val(password);
        $('#mobile').val(mobile);
    }

上面代码中的modifyUserId ，是为了接收要修改的用户的id，因为id不在弹出框显示，要定义一个全局的变量modifyUserId 进行接收。实现效果如下：
在这里插入图片描述
接着用户，修改信息，点击确定进行用户信息的修改，点击确定之后触发以下函数：

function confirmModifyUser(){
        const name = $('#username').val();
        const password = $('#password').val();
        const mobile = $('#mobile').val();
        console.log(modifyUserId);
        let newData = {
            id: modifyUserId,
            name: name,
            password: password,
            mobile: mobile
        };
        let newDataJson = JSON.stringify(newData);
        $.post("/modify/user", {data: newDataJson}, function (){
            $.messager.alert("系统提示", "修改成功", "info");
                    setTimeout(function () {
                        history.go(0);
                    }, 1000);
        })
    }

创建一个newData进行用户新的信息的接收，并且把newData转化为json格式的数据，方便flask后端进行接收。这里要注意，后端接收代码的编写：

new_data = json.loads(request.form.get("data"))
user_id = new_data.get('id')
username = new_data.get('name')
password = new_data.get('password')
mobile = new_data.get('mobile')

最终实现的效果如下：

在这里插入图片描述

2.4 删除用户

构建删除用户的接口del_user()

@app.route("/delete/user/<user_id>", methods=["POST"])
def del_user(user_id):
    # 1、连接数据库
    conn = Connection(
        host="localhost",
        port=3306,
        user="root",
        password="3535",
    )
    cursor = conn.cursor()
    conn.select_db("mysql_learning")
    # 2、执行SQL
    print("=====" + str(user_id))
    sql = "DELETE FROM admins WHERE id = %s"
    cursor.execute(sql, user_id)
    conn.commit()
    cursor.close()
    conn.close()
    data_list = get_users()
    return render_template("show_user.html", data_list=data_list)

编写删除页面

给用户列表页面的删除按钮绑定删除事件deleteUser，并传递参数this，这里的this可以获取当前行的数据，下面的参数button就是行的参数，通过先获取按钮所在行，接着获取第一列的单元格，最后获取单元格的内容即是唯一标识符id

function deleteUser(button) {
        $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
            if (r) {
                // 获取按钮所在的行
                const row = button.closest('tr');
                // 获取第一列的单元格
                const cell = row.getElementsByTagName('td')[0];
                // 获取单元格的文本内容
                const id = cell.textContent || cell.innerText;

                $.post("/delete/user/" + id, function () {
                    $.messager.alert("系统提示", "删除成功", "info");
                    setTimeout(function () {
                        history.go(0);
                    }, 1000);
                })
            }
        });
    }

当用户点击删除之后，首先弹出确认删除的提示框，再次确认才会删除信息。

现实效果如下

在这里插入图片描述
点击OK即可确认删除。

在这里插入图片描述

3、完整代码下载地址

https://download.csdn.net/download/WwLK123/89434139

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1836220.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机网络（谢希仁第六版）| 课后习题与答案 | 物理层 | 题目知识点详细分析

计算机网络（谢希仁第六版）| 课后习题与答案 | 物理层 | 题目知识点详细分析

计算机网络&#xff08;谢希仁第六版&#xff09;课后习题与答案 物理层 博客只对老师给的重点进行整理&#xff0c;完整的课后习题答案见Gitee下载&#xff1a;《计算机网络教程&#xff08;第6版&#xff09;&#xff08;微课版&#xff09;》习题答案 2-5 请画出数据流1 0 1…
阅读更多...
JavaFX 分页

JavaFX 分页

分页控件用于浏览多个页面。 我们典型地使用对网页的分页控制&#xff0c;例如博客。 在博客页面的底部&#xff0c;我们可以看到一个矩形区域&#xff0c;作为一个数字列表来指示页面索引&#xff0c;以及一个下一个/上一个按钮来链接到下一个/上一个页面。 创建分页控件 分…
阅读更多...
OpenCV中的圆形标靶检测——findCirclesGrid()（二）

OpenCV中的圆形标靶检测——findCirclesGrid()（二）

本章我们开始讲解基于层次聚类的标靶检测算法。当我们调用如下API，且flags中包含cv::CALIB_CB_CLUSTERING标志位时，将会执行基于层次聚类的斑点检测算法。算法支持对称标靶和非对称标靶两类，相应的需要将下述flags设为包含CALIB_CB_SYMMETRIC_GRID或CALIB_CB_ASYMMETRIC_GRI…
阅读更多...
安卓Context上下文

安卓Context上下文

目录 前言一、Context简介二、Application Context2.1 Application Context的创建过程2.2 Application Context的获取过程 三、Activity的Context创建过程四、Service的Context创建过程 前言 Context也就是上下文对象&#xff0c;是Android较为常用的类&#xff0c;但是对于Co…
阅读更多...
MySQL事务、数据库的存储引擎

MySQL事务、数据库的存储引擎

1. 事务的概念 定义&#xff1a;事务就是一组数据库操作序列&#xff08;包含一个或多个SQL操作命令&#xff09;&#xff0c;事务会把所有操作看作是一个不可分割的整体向数据库系统提交或撤销操作&#xff0c;所有操作要么都执行&#xff0c;要么都不执行。 1.1事务的 ACID …
阅读更多...
重学java 74.Lombok的使用

重学java 74.Lombok的使用

少点心气&#xff0c;多点干劲 —— 24.6.18 一、lombok的安装使用 1.作用: 简化javabean开发 2.使用: a.下插件 ->如果是idea2022不用下载了,自带 b.导lombok的jar包 安装教程&#xff1a; http://t.csdnimg.cn/wq9MM c.修改设置 二、lombok的介绍 Lombok通过增加一…
阅读更多...
短路是怎么形成的

短路是怎么形成的

1. 短路分为电源短路和用电器短路。 电源短路&#xff1a;电流不经过任何用电器&#xff0c;直接由正极经过导线流向负极&#xff0c;由于电源内阻很小&#xff0c;导致短路电流很大&#xff0c;特别容易烧坏电源。 用电器短路&#xff1a;也叫部分电路短路&#xff0c;即一根…
阅读更多...
Java对象头的组成

Java对象头的组成

介绍对象头之前先说一下Java对象内部的组成结构&#xff1a; 1&#xff0c;成员变量&#xff08;Data1...DataN&#xff09; 2, 对象头 Java对象头的组成&#xff08;根据对象头分析对象状态借此优化代码&#xff09; <dependency> <groupId>org.openjdk.jol&l…
阅读更多...
Spring注解----------@Deprecated

Spring注解----------@Deprecated

情景&#xff1a; 在我们开发过程中&#xff0c;有时候会遇到我们需要将几个类中的方法集中到一个类中&#xff0c;但是我们又不希望把我们的原来的类删掉&#xff08;就是单纯的不想删除&#xff0c;都是我写的代码我不想杀死我的结晶&#xff0c;不能说我写的是shi&#xff…
阅读更多...
再次递表港交所，慧算账能否把握AI+财税SaaS机遇？

再次递表港交所，慧算账能否把握AI+财税SaaS机遇？

5月以来&#xff0c;港股IPO市场日渐兴旺&#xff0c;多家公司实现上市首日“零破发”&#xff0c;平均收涨约30%&#xff0c;6月更是出现了超2500倍超购新股。市场赚钱效应显现&#xff0c;投资者打新随之热情高涨&#xff0c;越来越多国内企业也开始抓紧赴港上市。 近日&…
阅读更多...
[Qt的学习日常]--常用控件3

[Qt的学习日常]--常用控件3

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、显示类控…
阅读更多...
猫头虎分享已解决Bug || 前端领域技术问题解析

猫头虎分享已解决Bug || 前端领域技术问题解析

原创作者&#xff1a; 猫头虎 作者微信号&#xff1a; Libin9iOak 作者公众号&#xff1a; 猫头虎技术团队 更新日期&#xff1a; 2024年6月6日 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &…
阅读更多...
06--jenkins构建CI_CD

06--jenkins构建CI_CD

前言&#xff1a;上一篇文章整理了git的部署和使用&#xff0c;这章主要复习持续集成软件Jenkins&#xff0c;这个技术现在在云计算方面也是有应用的&#xff0c;同时也是越高级越智能的软件代表。 1、概念简介 1&#xff09;jenkins是什么 Jenkins是一个开源的、可扩展的持…
阅读更多...
C++学习/复习15--栈与队列概述及练习/deque/适配器的概念

C++学习/复习15--栈与队列概述及练习/deque/适配器的概念

1.1stack概念 1.2stack函数 1.3最小栈 1.4栈的压入弹出 1.5逆波兰表达式 1.6栈实现队列 1.7层序遍历 1.8stack模拟实现 2.1queue概念 2.2queue函数 2.3queue模拟实现 3.1deque适配器 3.2deque功能 3.3deque原理 3.4deque特点与适配器
阅读更多...
Windows下切换JDK版本

Windows下切换JDK版本

&#x1f4d6;Windows下切换JDK版本 ✅1. 下载JEnv✅2. 安装JEnv✅3. 添加JDK✅4. 切换JDK 前提条件&#xff1a;电脑得装有至少2个JDK版本 ✅1. 下载JEnv github地址&#xff1a;https://github.com/FelixSelter/JEnv-for-Windows/releases ✅2. 安装JEnv 1.将下载好的JEnv…
阅读更多...
TP5400 SOIC-8 1A 锂电池充电和 5V/1A 升压控制芯片

TP5400 SOIC-8 1A 锂电池充电和 5V/1A 升压控制芯片

TP5400 作为一款高集成度的电池充电管理和升压控制芯片&#xff0c;其应用领域不仅仅局限于智能手机&#xff0c;还可以广泛应用于其他各种便携设备。以下是一些潜在的应用例子&#xff1a; 1.平板电脑&#xff1a;平板电脑同样依赖于锂电池作为电源&#xff0c;并且需要高效的…
阅读更多...
经验分享，在线文本比较工具

经验分享，在线文本比较工具

这里分享一个在线文本比较工具&#xff0c;打开网页即用&#xff0c;很方便 网址&#xff1a; https://www.jq22.com/textDifference 截图&#xff1a;
阅读更多...
专业技能篇---计算机网络篇

专业技能篇---计算机网络篇

文章目录 前言计算机网络基础一、网络分层模型 HTTP一、从输入URL到页面显示发生了什么&#xff1f;二、Http的状态码有哪些&#xff1f;三、 HTTP与HTTPS有什么区别&#xff1f;四、URI 和 URL 的区别是什么?五、Cookie和Session有什么区别&#xff1f;六、GET与POST 前言 主…
阅读更多...
ArrayList泛型存储类型以及Arraylist与数组的转换

ArrayList泛型存储类型以及Arraylist与数组的转换

1.泛型的存储类型 众所周知&#xff0c;ArrayList< E>泛型能够存储所有的对象类型&#xff0c;如String、对象、以及基本类型的包装类。 java中所有的基本类型如下&#xff1a; 那么&#xff0c;泛型< E>能否存储int[]&#xff0c;String[]数组这种类型呢&#…
阅读更多...
思科配置路由器，四台主机互相ping通

思科配置路由器，四台主机互相ping通

一、如图配置 PC4和PC5用来配置路由器&#xff0c;各ip、接口如图所示。 二、配置各主机ip、子网掩码SNM、默认网关DGW (一)、PC0 (二)、PC1 (三)、PC2 (四)、PC3 三、 配置路由器Router0 (期间报错是打错了字母) Router>en Router#configure terminal Enter configurat…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023