LayUi入门

目录

一、什么是layui

二、layui入门

1、将layui下载到本地

2、引入layui

3、入门案例

三、自定义模块 

1、确定模块名称  假设是mymod 然后新建一个mymod.js 放入mymod文件中（在WebContent下）

2、编写 mymod.js 

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

四、构建登陆界面

1、实体类

2、接收

3、配置

五、主页搭建

一、什么是layui

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

layui网址

官方网站：https://www.layui.com/（已下线）这个网址是已经下线了的
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）这个是由网上大佬在维护内容基本和原来的一样

二、layui入门

1、将layui下载到本地

 点击GitHUB/码云都可以

2、引入layui

将下载好的layui完整地放置到你的项目目录（或静态资源服务器），并在页面中分别引入：

注意：路径问题

1） 相对路径/绝对路径
2） base标签

3、入门案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>







 




请输入：
点我
 

三、自定义模块 

1、确定模块名称  假设是mymod 然后新建一个mymod.js 放入mymod文件中（在WebContent下）

2、编写 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);
});    

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

//module_config配置文件
layui.config({
  base: 'static/js/layui/mymodule/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});

4、应用

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









 




请输入相关文字：
自定义模块
 
 

四、构建登陆界面

1、实体类

package com.shishirong.entity;
 
public class User {
 
	private String username;
	private String pwd;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public User() {
		// TODO Auto-generated constructor stub
	}
	public User(String username, String pwd) {
		super();
		this.username = username;
		this.pwd = pwd;
	}
	@Override
	public String toString() {
		return "User [username=" + username + ", pwd=" + pwd + "]";
	}
	
}

2、接收

package com.shishirong.web;
 
import java.util.HashMap;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.cxy.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
 
public class UserAction extends ActionSupport implements ModelDriver{
 
	private User user = new User();
	
	
	//写方法处理前台的请求
	public String execute(HttpServletRequest req, HttpServletResponse resp) {
		Map map = new HashMap();
		if("aa".equals(user.getUsername()) && "123".equals(user.getPwd())) {
			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;
	}
	
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}
	
	
	
}

3、配置

五、主页搭建

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>












 



	
		
			
		
		

			

					
				
			

					
				
			

					登录
				
			

					新用户注册
				
			

					忘记密码
				
		
	

展示：