layui入门

最新推荐文章于 2023-09-06 09:21:31 发布

```

最新推荐文章于 2023-09-06 09:21:31 发布

阅读量140

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/csnbb/article/details/125676121

版权

1.layui入门

<%@ 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 -->
<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>
	请输入：<input type="text" value="默认值" id="layui_demo1_input" />
	<button id="layui_demo1_btn">点我</button>
<script>
/*导入js相对应的模块jquery.js  */
/*将模块赋值给变量  */
layui.use(['layer', 'form','jquery'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,$ = layui.jquery;
  $("#layui_demo1_btn").click(function () {
	var layui_demo1_input=$("#layui_demo1_input").val();
	  layer.msg(layui_demo1_input); 

  })

  layer.msg('Hello World'); 
});
</script> 
</body>
</html>

<%@ 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 -->
<link rel="styl esheet" 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="默认值" id="layui_demo1_input" />
	<button id="layui_demo1_btn">点我</button>
	
	请输入相关文章：<input type="text" value="默认值" id="layui_demo2_input" />
	<button id="layui_demo2_btn">自定义模块</button>
<script>
/*导入js相对应的模块jquery.js  */
/*将模块赋值给变量  */
layui.use(['layer', 'form','jquery','mymod'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,mymod =layui.mymod
  ,$ = layui.jquery;
  $("#layui_demo1_btn").click(function () {
	var layui_demo1_input=$("#layui_demo1_input").val();
	  layer.msg(layui_demo1_input); 

  })
  //给自定义模块按钮添加点击事件
   $("#layui_demo2_btn").click(function () {
	var layui_demo2_input=$("#layui_demo2_input").val();
    mymod.say(layui_demo2_input);
  })

  layer.msg('Hello World'); 
});
</script> 
</body>
</html>

2.自定义模块

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

3.layui登录基本功能

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>();
	// if("hz".equals(user.getUsername()) && "123456".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) {
	// // TODO Auto-generated catch block
	// e.printStackTrace();
	// }
	// return null;
	// }

	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			if ("hz".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) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

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

}

<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/header.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">
<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>
<title>Insert title here</title>
</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//es6
			,layer=layui.layer;
		$("#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})
						location.href='main.jsp';
					}
					else{
						layer.alert(data.msg,{icon:2})
						
					}
				 	}	

			})
		})
	})
	</script>
	
	
	
</body>
</html>