Cara menggunakan Layui untuk membangunkan sistem log masuk yang menyokong kod pengesahan yang dijana secara rawak

Cara menggunakan Layui untuk membangunkan sistem log masuk yang menyokong kod pengesahan yang dijana secara rawak

Layui ialah rangka kerja UI bahagian hadapan yang sangat popular yang menyediakan komponen dan gaya yang kaya boleh membantu pembangun membina antara muka yang cantik dan mudah digunakan dengan lebih cepat dan mudah. Artikel ini akan memperkenalkan cara menggunakan Layui untuk membangunkan sistem log masuk yang menyokong kod pengesahan yang dijana secara rawak untuk meningkatkan keselamatan sistem. Di bawah ialah contoh kod khusus.

1. Persediaan

1. Muat turun versi terkini Layui dan memperkenalkan fail CSS dan JS ke dalam HTML.
2. Buat fail HTML bernama login.html untuk menulis kod HTML halaman log masuk.
3. Buat fail JavaScript bernama login.js dalam direktori yang sama untuk menulis kod logik halaman log masuk.

2. Laksanakan halaman log masuk

1. Dalam login.html, gunakan komponen borang yang disediakan oleh Layui untuk membina log masuk borang. Termasuk nama pengguna, kata laluan dan kod pengesahan:

   <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="username" required  lay-verify="required" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <img src="" alt="captcha" id="captchaImg">
    </div>
    <div class="layui-input-inline">
      <a href="#" id="refreshCaptcha">刷新验证码</a>
    </div>
     </div>
     <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
    </div>
     </div>
   </form>

2. Dalam login.js, gunakan modul borang yang disediakan oleh Layui untuk memulakan borang dan menambah logik penyegaran kod pengesahan: # 🎜🎜#

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
   });

   3 Tambah fungsi kod pengesahan

Sediakan antara muka untuk menjana kod pengesahan pada bahagian pelayan, seperti captcha.php, yang mengembalikan yang dijana secara rawak gambar Kod pengesahan.
4. Tambahkan alamat dinamik dalam teg img bagi imej kod pengesahan dalam login.html untuk memaparkan imej kod pengesahan yang dijana.

   <img src="" alt="captcha" id="captchaImg">

5. Dalam login.js, tambahkan fungsi mendapatkan dan menetapkan imej kod pengesahan:

   layui.use(['form'], function(){
     var form = layui.form;
     
     // 初始化表单
     form.render();
     
     // 验证码刷新
     var captchaImg = document.getElementById('captchaImg');
     var refreshCaptcha = document.getElementById('refreshCaptcha');
     refreshCaptcha.onclick = function() {
    captchaImg.src = '/captcha.php?' + Math.random();
     };
     
     // 获取验证码图片
     captchaImg.src = '/captcha.php';
   });

   Melalui langkah di atas, kami telah mencapai sistem log masuk A ini yang menyokong kod pengesahan yang dijana secara rawak. Pengguna boleh memasukkan nama pengguna, kata laluan dan kod pengesahan mereka pada halaman log masuk, dan klik butang Log Masuk Sekarang untuk pengesahan. Apabila butang Muat Semula Kod Pengesahan di sebelah kotak input kod pengesahan diklik, imej kod pengesahan baharu akan dijana semula dan dipaparkan.

Perlu diambil perhatian bahawa kod di atas hanyalah contoh asas, dan lebih banyak pengendalian ralat dan pengesahan keselamatan perlu dilakukan dalam pembangunan sebenar. Pada masa yang sama, proses pelaksanaan khusus perlu dilaraskan dengan sewajarnya mengikut kaedah panggilan antara muka belakang.

Melalui kerjasama rangka kerja Layui dan bahagian pelayan, kami boleh menjana dan menggunakan kod pengesahan dengan mudah untuk meningkatkan keselamatan sistem. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan sistem log masuk yang menyokong kod pengesahan yang dijana secara rawak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!