前端LayUI框架快速上手实现登入注册

news2024/11/14 21:21:02

目录

一、Layui简介

1. 什么是LayUI

2. LayUI的特点

二、LayUI入门

1. LayUI下载

2. LayUI入门使用

1. 在web项目中导入LayUI文件中的layui文件

2. 在JSP页面引入css、js文件

3. 制作一个简单的猜字游戏

4.效果展示

 三、Layui实现简单登入功能

环境搭建

一、Layui简介

 

1. 什么是LayUI

        Layui 是一款轻量级的前端UI框架，它基于jQuery库开发，由国人开发，16年出厂的框架。其主要提供了很多好看、方便的样式，并且基本拿来即用。和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。旨在简化页面开发过程，提供易于使用且美观的界面组件和交互效果。

        Layui还提供了丰富的UI组件，如表格、表单、弹窗、导航等，以及封装了常用的操作和功能，如Ajax请求、表单验证、日期选择等。
 

2. LayUI的特点

  1. 简洁易用：Layui的设计理念是"低耦合、高内聚"，代码量较小且结构清晰，使用起来简单方便。
  2. 高效美观：Layui提供了一套精美的UI主题，默认就可以让页面看起来很漂亮，同时还支持自定义主题。
  3. 响应式布局：Layui支持响应式布局，能够自适应不同尺寸的设备，使得页面在不同的屏幕上都能良好地展示。
  4. 模块化开发：Layui采用了模块化的设计思想，将各个组件和功能进行了分割，可以按需引入，减少了代码冗余。
  5. 良好的扩展性：Layui支持插件扩展，用户可以根据需要自定义组件或功能，以满足项目的特定需求。

        总体来说，Layui框架是一个优秀的前端UI框架，适用于快速构建简单、美观、响应式的网页界面。

 

二、LayUI入门

 

1. LayUI下载

 官方网站：https://www.layui.com/（已下线）
 参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

1. 点击下载后解压即可 ：

 

2. 点击layui可查看中文离线文档

 这里就不一一演示其控件的使用和实例，在离线文档中有所有的功能的实例。

 

2. LayUI入门使用

1. 在web项目中导入LayUI文件中的layui文件

 

 

2. 在JSP页面引入css、js文件

 3. 制作一个简单的猜字游戏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayUI入门小游戏</title>
<!-- 引入 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>
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">
  <div class="layui-card">
    <div class="layui-card-header" style="margin-left: 200px;">猜数字游戏</div>
    <div class="layui-card-body">
      <div class="layui-row">
        <div class="layui-col-md-offset3 layui-col-md8">
          <label>请输入一个1-10的数字:</label>
          <form class="layui-form" lay-filter="guessForm">
            <div class="layui-form-item">
              <div class="layui-input-inline">
                <input type="number" name="guessNumber" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitGuess">提交</button>
            </div>
          </form>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md-offset3 layui-col-md6">
          <div id="resultDiv" class="layui-hide"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  //layui.use加载模块
  layui.use(['form', 'layer','jquery'], function(){
    var form = layui.form,
    layer = layui.layer,
    $ = layui.jquery;

    // 监听提交按钮点击事件
    form.on('submit(submitGuess)', function(data){
      var guessNumber = data.field.guessNumber; // 获取用户输入的数字

      // 生成一个1-10之间的随机数
      var randomNumber = Math.floor(Math.random() * 10) + 1;

      if (guessNumber == randomNumber) {
        layer.msg('恭喜你，猜对了！', {icon: 6});
        $('#resultDiv').removeClass('layui-hide').text('正确答案就是' + guessNumber);
      } else {
        if (guessNumber < randomNumber) {
          layer.msg('提示：猜的数字偏小');
        }else if (guessNumber > randomNumber){
          layer.msg('提示：猜的数字偏大');
        } else {
        	layer.msg('很遗憾，猜错了！', {icon: 5});
        }
      }

      return false; // 阻止表单默认提交
    });
  });
</script>
</body>
</html>

layui.use(['form', 'layer','jquery'], function(){})是Layui框架中的一个常用方法，用于加载并使用特定的模块。

它的作用如下：

  1. 加载模块：通过引入Layui库后，我们可以使用layui.use()方法来加载Layui提供的各个模块。在这个例子中，我们加载了form、layer和jquery 三个模块。

  2. 使用模块：一旦模块被成功加载，就会执行回调函数中的代码。在回调函数中，我们可以访问加载的模块，并使用其提供的功能。例如，在示例中，我们使用了form.on()方法来监听表单的提交事件，以及layer.msg()方法来显示提示信息。

  3. 建立模块依赖关系：如果多个模块之间存在依赖关系，可以在layui.use()方法的第一个参数中列出所有需要加载的模块，并按照顺序指定它们的依赖关系。Layui框架会自动确保所需的模块按正确的顺序进行加载和初始化。

