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

一、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这里直接也放上引入重点：

注意：这里的href和src都是根据我们放入自己的工程目录位置来写的，不要忘记修改噢！

3.2 测试使用

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

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

这里直接放上代码：

    请输入：

运行结果：

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

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噢~

4.5 测试使用

运行结果：

四、利用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 {

	private User user = new User();
	
	//写一个方法处理前台的请求
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map map = new HashMap();
		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"%>

<%@ include file="common/header.jsp" %>




登录







	
	
        
            
				
					
					
					
					新用户注册
					忘记密码

4.3 运行测试

输入错误信息：

输入正确信息：

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

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

Java相关栏目本月热门文章