flask + layui 实现学员信息案例

视频地址： https://www.bilibili.com/video/BV1jX4y1t7EH/

接下来演示用 flask + layui 搭建一个学员信息管理的案例

这个案例将会利用 flask 做后端，layui table 组件做前端，基于 restful api 完成一个学员信息管理的完整案例。案例内容涉及的知识点会比较多，但是对于基础，我在案例中也不会过多赘述，当看不懂时可以查阅一下官方文档或者补一下对应的基础知识。

项目搭建

新建 flask 项目
下载 layui 文件，解压之后复制到指定文件
配置 flask-sqlalchemy 插件
完成数据库建模，数据表创建

创建项目

创建项目的方式有很多种，只要有任意一种方式创建即刻。在这里我直接选择使用 pycharm 进行创建。

创建成功后目录如下

X:\flask-student>tree /f
X:.
│  app.py
│
├─static
└─templates

访问 https://layui.dev/ ，点击直接下载之后就能得到 layui 的静态文件，将其复制到 static 目录下，完成之后的目录结构如下

txt

X:\flask-student>tree /f
X:.
│  app.py
│
├─static
│  │  layui.js
│  │
│  ├─css
│  │      layui.css
│  │
│  └─font
│          iconfont.eot
│          iconfont.svg
│          iconfont.ttf
│          iconfont.woff
│          iconfont.woff2
│
└─templates

配置插件

1、安装插件

shell

pip install flask-sqlalchemy

2、添加配置文件

config.py

python

# 数据库链接配置
SQLALCHEMY_DATABASE_URI = 'sqlite:///flask-student.sqlite'
SQLALCHEMY_TRACK_MODIFICATIONS = False

3、创建实例对象

extensions.py

python

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()


def register_extension(app):
    db.init_app(app)

4、绑定到 flask app

python

import config
from extensions import register_extension, db


app.config.from_object(config)
register_extension(app)

数据库建模

1、创建数据模型

orms.py

python

from extensions import db
from datetime import datetime


class StudentORM(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(255), nullable=False)
    gender = db.Column(db.Enum('M', 'F'))
    mobile = db.Column(db.String(11), nullable=False, unique=True)
    class_name = db.Column(db.String(10), nullable=True)
    address = db.Column(db.String(255))
    disable = db.Column(db.Boolean, default=False)
    is_del = db.Column(db.Boolean, default=False)

    create_at = db.Column(db.DateTime, default=datetime.now)  # 记录的创建时间
    update_at = db.Column(db.DateTime, default=datetime.now, onupdate=datetime.now)  # 记录的更新时间

    def save(self):
        db.session.add(self)
        db.session.commit()

2、生成数据表

python

from orms import StudentORM

@app.cli.command()
def create():
    db.drop_all()
    db.create_all()
    from faker import Faker
    import random

    faker = Faker(locale="zh-CN")

    for i in range(100):
        student = orms.StudentORM()
        info = faker.simple_profile()
        student.name = info['name']
        student.gender = info['sex']
        student.mobile = faker.phone_number()
        student.address = info['address']
        student.class_name = random.choice(['一班', '二班', '三班'])
        student.save()

学员信息渲染

需要完成的工作如下：

返回学员信息页面，在前端请求后端接口数据
返回学员信息接口，并且支持分页、查询（后续待用）

后端部分

1、编写后端接口返回前端数据，返回数据

python

@app.route('/api/student')
def student_view():
    page = request.args.get('page', type=int, default=1)
    per_page = request.args.get('per_page', type=int, default=10)
    paginate = StudentORM.query.paginate(page=page, per_page=per_page, error_out=False)
    items: [StudentORM] = paginate.items
    return {
        'code': 0,
        'msg': '信息查询成功',
        'count': paginate.total,
        'data': [
            {
                'id': item.id,
                'name': item.name,
                'gender': item.gender,
                'mobile': item.mobile,
                'class_name': item.class_name,
                'address': item.address,
                'disable': item.disable,
                'is_del': item.is_del,
                'create_at': item.create_at.strftime('%Y-%m-%d %H:%M:%S'),
                'update_at': item.update_at.strftime('%Y-%m-%d %H:%M:%S'),
            } for item in items
        ]
    }

2、后端返回静态页面

python

@app.route('/')
def hello_world():
    return render_template('index.html')

前端部分