总结起来，layui.use()方法的作用是加载并使用Layui框架中的特定模块，使我们能够轻松地访问和使用这些模块的功能，以实现各种交互效果和功能。

4.效果展示

 三、Layui实现简单登入功能

1. 环境搭建

1. 导入jar包

2. 配置zking.tld文件

--zking.tld
<?xml version="1.0" encoding="UTF-8" ?>

<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
	version="2.0">
	<description>ycxw 1.1 core library</description>
	<display-name>ycxw core</display-name>
	<tlib-version>1.1</tlib-version>
	<short-name>ycxw</short-name>
	<uri>http://jsp.ycxw.cn</uri>


	<tag>
		<name>page</name>
		<tag-class>com.ycxw.tag.PageTag</tag-class>
		<body-content>JSP</body-content>
		<attribute>
			<name>pageBean</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>

</taglib>

 3. 配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>T287_mvc_crud</display-name>
  <servlet>
  	<servlet-name>mvc</servlet-name>
  	<servlet-class>com.zking.framework.DispatchServlet</servlet-class>
  	<init-param>
  		<param-name>configurationLocation</param-name>
  		<param-value>/mvc.xml</param-value>
  	</init-param>
  </servlet>
  <servlet-mapping>
  	<servlet-name>mvc</servlet-name>
  	<url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

4. 配置mvc.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/book" type="com.ycxw.web.BookAction">
		<forward name="List" path="/bookList.jsp" redirect="false" />
		<forward name="toList" path="/book.action?methodName=list"
			redirect="true" />
		<forward name="toEdit" path="/bookEdit.jsp" redirect="false" />
	</action>
	<action path="/user" type="demo.web.UserAction"></action>
</config>

5. 用户实体类

package com.ycxw.entity;

/**
 * 用户类
 * 
 * @author 云村小威
 *
 * @2023年7月10日 下午5:06:35
 */
public class User {
	private long id;
	private String name;
	private String loginName;
	private String pwd;
	private long rid;

	public User() {
		// TODO Auto-generated constructor stub
	}

	public long getId() {
		return id;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public long getRid() {
		return rid;
	}

	public void setRid(long rid) {
		this.rid = rid;
	}

	public User(long id, String name, String loginName, String pwd, long rid) {
		super();
		this.id = id;
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
		this.rid = rid;
	}

	public User(String loginName, String pwd) {
		super();
		this.loginName = loginName;
		this.pwd = pwd;
	}

	@Override
	public String toString() {
		return "Users [id=" + id + ", name=" + name + ", loginName=" + loginName + ", rid=" + rid + "]";
	}

}

6. 用户dao类

package com.ycxw.dao;

import java.util.List;

import com.ycxw.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

/**
 * 
 * @author 云村小威
 *
 * @2023年7月10日 下午9:34:50
 */
public class UserDao extends BaseDao<User> {

	public List<User> list(User u, PageBean pageBean) throws Exception {
		String sql = "select * from t_oa_user where 1=1";
		return super.executeQuery(sql, User.class, pageBean);
	}

	public User login(User u) throws Exception {
		String sql = "select * from t_oa_user where loginName='" + u.getLoginName() + "' and pwd ='" + u.getPwd() + "'";
		List<User> executeQuery = super.executeQuery(sql, User.class, null);
		if (executeQuery != null && executeQuery.size() == 1) {
			return executeQuery.get(0);
		}
		return null;
	}
}

7. 用户Action类

package demo.web;

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

import com.ycxw.dao.UserDao;
import com.ycxw.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;

/**
 * 
 * @author 云村小威
 *
 * @2023年7月10日 下午9:35:59
 */
public class UserAction extends ActionSupport implements ModelDriver<User> {
	User u = new User();
	UserDao dao = new UserDao();

	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User login = dao.login(u);
			// 借用转json工具类
			ResponseUtil.writeJson(resp, login);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return super.execute(req, resp);
	}

	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return u;
	}

}

8. 用户登入JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta name="viewport"
	content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>会员登录-演示网站</title>
<meta http-equiv="Content-Language" content="zh-CN">
<link rel="stylesheet" rev="stylesheet" href="static/css/iconfont.css"
	type="text/css" media="all">
<link rel="stylesheet" rev="stylesheet" href="static/css/login.css"
	type="text/css" media="all">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
<script
	src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
