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

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

（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的【开发使用文档】