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

    一、什么是layui？

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

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

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

    适用范围

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

    案例一

    效果展示

    如何实现实现扩展模块？ 

    1. /**
    2.   扩展一个test模块
    3.   方法，定义在function前面是方法
    4. **/      
    5.  
    6. layui.define(function(exports){ 
    7.   var obj = {
    8.     hello: function(str){//hello是方法定义的方法
    9.       alert('Hello '+ (str||'test'));
    10.     }
    11.   };
    12.   
    13.   //输出test接口
    14.   exports('test', obj);
    15. });

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

    layui实现代码

    1.

    java代码子Action代码

    1. public class LoginAction extends AbstractorAction implements ModelDrive{
    2.  
    3. 	private User u=new User();
    4. 		
    5. 	@Override
    6. 	public Object getModel() {
    7. 		return u;
    8. 	}
    9. 	public void login(HttpServletRequest req,HttpServletResponse resp) throws IOException {
    10. 		
    11. 		resp.setContentType("appliaction/json;charset=utf-8");
    12. 		Map map=new HashMap<>();
    13. 		if("admin".equals(u.getUsername()) && "123".equals(u.getPwd())) {
    14. 			map.put("code", 1);
    15. 			map.put("mag", "登陆成功");
    16. 		}else {
    17. 			map.put("code", -1);
    18. 			map.put("mag", "账号或者密码不正确");
    19. 		}
    20. 		ObjectMapper mapper=new ObjectMapper();
    21. 		try {
    22. 			String json = mapper.writeValueAsString(map);
    23. 			PrintWriter out = resp.getWriter();
    24. 			out.write(json);
    25. 			out.flush();
    26. 			out.close();
    27. 		} catch (Exception e) {
    28. 			e.printStackTrace();
    29. 		}
    30. 		
    31. 	}

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

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%
    4.     request.setAttribute("jdlj", request.getContextPath());//获取项目上下文对象（/layui_02）
    5. %>
    6. <link rel="stylesheet" href="js/layui/css/layui.css">
    7. <link rel="stylesheet" href="css/login.css">
    8.  
    9. <link rel="stylesheet" href="css/iconfont.css"
    10. 	type="text/css" media="all">
    11. <link rel="stylesheet" href="css/login.css"
    12. 	type="text/css" media="all">
    13. 	
    14. <script src='js/layui/layui.js' >script>
    15.  
    16. <script>
    17. var jdlj="${jdlj}";
    18. script>

     HTML代码

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <html>
    4. <head>
    5. <meta name="viewport"
    6. 	content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    9. <meta name="renderer" content="webkit">
    10. <title>会员登录-演示网站title>
    11. <meta http-equiv="Content-Language" content="zh-CN">
    12.  
    13. <style>
    14. body {
    15. 	color: #;
    16. }
    17.  
    18. a {
    19. 	color: #;
    20. }
    21.  
    22. a:hover {
    23. 	color: #;
    24. }
    25.  
    26. .bg-black {
    27. 	background-color: #;
    28. }
    29.  
    30. .tx-login-bg {
    31. 	background: url(images/bg.jpg) no-repeat 0 0;
    32. }
    33. style>
    34.  
    36. <%@ include file='/common/Layui.jsp'%>
    38.  
    39. head>
    40. <body class="tx-login-bg">
    41. 	<div class="tx-login-box">
    42. 		<div class="login-avatar bg-black">
    43. 			<i class="iconfont icon-wode">i>
    44. 		div>
    45. 		<ul class="tx-form-li row">
    46. 			<li class="col-24 col-m-24"><p>
    47. 					<input type="text" id="username" placeholder="登录账号"
    48. 						class="tx-input">
    49. 				p>li>
    50. 			<li class="col-24 col-m-24"><p>
    51. 					<input type="password" id="password" placeholder="登录密码"
    52. 						class="tx-input">
    53. 				p>li>
    54. 			<li class="col-24 col-m-24"><p class="tx-input-full">
    55. 					<button id="login" class="tx-btn tx-btn-big bg-black">登录button>
    56. 				p>li>
    57. 			<li class="col-12 col-m-12"><p>
    58. 					<a href="#" class="f-12 f-gray">新用户注册a>
    59. 				p>li>
    60. 			<li class="col-12 col-m-12"><p class="ta-r">
    61. 					<a href="#" class="f-12 f-gray">忘记密码a>
    62. 				p>li>
    63. 		ul>
    64. 	div>
    65. body>
    66. html>


     

  • 相关阅读:
    TS进阶之infer
    【PWN · ret2text | RISC-V异构】[2023 羊城杯]login
    【汇编语言】3.汇编语言程序
    XCKU5P-2FFVB676E 赛灵思FPGA可编程逻辑芯片器件 XILINX
    Ribbon负载均衡
    2022的七夕，奉上7个精美的表白代码，同时教大家快速改源码自用
    最新全国省市区县乡镇街道行政区划数据提取(2022年)
    高等工程数学 —— 第五章 （4）罚函数法
    MySQL数据库管理基操
    【视频】k8s套娃开发调试dapr应用 - 在6月11日【开源云原生开发者日】上的演示
  • 原文地址：https://blog.csdn.net/Bugxiu_fu/article/details/125994369