表格获取，数据渲染

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="/static/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <table class="layui-hide" id="student"></table>
    </div>
    <script src="/static/layui.js"></script>
    <script>
      layui.use(function () {
        var table = layui.table;

        // 已知数据渲染
        var inst = table.render({
          elem: "#student",
          id: "student",
          url: "/api/student",
          cols: [
            [
              // 标题栏
              { field: "id", title: "ID", width: 60, sort: true },
              { field: "name", title: "姓名", width: 100 },
              { field: "gender", title: "性别", width: 60 },
              { field: "class_name", title: "班级", width: 80 },
              { field: "mobile", title: "手机", width: 120 },
              { field: "address", title: "地址", minWidth: 160 },
              { field: "create_at", title: "创建时间", width: 200 },
              { field: "disable", title: "禁用", width: 100 },
              { field: "is_del", title: "删除", width: 80 },
            ],
          ],
          page: true,
        });
      });
    </script>
  </body>
</html>

2、性别渲染

先定义渲染方法

javascript

function render_gender(d) {
  if (d.gender === "M") {
    return '<span style="color: blue">♂</span>';
  } else {
    return '<span style="color: pink">♀</span>';
  }
}

再进行渲染

{field: 'gender', title: '性别', width: 60, templet: render_gender},

后面还有好几个字段需要进行渲染与修改，例如班级字段需要实现点击下拉选择，地址信息直接编辑修改，创建时间点击之后选择新的日期进行修改，禁用、删除用开关进行点击切换。关于这部分的内容，将放到最后进行修改。

新增学员信息

请求新增页面

添加表格头部栏新增按钮
添加新增案例的点击事件
前端发起请求，用 iframe 显示到新的页面
后端返回 html 模板

1、新增表格头部工具栏

html

<!-- 工具栏模板 -->
<script type="text/html" id="toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete_many">删除</button>
  </div>
</script>

2、添加表格工具栏事件

// 已知数据渲染
var inst = table.render({
  elem: "#student",
  id: "student",
  url: "/api/student",
  toolbar: "#toolbar",
  cols: [
    [
      /*...*/
    ],
  ],
  page: true,
});

3、添加点击事件

// 头部工具栏事件
table.on("toolbar(student)", function (obj) {
  var options = obj.config; // 获取当前表格属性配置项
  var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据

  // 根据不同的事件名进行相应的操作
  switch (
    obj.event // 对应模板元素中的 lay-event 属性值
  ) {
    case "add":
      window.show_add();
      break;
    case "delete_many":
      window.delete_many(obj);
      break;
  }
});

window.show_add = function () {
  layer.msg("添加");
};

window.delete_many = function (obj) {
  layer.msg("批量删除");
};

4、显示新增表单

4.1、新建子页 html

student_add.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/layui.css" />
  </head>
  <body>
    新增表单

    <script src="/static/layui.js"></script>
    <script>
      layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
      });
    </script>
  </body>
</html>

4.2、后端返回模板

python

@app.get('/student_add')
def student_add():
    return render_template('student_add.html')

4.3、前端发起请求

window.show_add = function () {
  layer.open({
    type: 2,
    title: "新增学员",
    shadeClose: true,
    maxmin: true, //开启最大化最小化按钮
    area: ["900px", "600px"],
    content: "/student_add",
  });
};

新增逻辑

添加新增表单
前端录入数据之后进行校验
校验成功之后提交到后端
后端接收数据添加到数据库
前端关闭添加页面

1、添加新增表单

html

<form
  class="layui-form"
  action=""
  lay-filter="form_add"
  style="margin-top: 20px"
>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="name"
        lay-verify="required"
        autocomplete="off"
        placeholder="请输入"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <select name="gender" lay-verify="required">
        <option value=""></option>
        <option value="M">男</option>
        <option value="F">女</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">班级</label>
    <div class="layui-input-block">
      <select name="class_name" lay-verify="required">
        <option value=""></option>
        <option value="一班">一班</option>
        <option value="二班">二班</option>
        <option value="三班">三班</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="mobile"
        lay-verify="required|phone"
        autocomplete="off"
        placeholder="请输入"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <textarea
        name="address"
        class="layui-textarea"
        placeholder="请输入地址"
      ></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-inline">
        <input
          type="text"
          class="layui-input"
          name="create_at"
          id="create-at"
          placeholder=""
          autocomplete="off"
          lay-verify="required"
        />
      </div>
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">禁用</label>
    <div class="layui-input-block">
      <input
        type="checkbox"
        name="disable"
        lay-skin="switch"
        lay-filter="switchTest"
        title="是|否"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button
        type="submit"
        class="layui-btn"
        lay-submit
        lay-filter="add-commit"
      >
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

