Layui入门

最新推荐文章于 2025-04-22 14:31:17 发布

呲花1

最新推荐文章于 2025-04-22 14:31:17 发布

阅读量1.6k

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_62327548/article/details/125675331

版权

本文介绍了Layui，一个开源的Web UI解决方案，适合后端开发者。内容包括Layui的基本概念，如何自定义模块，回顾JSON，以及使用Layui实现登录页面的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、关于Layui

什么是Layui

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

二、自定义模块

设定扩展模块所在的目录，然后就可以在别的JS文件中使用了mymodule_confi.js

三、json回顾

四、Layui实现登陆

1、构建登录页面

一、关于Layui

什么是Layui

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

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

二、自定义模块

编写 mymod.js 如下：
mymod.js

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

设定扩展模块所在的目录，然后就可以在别的JS文件中使用了
mymodule_confi.js

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

新建一个demo2.jsp页面
注意：我们要把自己定义的模块引入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>Insert title here</title>
<!-- 引入 layui.css -->
<!-- ctrl+c拷贝文件全名
ctrl+shift+r按照全名查找文件 -->
<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>
<script src="${pageContext.request.contextPath}/static/js/layui/mymodule/js/mymod.js"></script>
<script src="${pageContext.request.contextPath}/static/js/layui/mymodule/mymodule_config.js"></script>
</head>
<body>
请输入：<input type="text" value="123" id="layui_demo1_input">
<button id="layui_demo1_btn">点我</button>

请输入相关文字：<input type="text" value="123" id="layui_demo2_input">
<button id="layui_demo2_btn">自定义模块</button>
<script>
//1.导入相关js相对应的模块Jquery.js
//2.将模块赋值给变量
layui.use(['layer','form','jquery','mymod'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,$ = layui.jquery
  ,mymod = layui.mymod;
   $("#layui_demo1_btn").click(function(){
	  let layui_demo1_input =$("#layui_demo1_input").val();
	  layer.msg(layui_demo1_input);
  });
  //给自定义模块按钮添加点击事件
  $("#layui_demo2_btn").click(function(){
	 let layui_demo2_input = $("#layui_demo2_input").val();
	 mymod.hello(layui_demo2_input);
  });
  
  layer.msg('Hello World');  
}); 


</script> 
</body>
</html>

效果如下：

三、json回顾

如果我们想得到：{“name”:“文”,“age”:“18”} 这样一个格式的json对象我们一个怎么做
1、我们可以通过map集合

	Map<String, Object> map1 = new HashMap<>();
		map1.put("name", "文");
		map1.put("age", 18);
		
		ObjectMapper om = new ObjectMapper();
//		writeValueAsString将对象/数组转成json字符串
		System.out.println(om.writeValueAsString(map1));

2、我们可以通过对象获得
我们实例对象

package com.zxw.demo;

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

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Demo1 {
	public static void main(String[] args) throws Exception {
		ArrayList<Object> list1 = new ArrayList<>();
		ArrayList<Object> list2 = new ArrayList<>();

		
		Map<String, Object> map1 = new HashMap<String, Object>();
		map1.put("name", "鹏崽");
		map1.put("age", 38);
		
		Map<String, Object> map2= new HashMap<String, Object>();
		map2.put("name", "荣崽");
		map2.put("age", 18);
		list1.add(map1);
		list1.add(map2);

		
		
		ObjectMapper om = new ObjectMapper();
		//将对象/数组转成json字符串
		System.out.println(om.writeValueAsString(map1));
	
		User user = new User("鹏崽",38);
		User user2 = new User("荣崽",18);
		list2.add(user);
		list2.add(user2);
		System.out.println(om.writeValueAsString(user));
//		System.out.println(om.writeValueAsString(user2));
		System.out.println(om.writeValueAsString(list1));
		System.out.println(om.writeValueAsString(list2));

	}
}
class User{
	private String name;
	private int age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public User(String name, int age) {
		super();
		this.name = name;
		this.age = age;
	}
	public User() {
		super();
	}
	
	
	
}

四、Layui实现登陆

1、构建登录页面

建立一个User实体类：

package com.zking.entity;

public class User {
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}
	public User(String username, String password) {
		super();
		this.username = username;
		this.password = password;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", password=" + password + "]";
	}
	
	
}

建立一个UserAction:

package com.zking.web;

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

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

import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User>{

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

}

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<action path="/blog" type="com.zking.web.BlogAction">
		<forward name="list" path="/blogList.jsp" redirect="false" />
		<forward name="toList" path="/blog.action?methodName=list"
			redirect="true" />
		<forward name="toEdit" path="/blogEdit.jsp" redirect="false" />
	</action>

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

</config>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/head.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">
<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">
<title>Insert title here</title>
<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;//ES6
            		$("#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(data.msg,{icon: 1}),	
            				 }
            				else{
            					layer.alert(data.msg,{icon: 2})	
            				}
            				}
            			})
            		});
            	});
            </script>
    </body>
</html>