devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

layUI之入门

作者：知新_RL | 2024-04-18 15:20:34

赞

踩

layui

目录

一、layui简介

 1.什么是layui

2.layui、easyui与bootstrap的对比

 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）

2.2 layui和easyui对比 

3.layui入门 

3.1路径问题 

 入门案例：点击弹出框 ​编辑

②接着我们新建一个jsp页面叫demo1 

二、自定义模块 

1.如何扩展一个layui(自定义模块)    参考 模块规范

  1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）

静态资源：css、html、js、image 

  2）编写test.js

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

三、json回顾 

结论：

 1.json对象字符串来源有两个，1.map 2.对象，如User 2.json数组字符串来源有两个，1.list2.list<对象>,如List

四、layui登录基本功能 

1.建一个login.jsp然后我们一般在企业里面不是每一个页码都会去导入layui

五、优化UserAction

六、主页搭建

一、layui简介

 1.什么是layui

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

   官方网站：https://www.layui.com/（已下线）
   参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

我们赋值上面那个非官网去地址栏里就会出现如下图所示：

 接着下一步：

往下滑找到如下图所示： 

 点击码云然后入下图所示：

接着双击点进去如图所示： 

我们下载好了之后就是一个压缩包如下图所示：

 当然除了使用码云下载，我们也可以用另外一个，它是属于外国的开源平台。

两者做对比的话，我们国内的响应速度相对较快。

 由国人开发（作者贤心），16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

2.layui、easyui与bootstrap的对比

有趣的对比方式，嘿嘿嘿....
  easyui=jquery+html4（用来做后台的管理界面） 半老徐娘
  bootstrap=jquery+html5 美女 拜金
  layui 清纯少女

 2.1 layui和bootstrap对比（这两个都属于UI渲染框架）

   1.layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看（目前官网已下架，开源了）
          2.bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过

  1）适用范围不一样

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

            3.layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的（说这句话的人，只能说明你对layui不了解）
             
            4.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。
      
            5.适合做网站
             
            6.如果是类似官网，且需要同时满足PC端和移动端效果，bootstrap 表现很好，但是如果是要交互的网站，比如商城之类，layui显然更好，前后端分离
 

  2）大小不一样

         1.layui 轻量级
             2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余

2.2 layui和easyui对比 

         1.easyui 是非开源的，有需要解决的问题的话，就只能等官方更新了
          2.layui是开源的，社区比较活跃，解决问题还是比较快的
          3.easyui诞生的早些，所以功能相对完善一些，很多功能都能是比较健全的
          4.layui就相对来说少一些了，不过，功能都是像官网说的，精雕细琢
          5.layui更符合现在的审美

3.layui入门 

 将layui下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），并在页面中分别引入：
   <!-- 引入 layui.css -->
   <link rel="stylesheet" href="xxx/layui.css">
   <!-- 引入 layui.js -->
   <script src="xxx/layui.js"></script> 

3.1路径问题 

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

 入门案例：点击弹出框 

①先把我们的框架导入进去，接着在建一个文件取名为static，在建一个文件名为js，在把我们解压好的安装包里面的layui里面的layui全部赋值上去及其他的有如下图所示：

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​ 

 然后我们在运行一下：注意两个点：第一个的话就是注意改数据库连接，确保数据库里面有张表，第二个的话就是只要电脑上安装了禅道的话，就把禅道对应的mysql这个服务给关掉

这样就说明没有问题如下图所示： 

②接着我们新建一个jsp页面叫demo1 

然后我们在去sayui官网上去引入：  

 接着要把导入进去的路径改为你现在里面存放的路径，而不是网络上的路径

 在回到官网上去：

运行结果如图所示： 

 现在目前弹出来的数据是定死的吧，我们进一步优化：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Insert title here</title>
  8. <!-- 引入 layui.css -->
  9. <!-- ctrl+c拷贝文件全名 -->
  10. <!-- ctrl+shift+r按照全名查找文件 -->
  11. <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
  12.  
  13. <!-- 引入 layui.js -->
  14. <script src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
  15.  
  16. </head>
  17. <body>
  18. 请输入：<input type="text" value="默认值" id="layui_demo1_input">
  19. <button id="layui_demo1_btn">点我</button>
  20. <script src="./layui/layui.js"></script>
  21. <script>
  22. // 导入js相对应的模块 jquer.js
  23. // 将模块赋值给变量
  24. layui.use(['layer', 'form', 'jquery'], function(){
  25.   var layer = layui.layer
  26.   ,form = layui.form
  27.   ,$ = layui.jquery;
  28.  	$("#layui_demo1_btn").click(function(){
  29.  		var layui_demo1_input = $("#layui_demo1_input").val();
  30.  		layer.msg(layui_demo1_input);
  31.  	}) 
  32.  
  33.   layer.msg('Hello World');
  34. });
  35. </script> 
  36.  
  37. </body>
  38. </html>

 运行结果为：就是我们文本框里输入的什么它就弹什么

二、自定义模块 

1.如何扩展一个layui(自定义模块)    参考 模块规范

  1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）