<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="regest.jsp" 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([ 'layer', 'jquery' ], function() {
			var layer = layui.layer, $ = layui.jquery;
		//登录按钮点击事件
		$("#login").click(function(){
			$.ajax({
				url:'${pageContext.request.contextPath}/user.action?methodName=login',
				dataType:'json',
				data:{
					loginName:$("#username").val(),
					pwd:$("#password").val()
				},
				method:'post',
				success:function(data){
					if(data){
						 layer.msg('恭喜你登入成功！', {icon: 6});
					}else{
						layer.msg('抱歉，登入失败', {icon: 5});
					}
				}
			})
		})
		})
	</script>
</body>
</html>

9. 运行效果

正确测试：数据库已存在数据

错误测试：

 

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

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

相关文章

spring boot+MySQL实现班级综合测评管理系统

spring boot+MySQL实现班级综合测评管理系统

随着电子技术的普及和快速发展&#xff0c;线上管理系统被广泛的使用&#xff0c;有很多事业单位和商业机构都在实现电子信息化管理&#xff0c;班级综合测评管理也不例外&#xff0c;由比较传统的人工管理转向了电子化、信息化、系统化的管理。 传统的班级综合测评管理系统&am…
阅读更多...
运维工具的学习(1)--Curl

运维工具的学习(1)--Curl

1.1 curl简介 ​Curl是一个非常实用的、用来与服务器之间传输数据的工具&#xff1b;支持的协议包括 (DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMTP, SMTPS, TELNET and TFTP)&#xff0c;curl设计为无用…
阅读更多...
Kafka入门，offset的默认维护位置（二十一）

Kafka入门，offset的默认维护位置（二十一）

offset的默认维护位置 0.9版本之前&#xff1a;consumer默认将offset保持在zookeeper中 从0.9版本开始&#xff0c;consumer默认将offset保存在kafka一个内置的topic中&#xff0c;该topic为__consumer_offsets __consumer_offsets 主题里面采用key和value方式存储数据&#x…
阅读更多...
【谷粒学院】NUXT框架

【谷粒学院】NUXT框架

一、服务端渲染技术NUXT 1、什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容&#xff0c;而不是在客户端通过AJAX获取数据。 服务器端渲染(SSR)的优势主要在于&#xff1a;更好的 SEO&#xff0c;由于搜索引擎爬虫抓取工具可以直接查看完全…
阅读更多...
【分布式应用】ELK 企业级日志分析系统

【分布式应用】ELK 企业级日志分析系统

目录 一、ELK概述1.1、ELK 简介1.2 为什么要使用 ELK1.3完整日志系统基本特征1.4 ELK 的工作原理 二、ELK Elasticsearch 集群部署2.1环境准备2.2&#xff0e;部署 Elasticsearch 软件2.3安装 Elasticsearch-head 插件&#xff08;1&#xff09;编译安装 node&#xff08;2&…
阅读更多...
任务六：LTE-Advanced 关键技术

任务六：LTE-Advanced 关键技术

LTE-Advanced 关键技术 一、载波聚合&#xff08;Carrier aggregation&#xff0c;CA&#xff09;二、多天线增强&#xff08;Enhanced Multiple Antenna Transmission&#xff09;1、上行多天线增强2、下行多天线增强。 三、协作多点传输&#xff08;Coordinated Multiple Poi…
阅读更多...
buu刷题Reverse总结

buu刷题Reverse总结

[FlareOn1]Bob Doge 是一个C#编写的程序&#xff0c;在dnspy中打开&#xff0c;找到主函数&#xff0c;可以看到大致逻辑 不知道dat_secret的值&#xff0c;动态调试看看 DnSpy动态调试&#xff1a; 在主函数中添加断点&#xff0c;调试&#xff0c;因为本题的fag形式为&…
阅读更多...
spring 自带的校验框架使用

spring 自带的校验框架使用

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>编写规则 开启校验
阅读更多...
springboot+mysql财务管理系统

springboot+mysql财务管理系统

财务管理系统的开发运用java技术、springboot框架&#xff0c;MIS的总体思想&#xff0c;以及Mysql等技术的支持下共同完成了该系统的开发&#xff0c;实现了财务管理的信息化&#xff0c;使员工体验到更优秀的财务管理&#xff0c;管理员管理操作将更加方便&#xff0c;实现目…
阅读更多...
消息队列篇面试题

消息队列篇面试题

一、MQ基础 1.1、为什么使用MQ&#xff1f;MQ的优点 简答 异步处理 - 相比于传统的串行、并行方式&#xff0c;提高了系统吞吐量。 应用解耦 - 系统间通过消息通信&#xff0c;不用关心其他系统的处理。 流量削锋 - 可以通过消息队列长度控制请求量&#xff1b;可以缓解短时间…
阅读更多...
(vue)vue项目实现语音播报

