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

其他 2023-07-25 17:38:38 阅读次数: 0

目录

一、Layui简介

1. 什么是LayUI

2. LayUI的特点

二、LayUI入门

        1. LayUI下载

2. LayUI入门使用

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

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

2.3 制作一个简单的猜字游戏

2.4 效果展示

三、Layui实现简单登入功能

四、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. 导入jar包

 2. 配置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>

3. 配置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>

4. 用户实体类

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 + "]";
	}

}

5. 用户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;
	}
}

6. 用户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;
	}

}

7. 用户登入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>

8. 运行效果

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

错误测试：

四、Layui实现简单注册功能

1. 添加mvc.xml配置文件

<action path="/user" type="demo.web.UserAction"></action>

2. UserDao类添加注册方法

public void regest(User u) throws Exception {
		String sql = "insert into t_oa_user values(?,?,?,?,?)";
		super.executeUpdate(sql, u, new String[] {"id","name","loginName","pwd","rid"});
	}

3. UserAction类添加注册方法

public String regest(HttpServletRequest req, HttpServletResponse resp) {
		try {
			dao.regest(u);
			ResponseUtil.write(resp, u);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return super.execute(req, resp);
	}

4. 编写注册JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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"
	href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
<script
	src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
</head>
<body>
	<div class="layui-container">
		<div class="layui-row">
			<div class="layui-col-md6 layui-col-md-offset3">
				<h2 style="margin-left:280px;margin-bottom:30px;margin-top:30px;">用户注册</h2>
				<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="text" name="account" 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>
			</div>
		</div>
	</div>

	<script>
		layui.use([ 'form', 'layer', 'jquery' ], function() {
			var form = layui.form, layer = layui.layer, $ = layui.jquery;

			// 监听提交
			form.on('submit(register)', function(data) {
				// 获取表单中的数据
				var username = data.field.username;
				var account = data.field.account;
				var password = data.field.password;

				//执行注册逻辑，这里只做简单的弹窗演示
				$.ajax({
				url:'${pageContext.request.contextPath}/user.action?methodName=regest',
				dataType:'json',
				data:{
					id:12,
					name:username,
					loginName:account,
					pwd:password,
					rid:1
				},
				method:'post',
				success:function(data){
					if(data!=null){
						 layer.msg('注册成功！', {icon: 6});
					}else{
						layer.msg('注册失败', {icon: 5});
					}
				}
			})
			return false; //阻止表单跳转
			});
		});
	</script>
</body>
</html>

 5. 运行效果预览

猜你喜欢

转载自blog.csdn.net/Justw320/article/details/131637842
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022