本篇博客就需要明白三点：

（1）前端的东西，贵在【没事多试试】；多试试，看看效果，反复多次，总能看到希望的效果啦。没什么意思，没必要每个细节都深记；在实际中遇到一个业务的时候，多看官方文档的例子，多试试，总能完成这个需求。

（2）总之，LayUI用起来很简单，我们只需要根据LayUI的官方文档，去灵活使用他提供的那些CSS的类就可以了。对比着LayUI的【开发使用文档】，对比着按需选用就好了。

（3）忘记某些HTML和CSS的东西可以参考 HTML&CSS（网页搭建与JavaWeb基础）；JavaScript（网页搭建与JavaWeb基础）；遇到想不起来的，当成字典快速去查就好了；

一：LayUI框架简介

1.基本元素和组件

（1）基本元素

（2）组件

2.LayUI的【开发使用文档】

二：登录页简介；使用LayUI开发登录页；

1.登录页简介

2.使用LayUI开发登录页

（1）下载LayUI

（2）把LayUI添加到项目中

（3）预准备项：IDEA热部署设置

（4）创建登录页的HTML（重点！！！）

一：LayUI框架简介

LayUI框架是目前在中国市场上最火爆的国产开源前端框架。即使不是一个前端大佬，使用LayUI，也可以通过简单的配置以及非常少的代码开发一个还算不错的页面。

访问LayUI的官网：https://www.layui.com/：

（2021-12-8：layui停止服务了，原先的网站已无法访问了，可以访问layui的镜像：Layui - 经典开源模块化前端 UI 框架layui 是一套开源的 Web UI 解决方案，其内部采用的是自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。https://layui.itze.cn/）

LayUI是一个完整的页面元素和组件的集合体，他提供了非常多的功能：

LayUI提供了很多基本元素和组件。部分内容简介如下：

1.基本元素和组件

（1）基本元素

比如按钮这个基本元素：

其他的基本元素情况基本也是这样，要想使用某个基本元素的效果，只需要引入对应的CSS就行了。

（2）组件

比如弹出层这个组件

下面引入CSS类，JavaScript代码的流程都比较简单，后续会详细介绍。

其他的组件情况基本也是这样，要想使用某个组件的效果，只需要引入对应的CSS，额外增加JavaScript代码就可以了。

然后，着重说明一下，组件中的【数据表格】自动支持Ajax请求。

2.LayUI的【开发使用文档】

二：登录页简介；使用LayUI开发登录页；

1.登录页简介

（1）登录页的背景色是灰色；（2）包含一个标题【慕课网办公OA系统】；（3）一个用户名输入框，一个密码加密框；（4）一个登录按钮；

2.使用LayUI开发登录页

（1）下载LayUI

然后，就会下载这个压缩包：

解压，查看内容：

注解：

（2）把LayUI添加到项目中

（3）预准备项：IDEA热部署设置

热部署：以前这儿IntelliJ IDEA开发工具入门七：创建Web工程；启动Web应用；设置上下文路径；热部署设置；创建Servlet；项目打包（war）发布；【这篇博客十分重要！！！】介绍过热部署。

这儿重复啰嗦一下，同理：

设置好了之后，如果修改了资源，要进行刷新时候，只需要按【Shift+F9】或者点击右上角的debug：

