正心全栈编程-文档站

Appearance

用户管理 ​

渲染用户数据 ​

1、前端表格占位 ​

html

<div style="padding: 16px">
    <div class="layui-card">
        <div class="layui-card-body">
            <table
                    class="layui-hide"
                    id="user-table"
                    lay-filter="user-table"
            ></table>
        </div>
    </div>
</div>

2、请求接口数据 ​

javascript
table.render({
    elem: "#user-table",
    id: "user-table",
    url: "/api/v1/user", // 此处为静态模拟数据，实际使用时需换成真实接口
    height: "full-35", // 最大高度减去其他容器已占有的高度差
    toolbar: "#user-toolbar",
    page: true,
    cols: [
        [
            //标题栏
            {field: "id", title: "ID", width: 80, sort: true},
            {field: "username", title: "用户名", width: 120},
            {field: "nickname", title: "昵称", width: 120},
            {field: "mobile", title: "手机号", width: 160},
            {field: "email", title: "邮箱", width: 120},
            {field: "create_at", title: "创建时间", width: 180},
            {
                fixed: "right",
                title: "操作",
                width: 180,
                align: "center",
                toolbar: "#user-tool",
            },
        ],
    ],
});

3、后端返回用户数据 ​

python
@user_api.get("/user")
def user_list():
    page = request.args.get("page", default=1, type=int)
    per_page = request.args.get("limit", default=10, type=int)
    q = db.select(UserORM)

    pages: Pagination = db.paginate(q, page=page, per_page=per_page)

    return {
        "code": 0,
        "msg": "获取用户数据成功",
        "data": [item.json() for item in pages.items],
        "count": pages.total,
    }

新增用户 ​

1、新增表格头标签 ​

html

<script type="text/html" id="user-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="user-toolbar-add">
            新增用户
        </button>
    </div>
</script>

2、处理新增事件 ​

javascript
table.on("toolbar(user-table)", function (obj) {
    if (obj.event === "user-toolbar-add") {
        layer.open({
            type: 1,
            shade: false,
            content: $("#user-form"),
            area: ["50%", "80%"],
        });
        form.render($("#user-form"));
    }
});

3、新增表单 ​

html

<form
        class="layui-form"
        lay-filter="user-form"
        id="user-form"
        action=""
        style="padding: 15px; display: none"
>
    <div class="layui-form-item">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="id"
                    value="0"
                    lay-verify="required"
                    autocomplete="off"
                    class="layui-input"
                    disabled
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="username"
                    placeholder="请输入用户名"
                    lay-verify="required"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="nickname"
                    placeholder="请输入用户标识"
                    lay-verify="required"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="mobile"
                    placeholder="请输入用户描述"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="email"
                    placeholder="请输入用户权限列表"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input
                    type="text"
                    name="create_at"
                    class="layui-input"
                    id="form_create_at"
                    placeholder="yyyy-MM-dd HH:mm:ss"
                    autocomplete="off"
                    lay-verify="required"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button
                    type="submit"
                    class="layui-btn"
                    lay-submit
                    lay-filter="user-form-btn"
            >
                立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

渲染表单小组件 ​

javascript
// form_create_at
laydate.render({
    elem: "#form_create_at",
    type: "datetime",
});

4、前端提交事件 ​

javascript
form.on("submit(user-form-btn)", function (data) {
    var field = data.field;
    let method, url;
    if (field.id == 0) {
        field.id = null;
        method = "POST";
        url = "/api/v1/user";
    } else {
        method = "PUT";
        url = `/api/v1/user/${field.id}`;
    }
    $.ajax({
        url: url,
        type: method,
        contentType: "application/json",
        data: JSON.stringify(field),
        success: function (res) {
            if (!res.code) {
                layer.closeAll();
                table.reloadData("user-table");
            }
        },
    });
    return false;
});

5、后端完成修改 ​

python
@user_api.post("/user")
def create_user():
    data = request.get_json()
    if data["id"]:
        del data["id"]
    user = UserORM(**data)
    create_at = data["create_at"]
    if create_at:
        user.create_at = datetime.strptime(create_at, "%Y-%m-%d %H:%M:%S")
    user.password = "123456"
    user.save()
    return {"code": 0, "msg": "新增用户成功"}

修改用户 ​

1、添加表格行编辑标签

html

<script type="text/html" id="user-tool">
    <div class="layui-btn-container">
        <button
                class="layui-btn layui-btn-sm layui-bg-blue"
                lay-event="user-tool-edit"
        >
            编辑
        </button>
        <button
                class="layui-btn layui-btn-sm layui-bg-yellow"
                lay-event="user-tool-detail"
        >
            授权
        </button>
        <button
                class="layui-btn layui-btn-sm layui-bg-red"
                lay-event="user-tool-del"
        >
            删除
        </button>
    </div>
</script>

2、处理表格行编辑事件 ​

javascript
table.on("tool(user-table)", function (obj) {
    if (obj.event === "user-tool-edit") {
        form.val("user-form", obj.data);
        layer.open({
            type: 1,
            shade: false,
            content: $("#user-form"),
            area: ["50%", "80%"],
        });
    }
});

3、处理提交事件 ​

与新增共用同一个事件

4、后端完成修改 ​

python
@user_api.put("/user/<int:uid>")
def change_user(uid):
    data = request.get_json()
    del data["id"]

    user_obj = UserORM.query.get(uid)
    for key, value in data.items():
        if key == "create_at":
            value = datetime.strptime(value, "%Y-%m-%d %H:%M:%S")
        setattr(user_obj, key, value)
    user_obj.save()
    return {"code": 0, "msg": "修改用户信息成功"}

删除用户 ​

1、前端部分 ​

javascript
 table.on("tool(user-table)", function (obj) {
    if (obj.event === "user-tool-edit") {
        // ...
    } else if (obj.event === "user-tool-del") {
        $.ajax({
            url: `/api/v1/user/${obj.data.id}`,
            type: "DELETE",
            contentType: "application/json",
            success: function (res) {
                if (!res.code) {
                    table.reloadData("user-table");
                }
            },
        });
    }
});

2、后端完成删除 ​

python
@user_api.delete("/user/<int:rid>")
def del_user(rid):
    user_obj = UserORM.query.get(rid)
    user_obj.delete()
    return {"code": 0, "msg": "删除用户成功"}