Comment utiliser Layui pour développer un système de connexion prenant en charge les codes de vérification générés aléatoirement

Comment utiliser Layui pour développer un système de connexion prenant en charge les codes de vérification générés aléatoirement

Layui est un framework d'interface utilisateur frontale très populaire. Il fournit un riche ensemble de composants et de styles qui peuvent aider les développeurs à créer des designs magnifiques et faciles à utiliser. utiliser l'interface. Cet article explique comment utiliser Layui pour développer un système de connexion prenant en charge les codes de vérification générés aléatoirement afin d'augmenter la sécurité du système. Vous trouverez ci-dessous des exemples de code spécifiques.

1. Préparation

1. Téléchargez la dernière version de Layui et introduisez les fichiers CSS et JS dans HTML.
2. Créez un fichier HTML nommé login.html pour écrire le code HTML de la page de connexion.
3. Créez un fichier JavaScript nommé login.js dans le même répertoire pour écrire le code logique de la page de connexion.

2. Implémentez la page de connexion

1. Dans login.html, utilisez le composant de formulaire fourni par Layui pour créer un formulaire de connexion, comprenant le nom d'utilisateur, le mot de passe et le code de vérification :

   <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. Dans login.js, utilisez Le module de formulaire fourni par Layui initialise le formulaire et ajoute une logique d'actualisation du code de vérification :

   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. Ajouter une fonction de code de vérification

3. Préparez une interface pour générer des codes de vérification côté serveur, comme captcha.php, qui renvoie un résultat aléatoire Image du code de vérification générée.

4. Ajoutez une adresse dynamique dans la balise img de l'image du code de vérification dans login.html pour afficher l'image du code de vérification générée.

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

5. Dans login.js, ajoutez la fonction d'obtention et de définition d'images de code de vérification :

   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';
   });

   Grâce aux étapes ci-dessus, nous avons implémenté un système de connexion qui prend en charge les codes de vérification générés aléatoirement. Les utilisateurs peuvent saisir leur nom d'utilisateur, leur mot de passe et leur code de vérification sur la page de connexion, puis cliquer sur le bouton Se connecter maintenant pour vérification. Lorsque vous cliquez sur le bouton Actualiser le code de vérification à côté de la zone de saisie du code de vérification, une nouvelle image du code de vérification sera régénérée et affichée.

Il convient de noter que le code ci-dessus n'est qu'un exemple de base et que davantage de gestion des erreurs et de vérification de sécurité doivent être effectuées dans le développement réel. Dans le même temps, le processus de mise en œuvre spécifique doit être ajusté de manière appropriée en fonction de la méthode d'appel de l'interface back-end.

Grâce à la coopération du framework Layui et du côté serveur, nous pouvons facilement générer et utiliser des codes de vérification pour améliorer la sécurité du système. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!