Layui实现之登陆页面&&实现扩展模块

最新推荐文章于 2024-03-27 09:54:33 发布

Bugxiu_fu

最新推荐文章于 2024-03-27 09:54:33 发布

阅读量2.9k

点赞数

文章标签： eclipse 前端 layui

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/125994369

版权

一、什么是layui？

layui轻量级的，开源，免费的。前端的框架（ppt模板，框架是实现某种功能的半成品，提供了一些常用的工具类和一些基础通用化的组件，可以供开发人员在此基础上，更高效的满足各自的业务需求）。与easyui类似（后台框架），可以理解为一个组件库，简化前端开发的，为开发人员提供遍历，因为他是一个成熟的框架。

下面是离线版本（官方已下线），可随时查看

在线示例 - Layuihttp://layui.org.cn/demo/index.html
举个例子：
easyui=jquery+html4（用来做后台的管理界面）半老徐娘
bootstrap=jquery+html5 美女拜金
layui 清纯少女

适用范围

1.layui 其实更偏向与后端开发人员使用，在服务端页面（电脑端，手机端）上有非常好的效果。
2.适合做后台框架

案例一

效果展示

如何实现实现扩展模块？

/**
  扩展一个test模块
  方法，定义在function前面是方法
**/      
 
layui.define(function(exports){ 
  var obj = {
    hello: function(str){//hello是方法定义的方法
      alert('Hello '+ (str||'test'));
    }
  };
  
  //输出test接口
  exports('test', obj);
});

注意事项：exports（'test'，obj）为下面的layui.use(["需要用到的模块名","jquery","test","layui",""])

layui实现代码

	<script type="text/javascript">
	layui.use(['jquery','test'], function() {
	    let $ = layui.jquery;
	    let layer = layui.layer;
	    
	    $("#login").click(function() {
	    	$.ajax({
	    		url: jdlj + "/loginAction.action?methodName=login",
	    		data: {
	    			username: $("#username").val(),
	    			pwd: $("#password").val()
	    		},
	    		type: 'post',
	    		dataType: 'json',
	    		success: function(resp) {
	    			if(resp.code==1){
	    				layer.alert('酷毙了', {icon: 1});
							location.href="index.jsp";
	    			}else{
	    				layer.alert('失败了', {icon: 5});
	    			}
	    		}
	    	})
	    })
	    
	 });
	</script>

java代码子Action代码

public class LoginAction extends AbstractorAction implements ModelDrive{

	private User u=new User();
		
	@Override
	public Object getModel() {
		return u;
	}
	public void login(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		
		resp.setContentType("appliaction/json;charset=utf-8");
		Map<String, Object> map=new HashMap<>();
		if("admin".equals(u.getUsername()) && "123".equals(u.getPwd())) {
			map.put("code", 1);
			map.put("mag", "登陆成功");
		}else {
			map.put("code", -1);
			map.put("mag", "账号或者密码不正确");
		}
		ObjectMapper mapper=new ObjectMapper();
		try {
			String json = mapper.writeValueAsString(map);
			PrintWriter out = resp.getWriter();
			out.write(json);
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}

common公共资源引入的页面；以下是layui用到的css样式，js类库

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
    request.setAttribute("jdlj", request.getContextPath());//获取项目上下文对象（/layui_02）
%>
<link rel="stylesheet" href="js/layui/css/layui.css">
<link rel="stylesheet" href="css/login.css">

<link rel="stylesheet" href="css/iconfont.css"
	type="text/css" media="all">
<link rel="stylesheet" href="css/login.css"
	type="text/css" media="all">
	
<script src='js/layui/layui.js' ></script>

<script>
var jdlj="${jdlj}";
</script>

HTML代码

<%@ 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">

<style>
body {
	color: #;
}

a {
	color: #;
}

a:hover {
	color: #;
}

.bg-black {
	background-color: #;
}

.tx-login-bg {
	background: url(images/bg.jpg) no-repeat 0 0;
}
</style>

<!-- 引入样式 B -->
<%@ include file='/common/Layui.jsp'%>
<!-- 引入样式 E -->

</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>
</body>
</html>