2、监控提交事件

html

<script>
  layui.use(function () {
    var $ = layui.$;
    var form = layui.form;
    var laydate = layui.laydate;

    // 提交事件
    form.on("submit(add-commit)", function (data) {
      var field = data.field; // 获取表单字段值
      console.log(field);
      // 此处可执行 Ajax 等操作
      // …
      return false; // 阻止默认 form 跳转
    });

    // 日期时间选择器
    laydate.render({
      elem: "#create-at",
      type: "datetime",
    });
  });
</script>

3、检测数据并进行提交

javascript

// 新增提交的方法
const add_student = async (data) => {
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  };
  const response = await fetch("/api/student", options);
  return await response.json();
};

// 提交事件
form.on("submit(add-commit)", function (data) {
  var field = data.field; // 获取表单字段值
  console.log(field);
  // 此处可执行 Ajax 等操作
  field.disable = field?.disable ? true : false;

  add_student(field).then(function (ret) {
    // 提交成功之后的回调
    if (!ret.code) {
      layer.msg(
        ret.msg,
        {
          icon: 1,
          time: 1000,
        },
        function () {
          parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
          parent.layui.table.reload("student");
        },
      );
    } else {
      layer.msg(ret.msg, {
        icon: 2,
        time: 1000,
      });
    }
  });

  // …
  return false; // 阻止默认 form 跳转
});

4、后端模型添加方法

python

class StudentORM(db.Model):
    ...

    def save(self):
        db.session.add(self)
        db.session.commit()

    def update(self, data):
        for key, value in data.items():
            setattr(self, key, value)

5、接口完成新增逻辑

python

@app.post('/api/student')
def api_student_post():
    data = request.get_json()
    data['create_at'] = datetime.strptime(data['create_at'], '%Y-%m-%d %H:%M:%S')
    student = StudentORM()
    student.update(data)
    try:
        student.save()
    except Exception as e:
        return {
            'code': -1,
            'msg': '新增数据失败'
        }
    return {
        'code': 0,
        'msg': '新增数据成功'
    }

修改学员信息

修改学员信息，因为表格中会加载完整的学员信息，所以在修改的时候可以在新的 iframe 页面请求数据加载，或者是利用原本已经加载的数据进行修改。

iframe 版本

这个版本与添加的逻辑差不多，只是需要多一次请求。因为大部分逻辑与新增差不多，在这里我就不写了，如果自己实现看下方的时序图即可。

单页版

单页面是利用原来表格中已有的数据，将其设置到之前已经定义好的表单中，然后将表单显示出来，修改完之后再将表单设置为空，然后影藏。

1、新增表格单元格事件

html

<!-- 表头某列 templet 属性指向的模板 -->
<script type="text/html" id="tools">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

挂载表格栏事件

{title: '操作', width: 120, templet: '#tools'}

2、添加编辑、删除事件

// 单元格工具事件
table.on("tool(student)", function (obj) {
  var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
  if (layEvent === "edit") {
    //编辑
    window.show_edit(obj);
  } else if (layEvent === "del") {
    //删除
    layer.confirm("确定删除吗？", function (index) {
      layer.close(index);
      window.del_student(obj);
    });
  }
});

window.show_edit = (obj) => {
  layer.msg("显示编辑表单");
};

window.del_student = (obj) => {
  layer.msg("删除学生数据");
};

3、新增修改表单

html

<form
  class="layui-form"
  action=""
  id="form_edit"
  lay-filter="form_edit"
  style="margin-top: 20px;display: none"
