Utilisez node.js+jQuery pour implémenter l'enregistrement de la connexion utilisateur (interaction AJAX)

Cet article présente principalement les connaissances pertinentes sur l'utilisation de Node.js comme backend et de jQuery pour écrire le code AJAX frontal afin d'implémenter les fonctions de connexion et d'enregistrement des utilisateurs. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

Récemment, Node.js a été implémenté comme backend, et jQuery écrit le code AJAX frontal pour réaliser les fonctions de connexion et d'enregistrement des utilisateurs, actualisant les trois vues du front- interaction finale et back-end. Prenez-en note spécialement.

1.login.ejs implémente le framework de formulaire

  <form >
      <ul>
        <li><p>用户名</p></li>
        <li><input type="text" name="username" id="username"></li>
      </ul>
      <ul>
        <li><p>密码</p></li>
        <li><input type="password" name="password" id="password"></li>
      </ul>
      <ul class="mt50">
        <li><input id="login_submit" class="submit" type="button" value="登 陆"></li>
      </ul>
    </form>

le formulaire n'ajoute pas de méthode, dans le but de utiliser ajax seul Envoyer une demande.

2.js implémente l'envoi de requêtes

$("#login_submit").click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  //这里实现对 username和password格式的判断
  //........
  //发送ajax请求 使用post方式发送json字符串给后台login
  $.ajax({
    type: "post",
    url: "http://localhost:3000/login",
    dataType: "json",
    data:{ username: username, password: password },
    success: function(data){
    //接受返回的数据，前端判断采取的动作
      if(data){
        if(data.message=="false"){
          alert('密码错误，请重新输入');
          window.location.href="login";
        }else{
          alert('登陆成功');
          window.location.href="index";
        }
      } else{
      }
    }
  });
});

Réception en arrière-plan

/**
 * 注册页 post 
 */
router.post('/reg', function (req, res, next) {
  //先查询有没有这个user
  console.log("req.body"+req.body);
  user2.findDocuments(DATABASE, "users", 1, {"uName":req.body.username}, function (user) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    if(user.length==0){
      //用户名没有重复 同意创建用户
      user2.insertDocuments(DATABASE, "users",
        [{
          "uName":req.body.username,
          "uPasswd":req.body.password,
          "uEmail":req.body.email,
          "uHasshop":0,
          "uShopname":"null",
          "aId":'-1'

        }],
        function (result){
          res.send({status:"success", message:"true"});
        }
      );
    }
    else{
      // 用户名重复。找到这个user 不同意创建用户
      res.send({status:"success", message:"false"});
    }
  });
});

La page d'inscription est similaire à la page de connexion. Pas plus de détails.

En bref, j'ai toujours eu l'impression que la page à laquelle j'accédais via mon navigateur était une chose frontale. Le backend est un tas de code désincarné. Je comprends maintenant que toutes les URL visitées appartiennent au backend. Le contenu envoyé par le backend sera affiché par le navigateur. L'affichage front-end n'est que temporaire et les ressources back-end sont permanentes.

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!