layUI编写好看的菜谱管理页面

好的，下面是一个使用layUI编写的比较好看的菜谱管理页面的示例，主要是通过美化样式和使用laytpl模板引擎实现的。

1. 首先，引入layUI的相关文件，包括CSS和JS文件。

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2. 创建一个HTML页面，包含一个table标签用于展示菜谱列表，以及一个按钮用于添加新的菜谱。

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md12">
      <button class="layui-btn layui-btn-normal layui-btn-sm" id="addBtn">添加菜谱</button>
    </div>
    <div class="layui-col-md12">
      <table class="layui-table" id="menuList" lay-filter="menuList"></table>
    </div>
  </div>
</div>

<!-- 操作模板 -->
<script type="text/html" id="operateTpl">
  <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
</script>

3. 使用ajax从后台获取菜谱列表数据并展示在页面上。

layui.use(['table', 'form', 'layer', 'laytpl'], function() {
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var laytpl = layui.laytpl;

  // 渲染菜谱列表
  table.render({
    elem: '#menuList',
    url: '/menu/list',
    cols: [[
      {field: 'name', title: '菜谱名称'},
      {field: 'description', title: '菜谱描述'},
      {fixed: 'right', title: '操作', toolbar: '#operateTpl', width: 150}
    ]],
    page: true
  });

  // 监听添加按钮
  $('#addBtn').click(function() {
    // 弹出添加菜谱的窗口
    layer.open({
      type: 2,
      title: '添加菜谱',
      area: ['500px', '400px'],
      content: '/menu/add',
      end: function() {
        // 重新渲染菜谱列表
        table.reload('menuList');
      }
    });
  });

  // 监听操作按钮
  table.on('tool(menuList)', function(obj) {
    var data = obj.data;
    if (obj.event === 'edit') {
      // 弹出编辑菜谱的窗口
      layer.open({
        type: 2,
        title: '编辑菜谱',
        area: ['500px', '400px'],
        content: '/menu/edit?id=' + data.id,
        end: function() {
          // 重新渲染菜谱列表
          table.reload('menuList');
        }
      });
    } else if (obj.event === 'delete') {
      // 删除菜谱
      layer.confirm('确定要删除该菜谱吗？', function(index) {
        $.post('/menu/delete', {id: data.id}, function(res) {
          if (res.code === 0) {
            layer.msg('删除成功！', {icon: 1});
            // 重新渲染菜谱列表
            table.reload('menuList');
          } else {
            layer.msg('删除失败：' + res.msg, {icon: 2});
          }
        });
        layer.close(index);
      });
    }
  });

  // 自定义样式
  $('.layui-table th, .layui-table td').css({'text-align': 'center', 'padding': '10px 0'});
  $('.layui-table td').css({'height': '50px'});

  // 自定义模板
  laytpl.operateTpl = $('#operateTpl').html();

});

4. 在CSS文件中添加自定义样式，美化页面的外观。

.layui-container {
  margin-top: 30px;
}

.layui-table th {
  background-color: #009688;
  color: #fff;
}

.layui-table td {
  border-bottom: 1px solid #ddd;
}

.layui-table .layui-btn {
  margin-right: 5px;
}

5. 在laytpl模板引擎中使用自定义模板，美化操作按钮的样式。

<script type="text/html" id="operateTpl">
  <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> 删除</a>
</script>

这就是一个使用layUI编写的比较好看的菜谱管理页面的示例。通过自定义样式和使用laytpl模板引擎，可以让页面的外观更加美观，操作按钮的样式也更加丰富。