>
  <div class="layui-form-item" style="display: none">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="id"
        lay-verify="required"
        autocomplete="off"
        placeholder="请输入"
        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="name"
        lay-verify="required"
        autocomplete="off"
        placeholder="请输入"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <select name="gender" lay-verify="required">
        <option value=""></option>
        <option value="M">男</option>
        <option value="F">女</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">班级</label>
    <div class="layui-input-block">
      <select name="class_name" lay-verify="required">
        <option value=""></option>
        <option value="一班">一班</option>
        <option value="二班">二班</option>
        <option value="三班">三班</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="mobile"
        lay-verify="required|phone"
        autocomplete="off"
        placeholder="请输入"
        class="layui-input"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
      <textarea
        name="address"
        class="layui-textarea"
        placeholder="请输入地址"
      ></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-inline">
        <input
          type="text"
          class="layui-input"
          name="create_at"
          id="create-at"
          placeholder=""
          autocomplete="off"
          lay-verify="required"
        />
      </div>
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">禁用</label>
    <div class="layui-input-block">
      <input
        type="checkbox"
        name="disable"
        lay-skin="switch"
        lay-filter="switchTest"
        title="是|否"
      />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button
        type="submit"
        class="layui-btn"
        lay-submit
        lay-filter="edit-commit"
      >
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

4、加载数据并显示表单

// 日期时间选择器
laydate.render({
  elem: "#create-at",
  type: "datetime",
});

window.show_edit = (obj) => {
  console.log(obj.data);

  form.val("form_edit", obj.data);

  layer.open({
    type: 1,
    area: ["900px", "600px"],
    content: $("#form_edit"), // 捕获的元素
  });
};

5、校验数据并完成提交

// 新增提交的方法
const change_student = async (id, data) => {
  const options = {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  };
  const response = await fetch(`/api/student/${id}`, options);
  return await response.json();
};

// 提交事件
form.on("submit(edit-commit)", function (data) {
  var field = data.field; // 获取表单字段值
  // console.log(field)
  // 此处可执行 Ajax 等操作
  field.disable = field?.disable ? true : false;

  change_student(field.id, field).then(function (ret) {
    // 提交成功之后的回调
    if (!ret.code) {
      layer.msg(
        ret.msg,
        {
          icon: 1,
          time: 1000,
        },
        function () {
          layer.closeAll("page");
          table.reload("student");
        },
      );
    } else {
      layer.msg(ret.msg, {
        icon: 2,
        time: 1000,
      });
    }
  });

  return false; // 阻止默认 form 跳转
});

6、后端完成修改

python

class StudentORM(db.Model):
    ...

    def update(self, data):
        for key, value in data.items():
            setattr(self, key, value)


@app.put('/api/student/<int:sid>')
def api_student_put(sid):
    data = request.get_json()
    data['create_at'] = datetime.strptime(data['create_at'], '%Y-%m-%d %H:%M:%S')
    # student = StudentORM.query.get(sid)
    student = db.get_or_404(StudentORM, sid)
    student.update(data)
    try:
        student.save()
    except Exception as e:
        return {
            'code': -1,
            'msg': '修改数据失败'
        }
    return {
        'code': 0,
        'msg': '修改数据成功'
    }

7、表单恢复初始状态

这个可以做可以不做，因为下次显示的时候会再次覆盖

删除学员信息

删除数据时有两种方式，一种是物理删除，另一种是逻辑删除。物理删除就是从数据库中彻底删除，而逻辑删除则是在数据库中保留，但是不再显示给用户。就像被 404 的微信公众号文章，虽然在公众号上无法找到也无法查看，但是在腾讯的服务器中还保留着，说不定未来某一天还能再次看到。

1、前端请求删除

// 新增提交的方法
const del_student_api = async (id) => {
  const options = {
    method: "DELETE",
    headers: { "Content-Type": "application/json" },
  };
  const response = await fetch(`/api/student/${id}`, options);
  return await response.json();
};

window.del_student = (obj) => {
  // console.log(obj)
  del_student_api(obj.data.id).then(function (ret) {
    // 提交成功之后的回调
    if (!ret.code) {
      layer.msg(
        ret.msg,
        {
          icon: 1,
          time: 1000,
        },
        function () {
          table.reload("student");
        },
      );
    } else {
      layer.msg(ret.msg, {
        icon: 2,
        time: 1000,
      });
    }
  });
};

2、后端实现逻辑删除

python

@app.delete('/api/student/<int:sid>')
def api_student_del(sid):
    student: StudentORM = db.get_or_404(StudentORM, sid)
    try:
        # db.session.delete(student)
        student.is_del = True
        db.session.commit()
    except Exception as e:
        return {
            'code': -1,
            'msg': '删除数据失败'
        }
    return {
        'code': 0,
        'msg': '删除数据成功'
    }

3、查询学员的时候过滤以删除

