Cara menggunakan rangka kerja Layui untuk pembangunan sistem pengurusan bahagian belakang

Layui ialah rangka kerja UI bahagian hadapan yang ringan, sesuai untuk membina sistem pengurusan bahagian belakang dengan cepat. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Layui untuk pembangunan sistem pengurusan bahagian belakang dan menyediakan contoh kod khusus.

1. Persediaan persekitaran
Pertama, pastikan anda telah memasang versi terkini perpustakaan layui. Anda boleh memuat turun dan mengimport fail yang sepadan dari laman web rasmi Layui. Dalam projek anda, anda perlu memperkenalkan dua fail layui.all.js dan layui.all.css.

2. Struktur halaman
Apabila menggunakan rangka kerja Layui untuk membangunkan sistem pengurusan bahagian belakang, ia biasanya terdiri daripada berbilang halaman. Kita boleh menggunakan modul susun atur yang disediakan oleh Layui untuk melaksanakan struktur keseluruhan halaman.

<!-- 头部内容 -->

<!-- 侧边栏内容 -->

<!-- 主体内容区域 -->

Penjelasan kod:

• layui-layout ialah bekas paling luar dari keseluruhan halaman.
• layui-header ialah kawasan pengepala halaman, digunakan untuk memaparkan logo sistem, menu, maklumat log masuk, dsb.
• layui-side ialah kawasan sidebar yang digunakan untuk memaparkan menu sistem.
• layui-body ialah kawasan kandungan utama, digunakan untuk memaparkan kandungan khusus halaman.

3. Gunakan modul
Layui menyediakan banyak modul, seperti borang, jadual, tetingkap timbul, dll., yang boleh melaksanakan pelbagai fungsi dengan mudah. Di bawah, kami akan memperkenalkan beberapa modul yang biasa digunakan dan cara menggunakannya.

3.1 Modul borang
Modul borang ialah modul penting untuk membangunkan sistem pengurusan bahagian belakang Layui menyediakan satu siri elemen borang dan peraturan pengesahan yang boleh membina halaman borang dengan mudah.

layui.use('form', function(){
var form = layui.form;

// Borang penyerahan acara
form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field));
return false;

} );

// Pengesahan borang
form.verify({

username: function(value, item){ // value：表单的值、item：表单的DOM对象
  if(!/^[w]{6,12}$/.test(value)){
    return '用户名必须由6到12位的字母、数字、下划线组成';
  }
},
password: [
  /^[S]{6,12}$/,
  '密码必须由6到12位的非空白字符组成'
]

});
});

Penjelasan kod:

• Muat modul borang melalui kaedah layui.use.
• Dalam form.on('submit', function(data){}), kita boleh mengendalikan acara penyerahan borang. data.field boleh mendapatkan semua data dalam borang.
• Kaedah form.verify digunakan untuk menyesuaikan peraturan pengesahan borang.

3.2 Modul jadual
Modul jadual boleh digunakan untuk memaparkan data dan menyediakan fungsi carian, halaman, pengisihan dan lain-lain.

layui.use('table', function(){
var table = layui.table;

// Render table
table.render({

elem: '#tableDemo', // 指定表格容器
url: '/api/data', // 请求数据的接口
page: true, // 开启分页
cols: [[ // 表头
  {field: 'id', title: 'ID', sort: true},
  {field: 'username', title: '用户名'},
  {field: 'email', title: '邮箱'}
]]

});
});

Penjelasan kod:

• Muat modul jadual melalui kaedah layui.use.
• Render jadual melalui kaedah table.render, dengan elem menentukan pemilih bekas jadual, url menentukan antara muka untuk meminta data, halaman membolehkan paging dan kol mentakrifkan pengepala jadual.

4 Ringkasan
Menggunakan rangka kerja Layui untuk pembangunan sistem pengurusan bahagian belakang boleh membina antara muka dengan pengalaman pengguna yang baik. Artikel ini memperkenalkan struktur halaman asas dan modul biasa menggunakan Layui, dan menyediakan contoh kod yang sepadan. Melalui pembelajaran dan amalan, saya percaya anda akan dapat menggunakan rangka kerja Layui dengan mahir untuk membangunkan sistem pengurusan bahagian belakang yang berkualiti tinggi.