静态资源：css、html、js、image 

 我们先在静态文件中的js里面的layui里建一个文件名叫mymodule

  2）编写test.js

  layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
      var obj = {
         hello: function(str){
            alert('Hello '+ (str||'test'));
         }
      };
 
      //输出test接口
      exports('test', obj);
   });   

 接着在里面建一个文件叫js然后里面在创建file取名mymode.js，然后我们在回到官网上，找到模块规范：

接着我们在mymod.js里面又赋值一个看代码块吧：

  1. layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('mod1', callback);
  2.   var obj = {
  3.     hello: function(str){
  4.       alert('Hello '+ (str||'mymod'));
  5.     }, say: function(str){
  6.       alert('say '+ (str||'mymod'));
  7.     }
  8.     
  9.   };
  10.   
  11.   //输出 mymod 接口
  12.   exports('mymod', obj);
  13. });

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

 layui.config({
      base: '/res/js/' //假设这是test.js所在的目录
   }).extend({ //设定模块别名
      test: 'test' //如果test.js是在根目录，也可以不用设定别名
   });
 
   //使用test
   layui.use('test', function(){
      var test = layui.test;
 
      test.hello('World!'); //弹出Hello World!
   });

 案例：
   1）弹出hello方法
   2）日期格式转换

 接着下一步我们就在复制一份demo1的代码块取名为demo2，接着步骤跟着官方一步一步操作即可，看代码块：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Insert title here</title>
  8. <!-- 引入 layui.css -->
  9. <!-- ctrl+c拷贝文件全名 -->
  10. <!-- ctrl+shift+r按照全名查找文件 -->
  11. <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
  12.  
  13. <!-- 引入 layui.js -->
  14. <script src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
  15.  
  16. <!-- 还要引入自己写好的js文件 -->
  17. <script src="${pageContext.request.contextPath}/static/js/layui/mymodule/js/mymod.js"></script>
  18. <script src="${pageContext.request.contextPath}/static/js/layui/mymodule/mymodule_config.js"></script>
  19.  
  20.  
  21. </head>
  22. <body>
  23. 请输入：<input type="text" value="默认值" id="layui_demo1_input">
  24. <button id="layui_demo1_btn">点我</button>
  25. <script src="./layui/layui.js"></script>
  26.  
  27. 请输入相关文字：<input type="text" value="默认值" id="layui_demo2_input">
  28. <button id="layui_demo2_btn">自定义模块</button>
  29.  
  30. <script>
  31. // 导入js相对应的模块 jquer.js
  32. // 将模块赋值给变量
  33. layui.use(['layer', 'form', 'jquery', 'mymod'], function(){
  34.   var layer = layui.layer
  35.   ,form = layui.form
  36.   ,$ = layui.jquery
  37.   ,mymod = layui.mymod;
  38.  	$("#layui_demo1_btn").click(function(){
  39.  		var layui_demo1_input = $("#layui_demo1_input").val();
  40.  		layer.msg(layui_demo1_input);
  41.  	});
  42.  	
  43.  // 给自定义模块按钮添加点击事件
  44. 	 $("#layui_demo2_btn").click(function(){
  45. 		 var layui_demo2_input = $("#layui_demo2_input").val();
  46. 	 		mymod.say(layui_demo2_btn);
  47. 	 		mymod.hello(layui_demo2_btn);
  48. 	 	});
  49.  
  50.   layer.msg('Hello World');
  51. });
  52. </script> 
  53.  
  54. </body>
  55. </html>

 运行效果如图所示：

三、json回顾 

这两个怎么实现？

 {
   name:zhangsan
  ,age:19
}

[
 {
    name:zhangsan
    ,age:19
 },
 {
    name:lisi
    ,age:20
 },
]

代码块：

  1. package com.jiangwenjuan.demo;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.HashMap;
  5. import java.util.Map;
  6.  
  7. import com.fasterxml.jackson.core.JsonProcessingException;
  8. import com.fasterxml.jackson.databind.ObjectMapper;
  9.  
  10. public class Demo1 {
  11. 	public static void main(String[] args) throws Exception {
  12. 		ArrayList<Object> list1 = new ArrayList<>();
  13. 		ArrayList<Object> list2 = new ArrayList<>();
  14. 		
  15. 		
  16. 		
  17. 		Map<String, Object> map1 = new HashMap<String, Object>();
  18. 		map1.put("name", "zhangsan");
  19. 		map1.put("age", 18);
  20. 		
  21. 		Map<String, Object> map2 = new HashMap<String, Object>();
  22. 		map2.put("name", "lisi");
  23. 		map2.put("age", 20);
  24. 		
  25. 		list1.add(map1);
  26. 		list1.add(map2);
  27. 	
  28. 		
  29. 		
  30. 		ObjectMapper om = new ObjectMapper();
  31. //		writeValueAsString 将对象/数组转成json字符串
  32. 		System.out.println(om.writeValueAsString(map1));
  33. 		
  34. 		User user = new User("zhangsan", 19);
  35. 		User user2 = new User("lisi", 20);
  36. 		list2.add(user);
  37. 		list2.add(user2);
  38. 		System.out.println(om.writeValueAsString(user));
  39. 		
  40. 		System.out.println(om.writeValueAsString(list1));
  41. 		System.out.println(om.writeValueAsString(list2));
  42.  
  43. 	}
  44.  
  45. }
  46.  
  47. class User{
  48. 	private String name;
  49. 	private int age;
  50. 	public String getName() {
  51. 		return name;
  52. 	}
  53. 	public void setName(String name) {
  54. 		this.name = name;
  55. 	}
  56. 	public int getAge() {
  57. 		return age;
  58. 	}
  59. 	public void setAge(int age) {
  60. 		this.age = age;
  61. 	}
  62. 	public User() {
  63. 		// TODO Auto-generated constructor stub
  64. 	}
  65. 	public User(String name, int age) {
  66. 		super();
  67. 		this.name = name;
  68. 		this.age = age;
  69. 	}
  70. 	
  71. }

 运行结果为：