在获取学员列表的方法里面过滤已经删除的数据，不再返回给前端。

修改学员单个信息

默认修改信息需要打开一个新的编辑页面进行操作，如果能够在表格上像 excel 一样修改，则会变得非常方便。而 layui 就提供了这么一套机制，可以直接在表格上进行修改。

修改班级

1、渲染班级列

html

<!-- 推荐 -->
<script type="text/html" id="TPL-dropdpwn-demo">
  <button class="layui-btn layui-btn-sm layui-btn-primary dropdpwn-demo">
    <span>{{ "{{= d.class_name }}"|safe }}</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</script>

{field: 'class_name', title: '班级', width: 120, templet: '#TPL-dropdpwn-demo'},

2、渲染下拉组件

// 已知数据渲染
var inst = table.render({
  elem: "#student",
  // 表格渲染完之后再在里面渲染下拉框
  done: function (res, curr, count) {
    var options = this;
    // 获取当前行数据
    table.getRowData = function (elem) {
      var index = $(elem).closest("tr").data("index");
      return table.cache[options.id][index] || {};
    };
    // dropdown 方式的下拉选择
    dropdown.render({
      elem: ".dropdpwn-demo",
      // trigger: 'hover',
      // 此处的 data 值，可根据 done 返回的 res 遍历来赋值
      data: [
        {
          title: "一班",
          id: 100,
        },
        {
          title: "二班",
          id: 101,
        },
        {
          title: "三班",
          id: 102,
        },
      ],
      click: function (obj) {
        var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

        this.elem.find("span").html(obj.title);
        // 更新数据中对应的字段
        data.class_name = obj.title;
        // 显示 - 仅用于演示
        layer.msg(
          "选中值: " + obj.title + "<br>当前行数据：" + JSON.stringify(data),
        );
      },
    });
  },
});

3、添加修改请求

const change_student_class_name = async (id, data) => {
  const options = {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  };
  const response = await fetch(`/api/student/${id}/class_name`, options);
  return await response.json();
};

change_student_class_name(data.id, { class_name: data.class_name }).then(
  function (ret) {
    if (!ret.code) {
      layer.msg(ret.msg, {
        icon: 1,
        time: 1000,
      });
    } else {
      layer.msg(
        ret.msg,
        {
          icon: 2,
          time: 1000,
        },
        function () {
          table.reload("student");
        },
      );
    }
  },
);

4、后端完成修改

python

@app.put('/api/student/<int:sid>/class_name')
def api_student_class_name(sid):
    student: StudentORM = db.get_or_404(StudentORM, sid)
    data = request.get_json()
    try:
        student.class_name = data['class_name']
        student.save()
    except Exception as e:
        return {
            'code': -1,
            'msg': '修改班级失败'
        }
    return {
        'code': 0,
        'msg': '修改班级成功'
    }

修改地址

1、地址列设置为可以编辑

{field: 'address', title: '地址', minWidth: 160, edit: 'textarea'}

2、前端编辑事件

内容下载 table 的 done 方法里面

// 单元格普通编辑事件
table.on("edit(student)", function (obj) {
  var value = obj.value; // 得到修改后的值
  var data = obj.data; // 得到所在行所有键值
  var field = obj.field; // 得到字段

  var send_data = {};
  send_data[field] = value;

  const change_student_class_name = async (id, data) => {
    const options = {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    };
    const response = await fetch(`/api/student/${id}/address`, options);
    return await response.json();
  };

  change_student_class_name(data.id, send_data).then(function (ret) {
    if (!ret.code) {
      layer.msg(ret.msg, {
        icon: 1,
        time: 1000,
      });
    } else {
      layer.msg(
        ret.msg,
        {
          icon: 2,
          time: 1000,
        },
        function () {
          table.reload("student");
        },
      );
    }
  });
});

3、后端完成修改

python

@app.put('/api/student/<int:sid>/address')
def api_student_address(sid):
    student: StudentORM = db.get_or_404(StudentORM, sid)
    data = request.get_json()
    try:
        student.address = data['address']
        student.save()
    except Exception as e:
        return {
            'code': -1,
            'msg': '修改地址失败'
        }
    return {
        'code': 0,
        'msg': '修改地址成功'
    }

修改禁用状态

1、完成禁用列的渲染