（4）创建登录页的HTML（重点！！！）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>慕课网办公OA系统</title><link rel="stylesheet" href="resources/layui/css/layui.css"><style>body{background-color: #F2F2F2;}.oa-container {/*background-color: white;*/position: absolute;width: 400px;height: 350px;top: 50%;left: 50%;padding: 20px;margin-left: -200px;margin-top: -175px;}#usename,#password {text-align: center;font-size: 24px;}</style>
</head>
<body>
<div class="oa-container"><h1 style="text-align: center;margin-bottom: 20px">慕课网办公OA系统</h1><form class="layui-form"><div class="layui-form-item"><input type="text" id="usename" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button></div></form>
</div>
</body>
</html>

说明：

（1）引入layui.css样式表

（2）让登录框所在的div处于页面的正中间

（3）登录框的标签嵌套结构

（4）利用LayUI的【开发使用文档】的说明：我们是参考着他的案例，没有全部照抄，而是使用了阉割版，选中了部分；

PS：前端的东西，贵在【没事多试试】；多试试，看看效果，反复多次，总能看到希望的效果啦。没什么意思，没必要每个细节都深记；在实际中遇到一个业务的时候，多看官方文档的例子，多试试，总能完成这个需求。

（5）<button>标签的特别说明

（6）完善项目：输入的用户名和密码在输入框中居中，并且让字体大一点

总之，LayUI用起来很简单，我们只需要根据LayUI的官方文档，去灵活使用他提供的那些CSS的类就可以了。

效果：

OA系统八：用户登录一：基于LayUI框架开发登录页；相关推荐

基于layui框架的登录验证
基于layui框架的登录验证开发工具:idea,tomcat,ssm框架,以及引入的layui 一些关于框架的搭建在此略过,以后可能会发布一些相关文章这里只改变了背景图片,是一个现成的页面 //f ...
LayUi会议OA系统之用户管理
目录一.后端二.前端今天继续跟大家分享LayUi的知识以及实现会议OA系统的用户管理. 涉及到的知识点主要是LayUi的数据表格和弹出层,用来实现用户管理的增删改查. 一.后端我们以t_oa_ ...
设计OA系统的用户-角色-权限分配
转载:http://www.cnblogs.com/jsping/archive/2013/01/23/2872972.html 设计OA系统的用户-角色-权限分配一,前言本文主要讲述在OA系统 ...
基于LayUI框架的Jsp日记本系统
基于LayUI框架的Jsp日记本系统先看几张效果图下载地址: 链接: https://pan.baidu.com/s/1Aa_qUcpi2_B4-QIpl4FWGw 提取码: 5r5k
基于springboot框架开发的办公自动化OA系统
项目描述本系统是一个OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目,mysql底层数据库,前端采用freemarker模板引擎,Bootstrap作为前端UI ...
java基于springboot框架开发的办公自动化OA系统
项目描述本系统是一个OA办公自动化系统,使用Maven进行项目管理,基于springboot框架开发的项目,mysql底层数据库,前端采用freemarker模板引擎,Bootstrap作为前端UI ...
04 | 后台登录：基于账号密码的登录方式(上)
你好, 我是程序猿零壹. 在上一篇文章如何快速部署一个基于laravel框架开发的网站中,我们一起使用laravel框架快速部署了一个网站.但是目前网站上只有一个默认的页面,显得有点孤单寂寞冷,是时候 ...
基于SSM框架开发的网上图书商城系统附带详细运行指导视频
项目描述:这是一个基于SSM框架开发的网上图书商城系统.首先,这个项目页面简洁清爽,代码注释详尽,易于理解和学习.其次,这个项目涉及到Shiro整合JWT.秒杀功能所具备的基本要求(限流.乐观锁.接口 ...
基于JFinal框架开发的企业办公系统-JFinalOA v1.1源码
简介: JFinalOA 是基于 JFinal 框架开发的企业办公系统. 使用框架介绍: JFinal 4.6+enjoy模版引擎 Shiro控制权限 flowable流程引擎 BootStrap M ...

OA系统八：用户登录一：基于LayUI框架开发登录页；

一：LayUI框架简介

1.基本元素和组件

（1）基本元素

（2）组件

2.LayUI的【开发使用文档】

二：登录页简介；使用LayUI开发登录页；

1.登录页简介

2.使用LayUI开发登录页

（1）下载LayUI

（2）把LayUI添加到项目中

（3）预准备项：IDEA热部署设置

（4）创建登录页的HTML（重点！！！）

OA系统八：用户登录一：基于LayUI框架开发登录页；相关推荐

最新文章

热门文章