login.jsp
<%--
Created by IntelliJ IDEA.
User: WDD
Date: 2019/6/14
Time: 20:44
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图书管理系统登录</title>
<link rel="stylesheet" href="${APP_PATH}/css/layui.css"> //这里link表示的是链接的意思，rel是relation关系的意思，stylesheet是样式表的意思，href表示链接的位置
<link rel="stylesheet" href="${APP_PATH}/css/style.css">
<link rel="stylesheet" href="${APP_PATH}/css/modules/layer/default/layer.css">
<script src="${APP_PATH}/js/layui.js"></script>
</head>
<body>
<div class="login-main">
<header class="layui-elip">图书管理系统登录</header> //layui-elip 用于单行文本溢出省略
<form class="layui-form" action="${APP_PATH}/library/list.action" method="post"> //class="layui-form"一般写在父级标签，用来标识一个表单元素块，可以实现装饰表单，并通过内置的form来完成互交。
<div class="layui-input-inline"> //对于母<div>的子元素水瓶排版
<input type="text" name="name" required lay-verify="required" placeholder="学号" autocomplete="off" // lay-verify="required"，一般用于Input标签，他的作用是必填，当你直接点击提交按钮是，就会出现
，以弹框的方式弹出，省略了非空判断
前面一个required 属性是一个布尔属性。required 属性规定必需在提交表单之前填写输入字段。
在input中autocomplete属性是默认开启的。autocomplete属性规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，是基于之前输入过的值。off禁用
class="layui-input">
</div>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"
class="layui-input">
</div>
<div class="layui-input-inline">
<select name="access" id="access" lay-verify="required">
<option value="">请选择权限</option> // option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。
<option value="0" >管理员</option>
<option value="1" >读者</option>
</select>
</div>
<div class="layui-input-inline login-btn">
<button lay-submit lay-filter="login" class="layui-btn">登录</button> //lay submit这个标记的作用是使用内置form的互交，没有它就不能正常提交了， lay-filter="login"这个标记的作用就相当于给他取个名字
</div>
<hr/>
<p><a href="${APP_PATH}/toRegister.htm" class="fl">立即注册</a><a href="javascript:;" onclick="forgetpsw();" class="fr">忘记密码？</a></p> // href="javascript:; 执行一段空白的javascript语句，返回空或者false值，从而防止链接跳转。跟当前a标签无关，
这段代码始终都会执行。
</form>
</div>
<script type="text/javascript">
layui.use(['form','layer','jquery'], function () { // layui.use 是用来加载使用layui的内置模块用到form的话，就在里面加'form'
// 操作对象
var form = layui.form;
var $ = layui.jquery; //引用jquery
form.on('submit(login)',function (data) { //submit是提交，括号里的是你自定义的方法名字（就是方法），前面有介绍到。
$.ajax({ //$.ajax() data{} 异步请求的一种写法-----拼接URL
url:'${APP_PATH}/doLogin.do', //数据提交路径
data:data.field, //data.field这个方法是用来获取你表单里输入的值
dataType:'json', //是让data.field以json字符串的形式显示出来
type:'post',
success:function (data) {
if (data.status == '0'){
location.href = "${APP_PATH}/library/index.do";
}else if (data.status == '1') {
location.href = "${APP_PATH}/library/frontIndex.htm";
}else if (data.status == '2'){
layer.msg(data.message);
}else{
//服务器异常
layer.msg(data.message);
}
}
})
return false;
})
});
function forgetpsw(){
layer.msg('联系管理员(1710031565)或到图书馆进行重置');
}
</script>
</body>
</html>
login.jsp用到的技术
1.layui框架
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
2.AJAX
AJAX是一种客户端web开发技术，用于生成交互式web应用程序，ajax是一种开发应用程序的方法，它结合了下面的功能，使用javascript将他们组合在一起。
（1）基于XHTML和CSS标准的演示
（2）通过文档对象模型与页面交互
（3）与XML和XSLT的数据交换
（4）使用XML HTTP 请求进行异步数据检索
AJAX是技术的组合，而不是单一的技术。HTML和CSS标记并设置信息样式，然后通常使用javascript访问跨平台和对象交互语言。JavaScript依次动态显示信息，允许用户与之交互，此过程在浏览器和服务器之间异步交换数据。
然而，异步通信是 AJAX 的最大优势。AJAX 涵盖了广泛的 Web 技术，这些 Web 技术用于在后台与服务器通信时启动 Web 应用程序。这对用户有利，因为它不会干扰或中断他或她正在使用的网页。JavaScript 不是使用 AJAX 编程的唯一客户端脚本语言; VBScript 和其他语言都有这种功能，但 JavaScript 是最受欢迎的。
尽管它的名字暗示，AJAX 既不必以异步方式运行（在后台），也不需要使用 XML。实际上，JavaScript 对象表示法更常用。
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
3.<div> 中的id和class
id和class都是属性，其中区别
（1）id具有唯一性，在一个网页中，同一个命名只能用一次。而class命名的类可以在一个网页中重复使用
（2）css中的区别。id在css代码中是以"#"井符号开头命名的类，而class在css代码中是以“.”点开头命名的类。
一般比较重要的部分，比较特别的盒子使用id，而小结构、小局部或不重要的使用class.
4.HTML中的label标签
<label>标签为input元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。 注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
5.jquery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。所以在网站设计中使用jQuery可以写更少的代码实现更多的功能。而且它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。即是辅助JavaScript开发的库。
jquery 是插件，供页面调用后台，页面判断，页面动作处理使用
浙公网安备 33010602011771号