function render_disable(d) {
  return `<input type="checkbox" name="disable" value="${
    d.id
  }" title="是|否" lay-skin="switch" ${
    d.disable ? "checked" : ""
  } lay-filter="switch-disable"/>`;
}

{field: 'disable', title: '禁用', width: 100, templet: render_disable},

2、前端事件处理

form.on("switch(switch-disable)", function (obj) {
  var value = this.value;
  var name = this.name;

  const send_data = {};
  send_data[name] = !!obj.elem.checked;

  const change_student_disable = async (id, data) => {
    const options = {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    };
    const response = await fetch(`/api/student/${id}/disable`, options);
    return await response.json();
  };

  change_student_disable(value, send_data).then(function (ret) {
    if (!ret.code) {
      layer.msg(ret.msg, {
        icon: 1,
        time: 1000,
      });
    } else {
      layer.msg(
        ret.msg,
        {
          icon: 2,
          time: 1000,
        },
        function () {
          table.reload("student");
        },
      );
    }
  });
});

3、后端完成修改

python

@app.put('/api/student/<int:sid>/disable')
def api_student_disable(sid):
    student: StudentORM = db.get_or_404(StudentORM, sid)
    data = request.get_json()
    try:
        student.disable = data['disable']
        student.save()
    except Exception as e:
        return {
            'code': -1,
            'msg': '修改禁用失败'
        }
    return {
        'code': 0,
        'msg': '修改禁用成功'
    }

表单查询

1、新建查询表单

html

<div class="layui-container">
  <form
    class="layui-form layui-row layui-col-space16"
    style="margin: 20px 10px 20px"
  >
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input
          type="text"
          name="name"
          value=""
          placeholder="请输入姓名"
          class="layui-input"
          lay-affix="clear"
        />
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input
          type="text"
          name="mobile"
          placeholder="请输入电话"
          lay-affix="clear"
          class="layui-input"
        />
      </div>
    </div>
    <div class="layui-btn-container layui-col-xs12">
      <button
        class="layui-btn layui-btn-sm"
        lay-submit
        lay-filter="table-search"
      >
        查询
      </button>
      <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
        重置
      </button>
    </div>
  </form>
</div>

2、追加表单搜索事件

// 搜索提交
form.on("submit(table-search)", function (data) {
  var field = data.field; // 获得表单字段
  // 执行搜索重载
  table.reload("student", {
    page: {
      curr: 1, // 重新从第 1 页开始
    },
    where: field, // 搜索的字段
  });
  return false; // 阻止默认 form 跳转
});

3、改造后端逻辑，实现查询

python

@app.route('/api/student')
def student_view():
    page = request.args.get('page', type=int, default=1)
    per_page = request.args.get('per_page', type=int, default=10)

    # paginate = StudentORM.query.paginate(page=page, per_page=per_page, error_out=False)
    q = db.select(StudentORM)
    name = request.args.get('name')
    if name:
        q = q.where(StudentORM.name == name)
    paginate = db.paginate(q, page=page, per_page=per_page, error_out=False)
    items: [StudentORM] = paginate.items
    return {
        'code': 0,
        'msg': '信息查询成功',
        'count': paginate.total,
        'data': [
            {
                'id': item.id,
                'name': item.name,
                'gender': item.gender,
                'mobile': item.mobile,
                'class_name': item.class_name,
                'address': item.address,
                'disable': item.disable,
                'is_del': item.is_del,
                'create_at': item.create_at.strftime('%Y-%m-%d %H:%M:%S'),
                'update_at': item.update_at.strftime('%Y-%m-%d %H:%M:%S'),
            } for item in items
        ]
    }

flask + layui 实现学员信息案例 ​

项目搭建 ​

创建项目 ​

配置插件 ​

数据库建模 ​

学员信息渲染 ​

后端部分 ​

前端部分 ​

新增学员信息 ​

请求新增页面 ​

新增逻辑 ​

修改学员信息 ​

iframe 版本 ​

单页版 ​

删除学员信息 ​

修改学员单个信息 ​

修改班级 ​

修改地址 ​

修改禁用状态 ​

表单查询 ​

flask + layui 实现学员信息案例

项目搭建

创建项目

配置插件

数据库建模

学员信息渲染

后端部分

前端部分

新增学员信息

请求新增页面

新增逻辑

修改学员信息

iframe 版本

单页版

删除学员信息

修改学员单个信息

修改班级

修改地址

修改禁用状态

表单查询