// map集合、对象
//{
//    name:zhangsan
//    ,age:19
//}
//{"name":"zhangsan","age":18}

//{"name":"zhangsan","age":18}
//{"name":"zhangsan","age":19}


//两种方式 定义一个数组或者集合
//[
// {
//    name:zhangsan
//    ,age:19
// },
// {
//    name:lisi
//    ,age:20
// },
//]

//{"name":"zhangsan","age":18}
//{"name":"zhangsan","age":19}
//[{"name":"zhangsan","age":18},{"name":"lisi","age":20}]
//[{"name":"zhangsan","age":19},{"name":"lisi","age":20}]

结论：

 1.json对象字符串来源有两个，1.map 2.对象，如User
 2.json数组字符串来源有两个，1.list<map> 2.list<对象>,如List<User>

四、layui登录基本功能 

1.建一个login.jsp然后我们一般在企业里面不是每一个页码都会去导入layui

我们去WebContent里建一个文件叫common在这里面建一个header.jsp如图所示：

header.jsp代码块：往后要添加公共的配置只需要在这个jsp里面添加就可以了

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <!-- 引入 layui.css -->
  7. <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css">
  8.  
  9. <!-- 引入 layui.js -->
  10. <script src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
  11.  
  12. </head>
  13. </html>

 接着我们就要在login.jsp里面去导入上面的文件

  1. <!-- 导入这个文件  能点进去就说明没有问题-->
  2.     <%@include file="common/header.jsp" %>

接着我们回到官网上去，找到表单  

