🍃 Layui 前端框架教程

本教程由沈阳农业大学大学生网络信息中心运行部提供，适用于校园网站开发

第一章：快速入门

1.1 安装与配置

<!-- 基础引入 -->
<link rel="stylesheet" href="//unpkg.com/layui@2.8.0/dist/css/layui.css">
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>

<!-- 模块化使用 -->
<script>
layui.use(['layer', 'form'], function(){
  const layer = layui.layer
  const form = layui.form
  
  layer.msg('欢迎使用Layui')
})
</script>

版本说明

推荐使用 2.x 版本（当前最新 2.8.0）
兼容 IE8+，适合校园老旧系统维护

1.2 基础布局

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md8">主内容区</div>
    <div class="layui-col-md4">侧边栏</div>
  </div>
</div>

第二章：核心组件

2.1 表格组件

layui.use('table', function(){
  const table = layui.table
  
  table.render({
    elem: '#course-table',
    url: '/api/courses',
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '课程名称'},
      {field: 'teacher', title: '授课教师'},
      {fixed: 'right', title: '操作', toolbar: '#toolbar'}
    ]],
    page: true
  })
})

对应HTML结构：

<table id="course-table" lay-filter="course-table"></table>
<script type="text/html" id="toolbar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

2.2 表单组件

layui.use('form', function(){
  const form = layui.form
  
  // 表单提交
  form.on('submit(login)', function(data){
    console.log(data.field) // 表单数据
    return false // 阻止默认提交
  })
  
  // 表单渲染
  form.render()
})

表单HTML示例：

<form class="layui-form" lay-filter="login-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required class="layui-input">
    </div>
  </div>
  <button lay-submit lay-filter="login">登录</button>
</form>

第三章：校园管理系统案例

3.1 学生信息管理

<!-- 搜索区 -->
<div class="layui-card">
  <div class="layui-card-header">学生信息查询</div>
  <div class="layui-card-body">
    <form class="layui-form">
      <div class="layui-inline">
        <input class="layui-input" name="stuNo" placeholder="学号">
      </div>
      <button class="layui-btn" lay-submit lay-filter="search">查询</button>
    </form>
    
    <!-- 表格区 -->
    <table id="stuTable" lay-filter="stuTable"></table>
  </div>
</div>

3.2 消息通知模块

// 发送通知
function sendNotice(title, content) {
  layui.use('layer', function(){
    layer.open({
      type: 1,
      title: title,
      content: content,
      area: ['500px', '300px'],
      btn: ['确认', '取消']
    })
  })
}

第四章：常见问题

4.1 表单动态渲染

// 动态添加表单项后需要重新渲染
$('#add-btn').click(function(){
  $('#form-container').append('<input type="text" class="layui-input">')
  layui.form.render() // 关键步骤
})

4.2 主题定制

在 layui.config() 中修改：

layui.config({
  dir: '/res/layui/', // 自定义路径
  theme: '#FF5722'   // 主色调
}).extend({
  campus: 'campus'   // 自定义模块
})

第五章：扩展资源

5.1 校园常用组件

// 课表组件
layui.define(['jquery'], function(exports){
  const $ = layui.$
  
  const timetable = {
    render: function(elem, data){
      // 实现课表渲染逻辑
    }
  }
  
  exports('timetable', timetable)
})

5.2 推荐插件

插件名称	用途	地址
layui-soul	表格增强	GitHub: layui-soul
layui-extends	常用扩展组件	Gitee: layui-extends