LayUI框架的使用步骤实现登录页面

news2025/7/13 15:32:38

目录

一、LayUI的简介

二、下载安装

三、引入并且测试

四、自定义模块

四、利用LayUI实现一个登录页面


一、LayUI的简介

1.1 什么是LayUI?

Layui(谐音:类 UI) 是一套开源的 Web UI 解决方案;

由国人开发(作者贤心),16年出厂的框架;

其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,

非常适合网页界面的快速开发

极大减少了后端人员的开发成本

1.2 LayUI的适用范围? 

① 更偏向与后端开发人员使用,在服务端页面上有非常好的效果;

② 适合做后台框架;

③ layui更符合现在的审美。


二、下载安装

2.1 LayUI官网

由于LayUI在2021年的10月份下线了,所以现在的参考网站则是后面有大佬保存下来的,

保留了原来的文档提供学习参考!

官方网站:https://www.layui.com/(已下线)
参考地址:http://layui.org.cn/demo/index.html(已下线,非官网)

2.2 下载文件

我们进入参考地址,看到这个首页:

我们直接下载,得到一个这种的压缩包:

我们把它解压,得到一个layui的文件夹

 

然后就直接把它导入我们自己的工程就好啦!

 


三、引入并且测试

3.1 引入css与js

我们在文档中可以学习到如何引入使用,Leaf这里直接也放上引入重点:

注意:这里的hrefsrc都是根据我们放入自己的工程目录位置来写的,不要忘记修改噢!

<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>

3.2 测试使用

当我们引入好css和js文件后就可以开始尝试测试使用一下啦,

我们就来测试一下弹出输入内容的这个功能吧~

这里直接放上代码:

    <h3>请输入:</h3>
	<input type="text" value="Leaf" id="layui_test1_input">
	<button id="layui_test1_btn" style="cursor: pointer;">点我</button>
	<script>
	    //导入js相关的模块jquery.js
		layui.use(['layer', 'form', 'jquery'], function(){
          //将模块赋值给变量$
		  var layer = layui.layer
		  ,form = layui.form
		  ,$ = layui.jquery;
		  $("#layui_test1_btn").click(function(){
			 var val = $("#layui_test1_input").val();
			 layer.msg(val);
		  });
		  layer.msg('Hello World');
		});
	</script>

运行结果:

通过实践我们得出一个结论

 LayUI每使用一个模块功能就需要导入加载一个模块,然后为其定义一个变量并赋值。


四、自定义模块

通过上面对LayUI的测试使用后,我们得到了一些结论,同时也得到了一个疑问 

4.1 如何自定义功能模块

对的,当作者写好的模块不足以支撑我们的需求时,如何去自定义一个模块呢?

在官方文档上学习了一下,下面来一起看看吧~

4.2 建立模块js文件

我们直接在导入的layui那个文件夹下建立一个mymodules(就是我的模块),

然后再建一个子文件夹:js

就在这个js文件夹里建立我们自定义的模块js文件mymod.js

layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('mod1', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    },say: function(str){
      alert('say '+ (str||'mymod'));
    }
  };
  
  //输出 mymod 接口
  exports('mymod', obj);
}); 

4.3 建立配置文件

紧接着我们再建立一个配置文件:mymod_config.js

注意:这里的base目录一定要看清楚!是你存放自定义模块的根目录,结尾不是放文件!!!

//config的设置是全局的
layui.config({
  base: 'static/js/layui/mymodules/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
});

 4.4 引入自定义的模块

我们在建立好自己的模块后,就可以开始引入测试啦!

注意要引入的是mymod.js以及配置文件mymod_config.js噢~

<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>

<!-- 引入自定义的模块mymod.js-->
<script src="${pageContext.request.contextPath }/static/js/layui/mymodules/js/mymod.js"></script>
<script src="${pageContext.request.contextPath }/static/js/layui/mymodules/mymodule_config.js"></script>

4.5 测试使用

    <input type="text" value="Leaf" id="layui_test2_input">
	<button id="layui_test2_btn" style="cursor: pointer;">自定义模块</button>
	<script>
	    //导入js相关的模块mymod.js
	    //将模块赋值给变量mymod
		layui.use(['layer', 'form', 'jquery', 'mymod'], function(){
		  var layer = layui.layer
		  ,form = layui.form
		  ,mymod = layui.mymod
		  ,$ = layui.jquery;
		  //给自定义模块按钮添加点击事件
		  $("#layui_test2_btn").click(function(){
			 var val2 = $("#layui_test2_input").val();
			 mymod.say(val2);
			 mymod.hello(val2);
		  });
		  layer.msg('Hello World');
		});
	</script>