看一下login.jsp代码块：我们从body开始复制

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.     <!-- 导入这个文件 -->
  4.     <%@include file="common/header.jsp" %>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css" type="text/css" media="all">
  10. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css" type="text/css" media="all">
  11. <title>Insert title here</title>
  12. <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>
  13.  
  14. </head>
  15. <body>
  16.           
  17. <blockquote class="layui-elem-quote layui-text">
  18.   鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="../doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示？</a> 2. <a href="../doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新？</a>
  19. </blockquote>
  20.               
  21. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  22.   <legend>表单集合演示</legend>
  23. </fieldset>
  24.  
  25. <form class="layui-form" action="">
  26.   <div class="layui-form-item">
  27.     <label class="layui-form-label">单行输入框</label>
  28.     <div class="layui-input-block">
  29.       <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  30.     </div>
  31.   </div>
  32.   <div class="layui-form-item">
  33.     <label class="layui-form-label">验证必填项</label>
  34.     <div class="layui-input-block">
  35.       <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
  36.     </div>
  37.   </div>
  38.   
  39.   <div class="layui-form-item">
  40.     <div class="layui-inline">
  41.       <label class="layui-form-label">验证手机</label>
  42.       <div class="layui-input-inline">
  43.         <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
  44.       </div>
  45.     </div>
  46.     <div class="layui-inline">
  47.       <label class="layui-form-label">验证邮箱</label>
  48.       <div class="layui-input-inline">
  49.         <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
  50.       </div>
  51.     </div>
  52.   </div>
  53.   
  54.   <div class="layui-form-item">
  55.     <div class="layui-inline">
  56.       <label class="layui-form-label">多规则验证</label>
  57.       <div class="layui-input-inline">
  58.         <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
  59.       </div>
  60.     </div>
  61.     <div class="layui-inline">
  62.       <label class="layui-form-label">验证日期</label>
  63.       <div class="layui-input-inline">
  64.         <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
  65.       </div>
  66.     </div>
  67.     <div class="layui-inline">
  68.       <label class="layui-form-label">验证链接</label>
  69.       <div class="layui-input-inline">
  70.         <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
  71.       </div>
  72.     </div>
  73.   </div>
  74.   
  75.   <div class="layui-form-item">
  76.     <label class="layui-form-label">验证身份证</label>
  77.     <div class="layui-input-block">
  78.       <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
  79.     </div>
  80.   </div>
  81.   <div class="layui-form-item">
  82.     <label class="layui-form-label">自定义验证</label>
  83.     <div class="layui-input-inline">
  84.       <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
  85.     </div>
  86.     <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
  87.   </div>
  88.   
  89.   <div class="layui-form-item">
  90.     <div class="layui-inline">
  91.       <label class="layui-form-label">范围</label>
  92.       <div class="layui-input-inline" style="width: 100px;">
  93.         <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
  94.       </div>
  95.       <div class="layui-form-mid">-</div>
  96.       <div class="layui-input-inline" style="width: 100px;">
  97.         <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
  98.       </div>
  99.     </div>
  100.   </div>
  101.   
  102.   <div class="layui-form-item">
  103.     <label class="layui-form-label">单行选择框</label>
  104.     <div class="layui-input-block">
  105.       <select name="interest" lay-filter="aihao">
  106.         <option value=""></option>
  107.         <option value="0">写作</option>
  108.         <option value="1" selected="">阅读</option>
  109.         <option value="2">游戏</option>
  110.         <option value="3">音乐</option>
  111.         <option value="4">旅行</option>
  112.       </select>
  113.     </div>
  114.   </div>
  115.   
  116.   
  117.   <div class="layui-form-item">
  118.     <div class="layui-inline">
  119.       <label class="layui-form-label">分组选择框</label>
  120.       <div class="layui-input-inline">
  121.         <select name="quiz">
  122.           <option value="">请选择问题</option>
  123.           <optgroup label="城市记忆">
  124.             <option value="你工作的第一个城市">你工作的第一个城市</option>
  125.           </optgroup>
  126.           <optgroup label="学生时代">
  127.             <option value="你的工号">你的工号</option>
  128.             <option value="你最喜欢的老师">你最喜欢的老师</option>
  129.           </optgroup>
  130.         </select>
  131.       </div>
  132.     </div>
  133.     <div class="layui-inline">
  134.       <label class="layui-form-label">搜索选择框</label>
  135.       <div class="layui-input-inline">
  136.         <select name="modules" lay-verify="required" lay-search="">
  137.           <option value="">直接选择或搜索选择</option>
  138.           <option value="1">layer</option>
  139.           <option value="2">form</option>
  140.           <option value="3">layim</option>
  141.           <option value="4">element</option>
  142.           <option value="5">laytpl</option>
  143.           <option value="6">upload</option>
  144.           <option value="7">laydate</option>
  145.           <option value="8">laypage</option>
  146.           <option value="9">flow</option>
  147.           <option value="10">util</option>
  148.           <option value="11">code</option>
  149.           <option value="12">tree</option>
  150.           <option value="13">layedit</option>
  151.           <option value="14">nav</option>
  152.           <option value="15">tab</option>
  153.           <option value="16">table</option>
  154.           <option value="17">select</option>
  155.           <option value="18">checkbox</option>
  156.           <option value="19">switch</option>
  157.           <option value="20">radio</option>
  158.         </select>
  159.       </div>
  160.     </div>
  161.   </div>
  162.   
  163.   <div class="layui-form-item">
  164.     <label class="layui-form-label">联动选择框</label>
  165.     <div class="layui-input-inline">
  166.       <select name="quiz1">
  167.         <option value="">请选择省</option>
  168.         <option value="浙江" selected="">浙江省</option>
  169.         <option value="你的工号">江西省</option>
  170.         <option value="你最喜欢的老师">福建省</option>
  171.       </select>
  172.     </div>
  173.     <div class="layui-input-inline">
  174.       <select name="quiz2">
  175.         <option value="">请选择市</option>
  176.         <option value="杭州">杭州</option>
  177.         <option value="宁波" disabled="">宁波</option>
  178.         <option value="温州">温州</option>
  179.         <option value="温州">台州</option>
  180.         <option value="温州">绍兴</option>
  181.       </select>
  182.     </div>
  183.     <div class="layui-input-inline">
  184.       <select name="quiz3">
  185.         <option value="">请选择县/区</option>
  186.         <option value="西湖区">西湖区</option>
  187.         <option value="余杭区">余杭区</option>
  188.         <option value="拱墅区">临安市</option>
  189.       </select>
  190.     </div>
  191.     <div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
  192.   </div>
  193.   
  194.   <div class="layui-form-item">
  195.     <label class="layui-form-label">复选框</label>
  196.     <div class="layui-input-block">
  197.       <input type="checkbox" name="like[write]" title="写作">
  198.       <input type="checkbox" name="like[read]" title="阅读" checked="">
  199.       <input type="checkbox" name="like[game]" title="游戏">
  200.     </div>
  201.   </div>
  202.   
  203.   <div class="layui-form-item" pane="">
  204.     <label class="layui-form-label">原始复选框</label>
  205.     <div class="layui-input-block">
  206.       <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
  207.       <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
  208.       <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
  209.     </div>
  210.   </div>
  211.   
  212.   <div class="layui-form-item">
  213.     <label class="layui-form-label">开关-默认关</label>
  214.     <div class="layui-input-block">
  215.       <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
  216.     </div>
  217.   </div>
  218.   <div class="layui-form-item">
  219.     <label class="layui-form-label">开关-默认开</label>
  220.     <div class="layui-input-block">
  221.       <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
  222.     </div>
  223.   </div>
  224.   <div class="layui-form-item">
  225.     <label class="layui-form-label">单选框</label>
  226.     <div class="layui-input-block">
  227.       <input type="radio" name="sex" value="男" title="男" checked="">
  228.       <input type="radio" name="sex" value="女" title="女">
  229.       <input type="radio" name="sex" value="禁" title="禁用" disabled="">
  230.     </div>
  231.   </div>
  232.   <div class="layui-form-item layui-form-text">
  233.     <label class="layui-form-label">普通文本域</label>
  234.     <div class="layui-input-block">
  235.       <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
  236.     </div>
  237.   </div>
  238.   <!--<div class="layui-form-item layui-form-text">
  239.     <label class="layui-form-label">编辑器</label>
  240.     <div class="layui-input-block">
  241.       <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
  242.     </div>
  243.   </div>-->
  244.   <div class="layui-form-item">
  245.     <div class="layui-input-block">
  246.       <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
  247.       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  248.     </div>
  249.   </div>
  250. </form>
  251.  
  252. <!-- 示例-970 -->
  253.  
  254.   
  255. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  256.   <legend>赋值和取值</legend>
  257. </fieldset>
  258.  
  259. <form class="layui-form" action="" lay-filter="example">
  260.   <div class="layui-form-item">
  261.     <label class="layui-form-label">输入框</label>
  262.     <div class="layui-input-block">
  263.       <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  264.     </div>
  265.   </div>
  266.   <div class="layui-form-item">
  267.     <label class="layui-form-label">密码框</label>
  268.     <div class="layui-input-block">
  269.       <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
  270.     </div>
  271.   </div>
  272.   
  273.   <div class="layui-form-item">
  274.     <label class="layui-form-label">选择框</label>
  275.     <div class="layui-input-block">
  276.       <select name="interest" lay-filter="aihao">
  277.         <option value=""></option>
  278.         <option value="0">写作</option>
  279.         <option value="1">阅读</option>
  280.         <option value="2">游戏</option>
  281.         <option value="3">音乐</option>
  282.         <option value="4">旅行</option>
  283.       </select>
  284.     </div>
  285.   </div>
  286.   
  287.   <div class="layui-form-item">
  288.     <label class="layui-form-label">复选框</label>
  289.     <div class="layui-input-block">
  290.       <input type="checkbox" name="like[write]" title="写作">
  291.       <input type="checkbox" name="like[read]" title="阅读">
  292.       <input type="checkbox" name="like[daze]" title="发呆">
  293.     </div>
  294.   </div>
  295.   
  296.   <div class="layui-form-item">
  297.     <label class="layui-form-label">开关</label>
  298.     <div class="layui-input-block">
  299.       <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
  300.     </div>
  301.   </div>
  302.   
  303.   <div class="layui-form-item">
  304.     <label class="layui-form-label">单选框</label>
  305.     <div class="layui-input-block">
  306.       <input type="radio" name="sex" value="男" title="男" checked="">
  307.       <input type="radio" name="sex" value="女" title="女">
  308.     </div>
  309.   </div>
  310.   <div class="layui-form-item layui-form-text">
  311.     <label class="layui-form-label">文本域</label>
  312.     <div class="layui-input-block">
  313.       <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
  314.     </div>
  315.   </div>
  316.  
  317.   <div class="layui-form-item">
  318.     <div class="layui-input-block">
  319.       <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
  320.       <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
  321.       <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
  322.     </div>
  323.   </div>
  324. </form>
  325. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  326.   <legend>方框风格的表单集合</legend>
  327. </fieldset>
  328. <form class="layui-form layui-form-pane" action="">
  329.   <div class="layui-form-item">
  330.     <label class="layui-form-label">长输入框</label>
  331.     <div class="layui-input-block">
  332.       <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  333.     </div>
  334.   </div>
  335.   <div class="layui-form-item">
  336.     <label class="layui-form-label">短输入框</label>
  337.     <div class="layui-input-inline">
  338.       <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
  339.     </div>
  340.   </div>
  341.   
  342.   <div class="layui-form-item">
  343.     <div class="layui-inline">
  344.       <label class="layui-form-label">日期选择</label>
  345.       <div class="layui-input-block">
  346.         <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
  347.       </div>
  348.     </div>
  349.     <div class="layui-inline">
  350.       <label class="layui-form-label">行内表单</label>
  351.       <div class="layui-input-inline">
  352.         <input type="text" name="number" autocomplete="off" class="layui-input">
  353.       </div>
  354.     </div>
  355.   </div>
  356.   <div class="layui-form-item">
  357.     <label class="layui-form-label">密码</label>
  358.     <div class="layui-input-inline">
  359.       <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
  360.     </div>
  361.     <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
  362.   </div>
  363.   
  364.   <div class="layui-form-item">
  365.     <div class="layui-inline">
  366.       <label class="layui-form-label">范围</label>
  367.       <div class="layui-input-inline" style="width: 100px;">
  368.         <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
  369.       </div>
  370.       <div class="layui-form-mid">-</div>
  371.       <div class="layui-input-inline" style="width: 100px;">
  372.         <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
  373.       </div>
  374.     </div>
  375.   </div>
  376.   
  377.   <div class="layui-form-item">
  378.     <label class="layui-form-label">单行选择框</label>
  379.     <div class="layui-input-block">
  380.       <select name="interest" lay-filter="aihao">
  381.         <option value=""></option>
  382.         <option value="0">写作</option>
  383.         <option value="1" selected="">阅读</option>
  384.         <option value="2">游戏</option>
  385.         <option value="3">音乐</option>
  386.         <option value="4">旅行</option>
  387.       </select>
  388.     </div>
  389.   </div>
  390.   
  391.   <div class="layui-form-item">
  392.     <label class="layui-form-label">行内选择框</label>
  393.     <div class="layui-input-inline">
  394.       <select name="quiz1">
  395.         <option value="">请选择省</option>
  396.         <option value="浙江" selected="">浙江省</option>
  397.         <option value="你的工号">江西省</option>
  398.         <option value="你最喜欢的老师">福建省</option>
  399.       </select>
  400.     </div>
  401.     <div class="layui-input-inline">
  402.       <select name="quiz2">
  403.         <option value="">请选择市</option>
  404.         <option value="杭州">杭州</option>
  405.         <option value="宁波" disabled="">宁波</option>
  406.         <option value="温州">温州</option>
  407.         <option value="温州">台州</option>
  408.         <option value="温州">绍兴</option>
  409.       </select>
  410.     </div>
  411.     <div class="layui-input-inline">
  412.       <select name="quiz3">
  413.         <option value="">请选择县/区</option>
  414.         <option value="西湖区">西湖区</option>
  415.         <option value="余杭区">余杭区</option>
  416.         <option value="拱墅区">临安市</option>
  417.       </select>
  418.     </div>
  419.   </div>
  420.   <div class="layui-form-item" pane="">
  421.     <label class="layui-form-label">开关-开</label>
  422.     <div class="layui-input-block">
  423.       <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
  424.     </div>
  425.   </div>
  426.   <div class="layui-form-item" pane="">
  427.     <label class="layui-form-label">单选框</label>
  428.     <div class="layui-input-block">
  429.       <input type="radio" name="sex" value="男" title="男" checked="">
  430.       <input type="radio" name="sex" value="女" title="女">
  431.       <input type="radio" name="sex" value="禁" title="禁用" disabled="">
  432.     </div>
  433.   </div>
  434.   <div class="layui-form-item layui-form-text">
  435.     <label class="layui-form-label">文本域</label>
  436.     <div class="layui-input-block">
  437.       <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
  438.     </div>
  439.   </div>
  440.   <div class="layui-form-item">
  441.     <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
  442.   </div>
  443. </form>
  444.           
  445. <script src="//res/layui/dist/layui.js" charset="utf-8"></script>
  446. <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
  447. <script>
  448. layui.use(['form', 'layedit', 'laydate'], function(){
  449.   var form = layui.form
  450.   ,layer = layui.layer
  451.   ,layedit = layui.layedit
  452.   ,laydate = layui.laydate;
  453.   
  454.   //日期
  455.   laydate.render({
  456.     elem: '#date'
  457.   });
  458.   laydate.render({
  459.     elem: '#date1'
  460.   });
  461.   
  462.   //创建一个编辑器
  463.   var editIndex = layedit.build('LAY_demo_editor');
  464.  
  465.   //自定义验证规则
  466.   form.verify({
  467.     title: function(value){
  468.       if(value.length < 5){
  469.         return '标题至少得5个字符啊';
  470.       }
  471.     }
  472.     ,pass: [
  473.       /^[\S]{6,12}$/
  474.       ,'密码必须6到12位，且不能出现空格'
  475.     ]
  476.     ,content: function(value){
  477.       layedit.sync(editIndex);
  478.     }
  479.   });
  480.   
  481.   //监听指定开关
  482.   form.on('switch(switchTest)', function(data){
  483.     layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
  484.       offset: '6px'
  485.     });
  486.     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  487.   });
  488.   
  489.   //监听提交
  490.   form.on('submit(demo1)', function(data){
  491.     layer.alert(JSON.stringify(data.field), {
  492.       title: '最终的提交信息'
  493.     })
  494.     return false;
  495.   });
  496.  
  497.   //表单赋值
  498.   layui.$('#LAY-component-form-setval').on('click', function(){
  499.     form.val('example', {
  500.       "username": "贤心" // "name": "value"
  501.       ,"password": "123456"
  502.       ,"interest": 1
  503.       ,"like[write]": true //复选框选中状态
  504.       ,"close": true //开关状态
  505.       ,"sex": "女"
  506.       ,"desc": "我爱 layui"
  507.     });
  508.   });
  509.   
  510.   //表单取值
  511.   layui.$('#LAY-component-form-getval').on('click', function(){
  512.     var data = form.val('example');
  513.     alert(JSON.stringify(data));
  514.   });
  515.   
  516. });
  517. </script>
  518.  
  519. </body>
  520. </html>

 运行结果如图所示：

