layUI编写美观的带数据的菜谱管理页面

可以使用 LayUI 提供的表格组件来实现带数据的菜谱管理页面，同时结合其他组件来美化页面。

具体步骤如下：

1. 引入 LayUI 的相关文件，在 HTML 文件中添加链接：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

2. 使用表格组件来展示菜谱数据，可以使用 LayUI 的表格组件进行实现，示例代码如下：

<table class="layui-table">
  <thead>
    <tr>
      <th>菜品名称</th>
      <th>价格</th>
      <th>描述</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>宫保鸡丁</td>
      <td>28元</td>
      <td>鸡肉、花生米、辣椒等炒制而成的传统川菜</td>
      <td>
        <button class="layui-btn layui-btn-sm">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
      </td>
    </tr>
    <tr>
      <td>鱼香肉丝</td>
      <td>32元</td>
      <td>猪肉、木耳、胡萝卜等炒制而成的传统川菜</td>
      <td>
        <button class="layui-btn layui-btn-sm">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
      </td>
    </tr>
    <tr>
      <td>红烧排骨</td>
      <td>38元</td>
      <td>猪排骨、葱姜蒜等烧制而成的传统菜肴</td>
      <td>
        <button class="layui-btn layui-btn-sm">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
      </td>
    </tr>
  </tbody>
</table>

3. 使用 LayUI 的表单组件来添加或编辑菜谱数据，可以使用 LayUI 的表单组件进行实现，示例代码如下：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">菜品名称</label>
    <div class="layui-input-block">
      <input type="text" name="title" 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="price" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">菜品描述</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入菜品描述" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

4. 使用 LayUI 的弹窗组件来展示表单，示例代码如下：

<button class="layui-btn" id="add-btn">添加菜品</button>

<script>
  layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;

    // 点击添加菜品按钮，弹出表单窗口
    $('#add-btn').on('click', function() {
      layer.open({
        type: 1,
        title: '添加菜品',
        area: ['500px', 'auto'],
        content: $('#form-dialog').html()
      });
    });

    // 监听表单提交事件
    form.on('submit(formDemo)', function(data){
      // 提交表单数据到后台
      console.log(data.field);
      layer.closeAll();
      return false;
    });
  });
</script>

<!-- 表单弹窗模板 -->
<div id="form-dialog" style="display: none;">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">菜品名称</label>
      <div class="layui-input-block">
        <input type="text" name="title" 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="price" placeholder="请输入价格" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">菜品描述</label>
      <div class="layui-input-block">
        <textarea name="desc" placeholder="请输入菜品描述" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>

通过以上步骤，可以实现一个带数据的菜谱管理页面，并且可以使用 LayUI 提供的组件来美化页面。