Cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat-tutorial js-php.cn

Cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat

WBOY

Lepaskan： 2023-10-26 12:33:13

asal

768 orang telah melayarinya

Cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat

Layui ialah rangka kerja UI bahagian hadapan yang ringan dengan komponen yang kaya dan sintaks yang ringkas, yang sangat sesuai untuk pembangunan pengurusan bahagian belakang sistem . Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat dan menyediakan contoh kod khusus.

Pertama, kita perlu memperkenalkan rangka kerja Layui ke dalam projek. Layui boleh diperkenalkan dengan memuat turun terus fail sumber atau menggunakan CDN. Seterusnya, kami mencipta fail HTML sebagai halaman utama sistem pengurusan bahagian belakang.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.css">
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">后台管理系统</div>
    </div>
    <div class="layui-side">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item"><a href="">菜单1</a></li>
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="">菜单2</a>
            <dl class="layui-nav-child">
              <dd><a href="">子菜单1</a></dd>
              <dd><a href="">子菜单2</a></dd>
              <dd><a href="">子菜单3</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">菜单3</a></li>
        </ul>
      </div>
    </div>
    <div class="layui-body">内容区域</div>
  </div>
  <script src="https://cdn.staticfile.org/layui/2.5.4/layui.js"></script>
  <script>
    layui.use('element', function() {
      var element = layui.element;
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mencipta struktur asas sistem pentadbir bahagian belakang dengan bar navigasi atas dan bar sisi. Bahagian menu menggunakan komponen Nav Layui dan komponen Tree. Seperti yang anda lihat, terdapat tiga submenu di bawah menu 2.

Dalam pembangunan sebenar, kita perlu menjana data menu secara dinamik berdasarkan keperluan sebenar sistem pengurusan bahagian belakang. Anda boleh mendapatkan data menu dari latar belakang melalui permintaan Ajax, dan kemudian memberikan data menu ke halaman.

Berikut ialah contoh data menu:

var menuData = [
  {name: '菜单1', link: ''},
  {name: '菜单2', link: '', children: [
    {name: '子菜单1', link: ''},
    {name: '子菜单2', link: ''},
    {name: '子菜单3', link: ''}
  ]},
  {name: '菜单3', link: ''}
];

Salin selepas log masuk

Seterusnya, kami menggunakan komponen Nav Layui dan komponen Tree untuk menjana menu secara dinamik.

Pertama, kita perlu mengubah suai bahagian menu dalam fail HTML seperti berikut:

<div class="layui-side">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menuNav">
    </ul>
  </div>
</div>

Salin selepas log masuk

Kemudian, tambah kandungan berikut dalam kod JavaScript:

layui.use(['element', 'nav'], function() {
  var element = layui.element;
  var nav = layui.nav;

  var menuHtml = '';
  for (var i = 0; i < menuData.length; i++) {
    menuHtml += '<li class="layui-nav-item">';
    menuHtml += '<a href="' + menuData[i].link + '">' + menuData[i].name + '</a>';
    if (menuData[i].children) {
      menuHtml += '<dl class="layui-nav-child">';
      for (var j = 0; j < menuData[i].children.length; j++) {
        menuHtml += '<dd><a href="' + menuData[i].children[j].link + '">' + menuData[i].children[j].name + '</a></dd>';
      }
      menuHtml += '</dl>';
    }
    menuHtml += '</li>';
  }

  document.getElementById('menuNav').innerHTML = menuHtml;

  element.init();
  nav.init();
});

Salin selepas log masuk

Fungsi kod ini adalah untuk menjana data menu secara dinamik ke halaman dan gunakan elemen Layui dan komponen nav dimulakan.

Melalui langkah di atas, kami berjaya menyelesaikan pembangunan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat. Dalam pembangunan sebenar, pengembangan dan pengoptimuman yang sesuai boleh dijalankan mengikut keperluan khusus.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat dan menyediakan contoh kod khusus. Dengan menggunakan komponen Nav dan komponen Tree Layui, kami boleh menjana menu secara dinamik dan memaparkan menu berbilang peringkat dengan mudah. Melalui contoh ini, saya percaya pembaca mempunyai pemahaman tertentu tentang menggunakan Layui untuk membangunkan sistem pengurusan bahagian belakang. Saya berharap pembaca dapat memainkan sepenuhnya kelebihan rangka kerja Layui dalam pembangunan sebenar dan membangunkan sistem pengurusan bahagian belakang yang lebih cekap dan mudah.

Atas ialah kandungan terperinci Cara menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang yang menyokong menu berbilang peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!