由于我们不需要这么多所以我们改变一个login.jsp的代码块：注意图片还有样式也要导入进去css和images是属于静态的所以我们要复制到static里面如下图所示：

 

注意里面样式和图片路径

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.     <!-- 导入这个文件 -->
  4.     <%@include file="common/header.jsp" %>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css" type="text/css" media="all">
  10. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css" type="text/css" media="all">
  11. <title>Insert title here</title>
  12. <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>
  13.  
  14. </head>
  15. <body class="tx-login-bg">
  16.      <div class="tx-login-box">
  17.          <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
  18. 	<ul class="tx-form-li row">
  19. 		<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
  20. 		<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
  21. 		<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>
  22. 		<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
  23. 		<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
  24. 	</ul>
  25.     </div>

 运行结果如图所示：

 接收参数：我们要向后台发送请求

  1. 测试一下有没有绑定事件，同时我们也测试一下jquery有没有加载进去
  2. <script type="text/javascript">
  3.     	layui.use(['jquery','layer'],function(){
  4.     		var $ = layui.jquery;//es6
  5. 			// 給登录按钮添加点击事件
  6.     		$("#login").click(function(){
  7.                 alert(12);
  8.             }
  9. </script>

 运行结果如图所示：

 发表请求：

  1. <script type="text/javascript">
  2.     	layui.use(['jquery','layer'],function(){
  3.     		var $ = layui.jquery;//es6
  4. 			// 給登录按钮添加点击事件
  5.     		$("#login").click(function(){
  6.     			$.ajax({
  7.     				url:"${pageContext.request.contextPath}/user.action?methodName=login",
  8.     				dataType:'json',
  9.     				data:{
  10.     					username:$("#username").val(),
  11.     					password:$("#password").val()
  12.     				},
  13.     				success:function(data){
  14.   
  15.     				}
  16.     			})
  17.     		})
  18.     	});
  19.     </script>

处理请求：我们在web建一个class叫UserAction接着在entity里建一个User，这里面就要跟上面写的username和password保持一致.

 User.java代码块：

  1. package com.zking.entity;
  2.  
  3. public class User {
  4. 	private String username;
  5. 	private String password;
  6. 	public String getUsername() {
  7. 		return username;
  8. 	}
  9. 	public void setUsername(String username) {
  10. 		this.username = username;
  11. 	}
  12. 	public String getPassword() {
  13. 		return password;
  14. 	}
  15. 	public void setPassword(String password) {
  16. 		this.password = password;
  17. 	}
  18. 	
  19. 	public User() {
  20. 		// TODO Auto-generated constructor stub
  21. 	}
  22. 	public User(String username, String password) {
  23. 		super();
  24. 		this.username = username;
  25. 		this.password = password;
  26. 	}
  27. 	@Override
  28. 	public String toString() {
  29. 		return "User [username=" + username + ", password=" + password + "]";
  30. 	}
  31. }

UserAction.java代码块：

  1. package com.zking.web;
  2.  
  3. import java.util.HashMap;
  4. import java.util.Map;
  5.  
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8.  
  9. import com.zking.entity.User;
  10. import com.zking.framework.ActionSupport;
  11. import com.zking.framework.ModelDriver;
  12. import com.zking.util.R;
  13. import com.zking.util.ResponseUtil;
  14.  
  15. public class UserAction extends ActionSupport implements ModelDriver<User>{
  16.  
  17. 	private User user = new User();
  18. 	
  19. 	写一个方法处理前台的请求
  20. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
  21. 		Map<String, Object> map = new HashMap<String, Object>();
  22. 		if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
  23. //			登录成功
  24. 			map.put("code", 200);
  25. 			map.put("msg", "登录成功");
  26. 		}
  27. 		else {
  28. //			登录失败
  29. 			map.put("code", 0);
  30. 			map.put("msg", "账户密码有误");
  31. 		}
  32. 		try {
  33. 			ResponseUtil.writeJson(resp, map);
  34. 		} catch (Exception e) {
  35. 			// TODO Auto-generated catch block
  36. 			e.printStackTrace();
  37. 		}
  38. 		return null;
  39. 	}

ResponseUtil：响应工具类  代码块：

  1. package com.zking.util;
  2.  
  3. import java.io.PrintWriter;
  4.  
  5. import javax.servlet.http.HttpServletResponse;
  6.  
  7. import com.fasterxml.jackson.databind.ObjectMapper;
  8.  
  9. public class ResponseUtil {
  10.  
  11. 	public static void write(HttpServletResponse response,Object o)throws Exception{
  12. 		response.setContentType("text/html;charset=utf-8");
  13. 		PrintWriter out=response.getWriter();
  14. 		out.println(o.toString());
  15. 		out.flush();
  16. 		out.close();
  17. 	}
  18. 	
  19. 	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
  20. 		ObjectMapper om = new ObjectMapper();
  21. //		om.writeValueAsString(o)浠ｈ〃浜唈son涓�
  22. 		write(response, om.writeValueAsString(o));
  23. 	}
  24. }

在去前台接收请求：

  1. <script type="text/javascript">
  2.     	layui.use(['jquery','layer'],function(){
  3.     		var $ = layui.jquery;//es6
  4. 			// 給登录按钮添加点击事件
  5.     		$("#login").click(function(){
  6.     			$.ajax({
  7.     				url:"${pageContext.request.contextPath}/user.action?methodName=login",
  8.     				dataType:'json',
  9.     				data:{
  10.     					username:$("#username").val(),
  11.     					password:$("#password").val()
  12.     				},
  13.     				success:function(data){
  14.                         console.log(data);
  15.     				}
  16.     			})
  17.     		})
  18.     	});
  19.     </script>

在去配置文件里配置user     mvc.xml代码块：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <config>
  3. 	<action path="/blog" type="com.zking.web.BlogAction">
  4. 		<forward name="list" path="/blogList.jsp" redirect="false" />
  5. 		<forward name="toList" path="/blog.action?methodName=list"
  6. 			redirect="true" />
  7. 		<forward name="toEdit" path="/blogEdit.jsp" redirect="false" />
  8. 	</action>
  9.  
  10. 	<action path="/user" type="com.zking.web.UserAction">
  11. 	</action>
  12.  
  13. </config>

运行一下如图所示：

  接着我们登陆成功是不是就有一个笑脸我们来实操一下：回到官网找到弹出层，引以为傲的弹出层

 然后我们继续完成前台的操作：

  1.  <script type="text/javascript">
  2.     	layui.use(['jquery','layer'],function(){
  3.     		var $ = layui.jquery
  4.     		,layer = layui.layer;//es6
  5. 			// 給登录按钮添加点击事件
  6.     		$("#login").click(function(){
  7.     			$.ajax({
  8.     				url:"${pageContext.request.contextPath}/user.action?methodName=login",
  9.     				dataType:'json',
  10.     				data:{
  11.     					username:$("#username").val(),
  12.     					password:$("#password").val()
  13.     				},
  14.     				success:function(data){
  15.   //  					console.log(data);
  16.   						if(data.code==200){
  17.   							layer.alert(data.msg, {icon: 1});
  18.   						}
  19.   						else{
  20.   							layer.alert(data.msg, {icon: 2});
  21.   						}
  22.     				}
  23.     			})
  24.     		})
  25.     	});
  26.     </script>

运行结果如图所示：

注意这个错误不是错误：

五、优化UserAction

在UserAction.java，在map里面我每一个请求，要不就是要建一个map集合和list集合，建这个的目的我们是不是要向前台展示数据展示字符串吧，能不能简化一点：有一个工具类我们来看一下

R.java代码块：

  1. package com.zking.util;
  2.  
  3. import java.util.HashMap;
  4.  
  5. public class R extends HashMap{
  6. 	public R data(String key, Object value) {
  7. 		this.put(key, value);
  8. 		return this;
  9. 	}
  10. }

UserAction.java简化完是这样的

  1. package com.zking.web;
  2.  
  3. import java.util.HashMap;
  4. import java.util.Map;
  5.  
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8.  
  9. import com.zking.entity.User;
  10. import com.zking.framework.ActionSupport;
  11. import com.zking.framework.ModelDriver;
  12. import com.zking.util.R;
  13. import com.zking.util.ResponseUtil;
  14.  
  15. public class UserAction extends ActionSupport implements ModelDriver<User>{
  16.  
  17. 	private User user = new User();
  18. 	
  19. 	
  20. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
  21. 		try {
  22. 			if("zhangsan".equals(user.getUsername())&&"123456".equals(user.getPassword())) {
  23. 				ResponseUtil.writeJson(resp, new R()
  24. 						.data("code",200)
  25. 						.data("msg","登录成功"));
  26. 			}
  27. 			else {
  28. 				ResponseUtil.writeJson(resp, new R()
  29. 						.data("code",0)
  30. 						.data("msg","账户密码有误"));
  31. 			}
  32. 		} catch (Exception e) {
  33. 			// TODO Auto-generated catch block
  34. 			e.printStackTrace();
  35. 		}
  36. 		return null;
  37. 	}
  38. 	
  39. 	@Override
  40. 	public User getModel() {
  41. 		// TODO Auto-generated method stub
  42. 		return user;
  43. 	}
  44.  
  45. }