运行结果:

 

 


四、利用LayUI实现一个登录页面

 4.1 编写Action

利用我们之前编写的MVC,我们编写一个action:UserAction

不了解的可以参考Leaf之前的几篇文章:自定义MVC(上)__Leaf1217的博客-CSDN博客

这里直接放上代码:

package com.leaf.web;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.leaf.entity.User;
import com.leaf.mvc.ActionSupport;
import com.leaf.mvc.ModelDriven;
import com.leaf.util.R;
import com.leaf.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriven<User> {

	private User user = new User();
	
	//写一个方法处理前台的请求
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String,Object>();
		if("Leaf".equals(user.getUsername()) && "999999".equals(user.getPassword())) {
			//登录成功
 			map.put("code", 200);
 			map.put("msg", "成功!");
 		}else {
 			//登录失败
 			map.put("code", 0);
 			map.put("msg", "账户或者密码错误!");
 		}
 		try {
 			ResponseUtil.writeJson(resp, map);
 		} catch (Exception e) {
 			e.printStackTrace();
		}
		return null;
	}
	
	@Override
	public User getModel() {
		return user;
	}
	
}

4.2 编写前台

前台这里就不过多阐述了,就注意一下如何使用的那一段javascript代码就好啦~

这里直接放上代码,就是没有放图片,你们运行可能没有好看的效果;

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入layui -->
<%@ include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>

<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all">

<style>
	body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}
</style>

</head>
	<body class="tx-login-bg">
	
        <div class="tx-login-box">
            <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
				<ul class="tx-form-li row">
					<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
					<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
					<li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li>
					<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
					<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
				</ul>
        </div>
        
        <script type="text/javascript">
        
        	layui.use(['jquery','layer'],function(){
        		let $ = layui.jquery
        				,layer = layui.layer;
        		$('#login').click(function() {
					$.ajax({
						url:"${pageContext.request.contextPath }/user.action?methodName=login"
						,dataType:'json'
						,data:{
							username:$("#username").val(),
							password:$("#password").val()
						}
						,success:function(data){
							//console.log(data);
							if(data.code == 200){
								layer.alert('登录成功!', {icon: 1});
								location.href='index.jsp';
							}
							else{
								layer.alert('登录失败!', {icon: 2});
							}
						}
					});
				});
        	});
        
        </script>
            
	</body>
</html>

4.3 运行测试

输入错误信息:

yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

输入正确信息:

 

 


 OK,今天Leaf带来的学习分享就到这里啦,有问题的可以私信或者评论问我噢,喜欢的可以关注一起学习进步啊,下次见!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406571.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python人脸识别

#头文件&#xff1a;import cv2 as cvimport numpy as npimport osfrom PIL import Imageimport xlsxwriterimport psutilimport time#人脸录入def get_image_name(name):name_map {f.split(.)[1]:int(f.split(.)[0]) for f in os.listdir("./picture")}if not name…

宇宙最强-GPT-4 横空出世:最先进、更安全、更有用

文章目录前言一、准确性提升1.创造力2.视觉输入3.更长的上下文二、相比于ChatGPT有哪些提升1.GPT-4 的高级推理能力超越了 ChatGPT2.GPT-4 在多种测试考试中均优于 ChatGPT。三、研究团队在GPT-4模型都做了哪些改善1.遵循 GPT、GPT-2 和 GPT-3 的研究路径2.我们花了 6 个月的时…

2022年Web前端开发流程和学习路线(详尽版)

前言 前端侧重于人机交互和用户体验&#xff0c;后端侧重于业务逻辑和大规模数据处理。理论上&#xff0c;面向用户的产品里&#xff0c;所有问题&#xff08;包括产品、设计、后端、甚至看不见的问题&#xff09;的表现形式&#xff0c;都会暴露在前端&#xff0c;而只有部分…

JS防抖和节流

前言 在进行窗口的操作或者输入框操作时&#xff0c;如果事件处理函数用的频率无限制&#xff0c;会加重浏览器和服务器的负担&#xff0c;此时我们就可以用防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;的方式来减少调用频率&#xff0c;同时…

简析强制缓存和协商缓存

零、目录 背景介绍 http 缓存机制 使用小结 一、 背景介绍 浏览器和服务器进行交互的过程&#xff0c; 时间开销的瓶颈往往出现在数据的传输的过程之中。 这个场景类似介于 A城 到 B城 之间只有一座 “通道” &#xff0c; 每次想从A城 到 B城 &#xff0c;必须按照人数交付高…