(vue)vue项目实现语音播报

(vue)vue项目实现语音播报 解决参考1&#xff1a; 在 Vue 项目中&#xff0c;你可以使用 Web Speech API 中的 SpeechSynthesis 接口来实现文本内容的自动朗读。下面是一个示例&#xff1a; 1.在 Vue 组件的模板中添加一个按钮&#xff0c;用于触发朗读&#xff1a; <templa…
阅读更多...
Appium+python自动化（二）- 环境搭建—下（超详解）

Appium+python自动化（二）- 环境搭建—下（超详解）

简介 上一篇android测试开发环境已经准备好&#xff0c; 那么接下来就是appium的环境安装和搭建了。 环境装好后&#xff0c;可以用真机连电脑&#xff0c;也可以用android-sdk里面的模拟器&#xff08;当然这个模拟器不是很好用&#xff09;&#xff0c;我一般喜欢真机&#…
阅读更多...
【QT】——布局

【QT】——布局

目录 1.在UI窗口中布局 2.API设置布局 2.1 QLayout 2.2 QHBoxLayout 2.3 QVBoxLayout 2.4 QGirdLayout 注意 示例 Qt 窗口布局是指将多个子窗口按照某种排列方式将其全部展示到对应的父窗口中的一种处理方式。在 Qt 中常用的布局样式有三种&#xff0c;分别是&#xff1…
阅读更多...
CRM 软件如何帮助企业改善营销活动？

CRM 软件如何帮助企业改善营销活动？

一场富有成效的营销活动&#xff0c;是在正确的时间将正确的信息传递到正确的受众面前。为此&#xff0c;你必须充分了解对潜在客户和现有客户的需求&#xff0c;然后创建满足这些需求的营销活动。 CRM 软件和工具可以帮助营销团队收集和分析受众数据&#xff0c;以建立更有效的…
阅读更多...
如何在Windows的优化驱动器工具中优化驱动器

如何在Windows的优化驱动器工具中优化驱动器

​优化硬盘是提高电脑性能的最佳方法之一。Windows 包括一些功能，可以帮助优化电脑目前使用的不同类型的驱动器。无论你的电脑使用哪种类型的驱动器，Windows 都会自动选择适合你的驱动器的优化。 默认情况下，优化驱动器（以前称为磁盘碎片整理程序）会在自动维护中设置的时…
阅读更多...
6.2.3 网络基本服务---文件传输协议（FTP）

6.2.3 网络基本服务---文件传输协议（FTP）

6.2.3 网络基本服务—文件传输协议&#xff08;FTP&#xff09; FTP&#xff08;File Transfer Protocol&#xff09;是Internet上使用最为广泛的文件传送协议&#xff0c;FTP提供交互式的访问&#xff0c;允许客户上传文件到服务器或者从服务器下载文件&#xff0c;FTP屏蔽了…
阅读更多...
Hive（19）：DML之Insert插入数据

Hive（19）：DML之Insert插入数据

1 背景：RDBMS中insert使用（insert+values） 在MySQL这样的RDBMS中，通常是insert+values的方式来向表插入数据，并且速度很快。这也是RDBMS中插入数据的核心方式。 INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( value1, value2,...valueN ); 假如说对Hiv…
阅读更多...
朝花夕拾 - 编程马拉松！Coding 40h，着手 AI 展望未来

朝花夕拾 - 编程马拉松！Coding 40h，着手 AI 展望未来

眼看时间已过半&#xff0c;回忆唏嘘难忘怀。 Hello 大家好&#xff0c;我是爱折腾的前端工程师 jsliang~ 2023 过得很快&#xff0c;眼瞅着加加班已去大半年&#xff0c;一边恨自己没赶上今年大热门&#xff0c;一边蒙头睡觉恢复体力并感叹精神不如初。 在我以为潮流箭步离我而…
阅读更多...
连通域与相距变换

连通域与相距变换

1、连通域 //连通域 int test1() {//对图像进行距离变换Mat img imread("F:/testMap/rice.png");if (img.empty()){cout << "请确认图像文件名称是否正确" << endl;return -1;}Mat rice, riceBW;//将图像转成二值图像&#xff0c;用于统计连通…
阅读更多...
王道考研数据结构第五章知识点

王道考研数据结构第五章知识点

5.1.1 树的定义和基本术语 祖先节点&#xff1a;(对于你来说),父亲和爷爷都是祖先节点 子孙节点&#xff1a;对于父亲来说&#xff0c;父亲下面所有的节点都叫子孙节点 双亲节点(父节点)&#xff1a;一个节点的直接前驱就是它的父节点 兄弟节点&#xff1a;例如二叔&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023