六、主页搭建

 参考地址：http://layui.org.cn/demo/admin.html 

一行代码：就是我们登陆成功然后就跳转页面：

最终的login.jsp点代码块：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.     <!-- 导入这个文件 -->
  4.     <%@include file="common/header.jsp" %>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css" type="text/css" media="all">
  10. <link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css" type="text/css" media="all">
  11. <title>Insert title here</title>
  12. <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>
  13.  
  14. </head>
  15. <body class="tx-login-bg">
  16.      <div class="tx-login-box">
  17.          <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
  18. 	<ul class="tx-form-li row">
  19. 		<li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li>
  20. 		<li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li>
  21. 		<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>
  22. 		<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
  23. 		<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
  24. 	</ul>
  25.     </div>
  26.     
  27.     <script type="text/javascript">
  28.     	layui.use(['jquery','layer'],function(){
  29.     		var $ = layui.jquery
  30.     		,layer = layui.layer;//es6
  31. 			// 給登录按钮添加点击事件
  32.     		$("#login").click(function(){
  33.     			$.ajax({
  34.     				url:"${pageContext.request.contextPath}/user.action?methodName=login",
  35.     				dataType:'json',
  36.     				data:{
  37.     					username:$("#username").val(),
  38.     					password:$("#password").val()
  39.     				},
  40.     				success:function(data){
  41.   //  					console.log(data);
  42.   						if(data.code==200){
  43.   							layer.alert(data.msg, {icon: 1});
  44.   							location.href='main.jsp';
  45.   						}
  46.   						else{
  47.   							layer.alert(data.msg, {icon: 2});
  48.   						}
  49.     				}
  50.     			})
  51.     		})
  52.     	});
  53.     </script>
  54.          
  55.          
  56.  </body>
  57. </html>

 在建一个main.jsp：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10.  
  11. 主界面搭建
  12. </body>
  13. </html>

运行结果为：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/446726
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号