LayUi做登录注册

最新推荐文章于 2024-06-04 17:34:22 发布
最新推荐文章于 2024-06-04 17:34:22 发布
阅读量1.8w 收藏 91
点赞数 18
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44389353/article/details/105103960
版权

LayUi登录注册页面附代码

登录页面

下面展示登录页面 代码如下。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--<link rel="icon" href="/resources/favicon.ico">-->
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

</head>
<body class="loginBody">
<form class="layui-form">
    <div class="login_face">
        <img src="../../images/Wjlogo.png" height="60px" class="userAvatar">
    </div>
    <div>
        <div class="loginbox-title">登录</div>
        <div class="loginbox-social">
            <div class="social-title">系统</div>
    </div>
    <div class="layui-form-item input-item">
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名" autocomplete="off" name="username" class="layui-input"
               lay-verify="required">
    </div>
    <div class="layui-form-item input-item">
        <label>密码</label>
        <input type="password" placeholder="请输入密码" autocomplete="off" name="password" class="layui-input"
               lay-verify="required">
    </div>
    <div class="layui-form-item input-item" id="imgCode">
        <input type="text" placeholder="请输入验证码" name="code" autocomplete="off" id="code" class="layui-input">
        <img style="margin-right: 20px" width="100px" id="verify_code_img" height="32"
             src="/verifyCode/getImg" onclick="javascript:changeImg()"><br>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
    </div>
    <div class="layui-form-item">
        <a href="/register/toRegister">还未账户？点击注册</a>
        <a style="text-decoration:underline	;padding-left: 10px;color: #2badce" href="/">回首页</a>
        <!--<input id="butt" type="button" value="注册" /><br><br><br>-->
    </div>
</form>
</body>

<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/cache.js"></script>
<script type="text/javascript" src="../../js/login.js"></script>

</html>

页面效果如图：
LayUi登录页面效果图

注册页面

下面展示注册页面 代码如下。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/public.css">
</head>

<body style="background-image: url('/images/bg2.jpg')">

<div id="gb">
    <form class="layui-form" action="">
        <input type="hidden" id="us" th:value="${session.user}">
        <input type="hidden" id="imgs" th:if="${session.user!=null}" th:value="${session.user.avatarUrl}">
        <input type="hidden" name="id" th:if="${session.user!=null}" th:value="${session.user.id}">
        <div class="registerbox-title">用户注册中心</div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
                       th:value="${session.user!=null?session.user.username:''}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off"
                       th:value="${session.user!=null?session.user.password:''}" class="layui-input" id="pass1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="passwords" required lay-verify="pwd" placeholder="请再次输入密码"
                       th:value="${session.user!=null?session.user.password:''}" autocomplete="off" class="layui-input" id="pass2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" th:if="${session.user!=null}">
                <input type="radio" class="layui-disabled" disabled="disabled" name="sex" value="0" checked="${session.user.sex==0?'checked':''}" title="男">
                <input type="radio" class="layui-disabled" disabled="disabled" name="sex" value="1" checked="${session.user.sex==1?'checked':''}" title="女">
            </div>
            <div class="layui-input-block" th:if="${session.user==null}">
                <input type="radio" name="sex" value="0" title="男" checked>
                <input type="radio" name="sex" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="name" placeholder="请输入您的姓名"
                       th:value="${session.user!=null?session.user.name:''}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-upload">
                <button type="button" class="layui-btn"
