Layui 实操练习题

搭配 Thymeleaf + SpringBoot，页面放在templates目录，layui静态资源放在static。
难度逐层递进，覆盖上面全部核心语法。

题目1【基础：引入layui、按钮、layer消息提示】

需求：

1. 创建html页面，引入layui css和js
2. 页面放一个普通按钮，文字：点击提示
3. 点击按钮，触发layer.msg，弹出文字：欢迎学习Layui
   

   知识点：layui引入、class按钮、layer.msg、layui.use模块化

题目2【栅格布局】

需求：

1. 使用layui栅格，一行分成两列
2. 左边占4份，右边占8份
3. 两列分别写文字：左侧内容、右侧内容
   

   知识点：layui-row、layui-col-md

题目3【表单基础 + 表单提交监听】

需求：

1. 编写layui表单，包含一个用户名输入框
2. 添加提交按钮，设置 lay-submit lay-filter=”myform”
3. JS监听表单提交，提交时layer.msg弹出你输入的用户名；阻止页面刷新
   

   知识点：layui-form、form.on表单监听、data.field

题目4【laydate日期选择器】

需求：

1. 页面放置输入框
2. 使用laydate渲染日期选择器，点击输入框弹出日期面板
   

   知识点：laydate模块

题目5【静态表格】

需求：

1. 使用layui静态table，创建表格
2. 表头：编号、姓名、年龄
3. 添加两行数据
   

   知识点：layui-table静态表格

题目6【卡片面板】

需求：

1. 使用layui-card卡片组件
2. 卡片标题：用户信息卡片
3. 卡片内容：展示一段文字：这是layui卡片组件示例
   

   知识点：layui-card

题目7【layer确认弹窗】

需求：

1. 页面放置一个删除按钮（样式使用layui-btn-danger）
2. 点击按钮，弹出layer.confirm确认框，提示：确定删除这条数据吗？
3. 点击确认，弹出msg提示：删除成功
   

   知识点：layer.confirm

题目8【分页组件 laypage】

需求：

1. 页面放置分页容器
2. 渲染分页，总数据120条，每页显示10条
   

   知识点：laypage分页

题目9【JS动态渲染table表格】

需求：

1. 在页面放一个table容器，id=goodsTable
2. 使用table.render渲染动态表格
3. 列：商品id、商品名称、价格
4. 填充两条模拟数据
   

   知识点：table动态渲染、cols、data

题目10【综合大题：表单+卡片+弹窗】

需求：

1. 使用layui-card包裹整个表单
2. 卡片标题：新增用户
3. 表单包含：姓名输入框、年龄输入框
4. 提交按钮，监听表单提交
5. 提交成功弹出layer.confirm，确认后弹出msg提示新增成功
   

   知识点：card、form表单、layer.confirm、form监听