Rumah > Artikel > hujung hadapan web > Cara menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna

Cara menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna

WBOYasal: 2023-10-27 08:01:021300semak imbas

Dengan perkembangan pesat Internet, aplikasi rangkaian sosial telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian orang ramai. Apabila membangunkan aplikasi sedemikian, rangka kerja bahagian hadapan yang berkuasa amat diperlukan. Layui ialah rangka kerja UI bahagian hadapan yang sangat baik Ia menyediakan komponen yang kaya dan API yang ringkas dan jelas untuk membantu kami membina aplikasi web yang hebat dan cantik dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna, serta menyediakan contoh kod khusus.

Persediaan
Pertama, kita perlu menyediakan sumber berkaitan Layui. Anda boleh memuat turun versi terkini pakej termampat Layui dari laman web rasmi Layui (www.layui.com). Selepas membuka zip, masukkannya ke dalam projek kami. Anda boleh meletakkan fail layui.css dalam folder gaya projek dan fail layui.js dalam folder skrip projek.
Susun atur asas
Aplikasi rangkaian sosial biasanya termasuk bar navigasi pengepala, bar sisi, kawasan kandungan dan bahagian lain. Kita boleh menggunakan komponen susun atur Layui untuk membina komponen asas ini.

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 头部导航栏 -->
    <div class="layui-header">
      <!-- logo -->
      <div class="layui-logo">社交网络</div>
      
      <!-- 用户登录信息 -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;"><img  src="avatar.jpg" class="layui-nav-img" alt="Cara menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna" >用户名</a>
          <dl class="layui-nav-child">
            <dd><a href="">个人中心</a></dd>
            <dd><a href="">退出登录</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    
    <!-- 侧边栏 -->
    <div class="layui-side">
      <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
          <a href=""><i class="layui-icon layui-icon-home"></i>首页</a>
        </li>
        <li class="layui-nav-item">
          <a href=""><i class="layui-icon layui-icon-user"></i>用户管理</a>
        </li>
        <li class="layui-nav-item">
          <a href=""><i class="layui-icon layui-icon-friends"></i>好友管理</a>
        </li>
      </ul>
    </div>
    
    <!-- 内容区域 -->
    <div class="layui-body">
      <!-- 内容 -->
    </div>
  </div>
</body>

Log masuk dan pendaftaran pengguna
Aplikasi rangkaian sosial mesti menyokong fungsi log masuk dan pendaftaran pengguna. Kita boleh menggunakan komponen bentuk Layui dan pemalam pop timbul Layer untuk mencapai fungsi ini.

<!-- 登录表单 -->
<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">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">登录</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 注册表单 -->
<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">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="register">注册</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- JavaScript代码 -->
<script>
  //监听登录表单提交
  form.on('submit(login)', function(data){
    //请求服务器进行登录验证
    //...
    return false; //阻止表单跳转
  });
  
  //监听注册表单提交
  form.on('submit(register)', function(data){
    //请求服务器进行注册处理
    //...
    layer.msg('注册成功');
    return false; //阻止表单跳转
  });
</script>

Interaksi data
Dalam aplikasi rangkaian sosial, interaksi data mesti dijalankan dengan pelayan bahagian belakang. Kami boleh menggunakan modul Ajax Layui untuk menghantar permintaan HTTP dan berinteraksi dengan pelayan bahagian belakang.

//模拟用户登录
function login(username, password) {
  //发送登录请求
  $.ajax({
    url: '/login', //后端登录接口
    type: 'post',
    data: {
      username: username,
      password: password
    },
    success: function(res){
      if(res.code === 200){
        //登录成功
        layer.msg('登录成功');
        //跳转到用户主页
        window.location.href = '/user_home'; 
      } else {
        //登录失败
        layer.msg('登录失败');
      }
    },
    error: function(){
      //请求失败
      layer.msg('请求失败');
    }
  })
}

//模拟用户注册
function register(username, password) {
  //发送注册请求
  $.ajax({
    url: '/register', //后端注册接口
    type: 'post',
    data: {
      username: username,
      password: password
    },
    success: function(res){
      if(res.code === 200){
        //注册成功
        layer.msg('注册成功');
        //跳转到登录页面
        window.location.href = 'login.html'; 
      } else {
        //注册失败
        layer.msg('注册失败');
      }
    },
    error: function(){
      //请求失败
      layer.msg('请求失败');
    }
  })
}

Di atas adalah langkah asas dan contoh kod untuk menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna. Melalui langkah di atas, kami boleh membina rangka kerja hadapan aplikasi rangkaian sosial yang mudah dan melaksanakan fungsi log masuk dan pendaftaran pengguna. Sudah tentu, dalam pembangunan sebenar, ia juga perlu untuk menggabungkan teknologi back-end untuk interaksi dan pemprosesan data, dan untuk meningkatkan pelbagai fungsi, tetapi artikel ini terutamanya memperkenalkan bahagian pembangunan front-end. Saya harap artikel ini dapat membantu anda, dan saya berharap anda mendapat hasil yang baik dalam pembangunan aplikasi rangkaian sosial!

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan aplikasi rangkaian sosial yang menyokong log masuk dan pendaftaran pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css ajax layui 前端框架 JS http ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan fungsi pemilihan berbilang bentuk dalam JavaScript?Artikel seterusnya：Bagaimana untuk melaksanakan fungsi pemilihan berbilang bentuk dalam JavaScript?

Artikel berkaitan

Lihat lagi