Maven使用教程(IDEA版)

目录 一、Maven简介 1.1 在项目中如何导入jar包&#xff1f; 1.2 传统导入jar包的方式存在什么问题&#xff1f; 1.3 项目生命周期 1.4 Maven简介 二、Maven安装及配置 2.1 Maven下载 2.2 Maven安装 2.3 配置环境变量 三、Maven的项目结构 3.1 Maven的项目结构 3.2…

【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

文章目录一、CSS 优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div…

VueX使用

vuex基本概念 vuex官方文档 vuex是vue的状态管理工具&#xff0c;状态即数据。 状态管理就是集中管理vue中 通用的 一些数据 注意&#xff08;官方原文&#xff09;&#xff1a; 不是所有的场景都适用于vuex&#xff0c;只有在必要的时候才使用vuex 使用了vuex之后&#xf…

手机解锁方法:8个顶级的 Android 手机解锁软件

一般来说&#xff0c;太简单的密码是不安全的&#xff0c;所以我们设置一个安全的密码&#xff0c;可能会稍微复杂一点。然而&#xff0c;我们可能经常会忘记复杂的密码并锁定我们的 Android 智能手机。 8个顶级的 Android 手机解锁软件 如果您遇到过这种情况并且正在寻找一种…

【vue2】vue全家桶介绍,学习vue必备

​ &#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue全家桶介绍&#xff0c;学习vue必备&#xff01;&#xff01;&#xff01; 【前言…

Vue开发实例(11)之el-menu实现左侧菜单导航

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…

【Vue从入门到进阶】Node.js安装与配置

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端&#xff0c;欢迎大家一起来交流学习&#x1f3c6; &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f525;系列专栏&#xff1a;Vue从入门到进阶 &#x1f4ac;个人格言&#xff1a;但行好事&…

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般&#xff0c;上周才刚刚推出GPT-3.5-Turbo API&#xff0c;今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比&#xff0c;GPT-4最大的飞跃是增加了识图能力&#xff0c;并且回答准确性也得到显著提高。…

使用SpringBoot一小时快速搭建一个简单后台管理(后端篇)

不好意思让大家久等啦&#xff0c;最近也是因为学期末了&#xff0c;事情多了一点&#xff0c;所以更新的比较慢&#xff0c;请大家谅解下~ 好了话不多说&#xff0c;进入今天的教程环节 本次案例一共两篇文章教学&#xff1a; &#xff08;第一篇&#xff09;&#xff1a;数据…

聊聊vue3的defineProps、defineEmits、defineExpose

最近在开发中用到了vue3的defineProps、defineEmits和defineExpose&#xff0c;感觉发现新大陆一般&#xff0c;所以利用闲碎时间对这三个方法做个总结。 defineProps const props defineProps<{foo: String,bar?: Number }>()defineProps 是vue3的写法并且是一个仅 …

Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器

本文首发&#xff1a;《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》 Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一&#xff0c;也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染&#xff0c;在引入 Video.js 后&#xff0…

idea连接SQL Server数据库

数据库配置 1.安装数据库&#xff1a;自行安装 我的SQL Server版本为2019 2.登录数据库&#xff0c;登陆方式有两种&#xff0c;连接数据库选择SQLServer身份验证 1.windows登录&#xff0c;直接登录 2.SQLServer登录&#xff0c;需要输入用户名和密码&#xff0c;默…

【Vant Weapp】van-cell 单元格

目录 自定义内容​​​​​​​ 自定义右侧value&#xff08;姓名手机号&#xff09; 自定义右侧value&#xff08;文件预览&#xff09; 自定义下方label描述信息 真机border相当明显 修改样式&#xff08;下边框、文字&#xff09; 循环列表中的cell 自定义内容 自定义…

前端必学 - 大文件上传如何实现

前端必学 - 大文件上传如何实现写在前面问题分析开始操作一、文件如何切片二、得到原文件的hash值三、文件上传四、文件合并技术点总结【重要】一、上传文件&#xff1f;二、显示进度三、暂停上传四、Hash有优化空间吗&#xff1f;五、限制请求个数六、拥塞控制&#xff0c;动态…

Vue+element ui实现好看的个人中心

目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图 仿照原神社区的个人中心写了个个人中心界面&#xff0c;下图分别为原神社区个人中心主页和我画的…