最低0.47元/天 解锁文章
成长中的小大哥
关注
  • 18
    点赞
  • 踩
  • 91
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
LayUI框架的使用步骤&&实现登录页面
qq_63492318的博客
07-08 1万+
LayUI的使用、自定义模块、实现登录页面...
layui入门
m0_68879220的博客
04-22 1558
1.什么是layui layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交...
Layui：一款强大的前端UI框架
最新发布
m0_46413639的博客
06-04 448
在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。
前端框架Layui的使用讲解（Layui搭建登录注册页面）
阅读之后，对你有帮助，那就点个赞再走吧
07-19 1023
Layui是一款基于jQuery的前端UI框架，具有轻量、简单、易用等特点。Layui提供了丰富的组件和接口，包括表单、表格、弹窗、导航、日期等常用组件，以及丰富的API接口。Layui的设计理念是“模块化设计”，即将一个完整的页面拆分成多个模块，每个模块都有独立的功能和样式，便于开发和维护。本文介绍了Layui框架的基本使用方法，并通过搭建一个登录注册页面的实例来展示Layui的强大功能。希望读者能够通过本文对Layui有更深入的了解，并在实际开发中灵活运用。
layui实现登录页面
lv970814的博客
09-29 5万+
首先给看下效果图吧！ html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></sc...
登录界面模板
m0_54088351的博客
08-09 267
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"&...
基于layui实现的云层动态特效的HTML登陆页面
11-18
本资源属于前端静态资源，基于layui实现的云层特效登录界面
html+css+php+mysql实现注册+登录+修改密码（附完整代码）
m0_67402125的博客
07-31 1万+
目的在利用QT软件进行登录软件开发时，就想要实现点击按钮跳转到指定网页进行注册以及修改密码等操作，就像QQ客户端那样可以实现网页端修改密码，申请账户等操作；（因需要开启花生壳内网穿透，如需体验可私聊！）目前已经实现的操作html界面；html跳转php；php连接数据库；php实现对数据库的增删改查。...
基于SpringBoot+Layui的登录注册模板.zip
05-16
基于SpringBoot+Layui的登录注册模板，这是一个基于基于SpringBoot+Layui+Shiro的登录注册模板，登录通过邮箱账号登录，注册通过邮箱验证码注册，并用Shiro作为安全框架对密码加密...基于SpringBoot+Layui的登录注册模
Layui登录界面
04-15
在这个“Layui登录界面”项目中，我们主要探讨以下几个关键知识点： 1. **Layui登录界面**：Layui提供了现成的登录模板，可以通过简单的配置快速搭建美观的登录界面。这个界面通常包含用户名、密码输入框、登录按钮...
layui-用户登录界面响应式动画模板
06-08
在本项目中，“layui-用户登录界面响应式动画模板”是利用layui的组件和样式，构建了一个适应不同设备分辨率的登录界面，尤其注重用户体验和视觉效果。 1. layui框架介绍： layui是一个遵循MIT协议的前端开源项目...
layui下的登录页首页
04-28
使用layui框架，登录页，菜单页和首页，自动生成菜单（三级），首页自动生成echart图（饼状图，柱状图和折线出），自动弹出公告框
高端大气网站登录注册页面html模板源码
12-04
高端大气网站登录注册页面html模板源码
PHP实现简单注册登录 详细全部代码
热门推荐
二十春夏
12-13 5万+
先看演示~ 示例图： Ps.本人有点懒哈~ 就输出个成功算了吧~ PHP实现登录注册 index.php (首页) login.php (登录) register.php (注册) 代码里面注释写很详细了哦~ 废话不多说 直接上代码~ index.php 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=
[HTML+CSS+JS] 实现注册登录页面，全网最全
2301_76379381的博客
04-05 1611
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。易碰到天花板技术停滞不前！**
LayUI写登录注册页面遇到的问题
weixin_43327510的博客
01-15 1085
使用LayUI框架写登录和注册界面时，遇到的一些小问题： <label class="layui-form-label">输入框</label> 默认有margin-left：110px; 我想写“用户名：+输入框”的时候显示就会右对齐。 没有什么好的解决方法。 只能手动调css，最后懒得调了。 和layuiAdmin的布局一样在输入框放了个图标上去。 一开始不知道这么把登录框写到居中的地方， 直接网上找教程，参考了这个教程 layui-简单的登录注册界面 发现这个也没完全页
使用Layui 框架，做的界面效果 及经验教训总结（mvc5+EF+layui）
weixin_45256588的博客
08-03 2316
转载自：https://www.cnblogs.com/for-easy-fast/p/12790507.html； 1. 登录界面 login.css body, html { height: 100%; } .layui-admin-login-header { padding: 20px; text-align: center; } .layui-admin-login-header h1 { color: #009688; .
Layui实现登录
wqww_1的博客
05-26 1038
前端 导入所有前端依赖 <link rel="icon" href="${ctx}/images/favicon.ico"> <link rel="stylesheet" href="${ctx}/lib/layui-v2.5.5/css/layui.css" media="all"> <link rel="stylesheet" href="${ctx}/css/layuimini.css" media="all"> <link rel="stylesheet"
layui实现登录
weixin_30673611的博客
03-29 2602
一、layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发. 获得layui 你可以在LayUI官网首页下载到 layui 的最新版，它经过了自动化...
layui实现登录注册
04-04
Layui是一款非常流行的前端框架，可以用来快速构建Web页面。下面是使用Layui实现登录注册的步骤： 1. 引入Layui的CSS和JS文件 在HTML文件中引入Layui的CSS和JS文件，可以通过CDN方式引入，也可以下载到本地引入。 2. 编写HTML代码 使用Layui的HTML结构，编写登录注册页面的HTML代码。可以使用Layui的form组件来实现表单的样式和验证。 3. 编写JavaScript代码 使用Layui的JavaScript代码来实现登录注册的功能。可以使用Layui的Ajax组件来发送请求和接收响应。 4. 后端接口 需要在后端编写接口，用来处理登录注册的请求。可以使用任何后端技术来实现，比如Java、PHP、Python等。 5. 联调测试 完成前端和后端的代码编写后，需要进行联调测试，确保登录注册功能能够正常使用。 总结： 使用Layui实现登录注册功能，需要编写HTML、JavaScript和后端接口代码，需要前后端开发人员一起合作完成。Layui提供了很多组件和API，可以加快开发速度，同时也需要注意安全性和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值