Layui入门

目录

一、关于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"%>














请输入：
点我

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

效果如下：

三、json回顾

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

	Map 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