java学生奖学金管理系统_EasyUI+JavaWeb奖助学金管理系统[6]-登录功能实现

1. 本章任务

目前已经实现了数据库表结构搭建、项目构建、数据库实体类编写、数据库操作类编写。

接下来可以实现登录功能了，还是需要先登录，才能对各角色的功能页面进行相应的展示和管理。

PS：本章内容可以说是教程中最重要的1章，因为封装了前后端交互的方式，我们来一步一步详细讲解下，如果理解了本章，后续应该没多大难度了。

2. 开发流程

首先需要在登录页面开发登录表单，点击表单后跳转Servlet处理登录请求。

Servlet中调用UserDao判断是否登录成功。

如果登录成功，则将登录用户信息加入Session备用，并且跳转主页面。

如果登录失败，返回错误提示信息。

3. 开发登录页面表单

3.1 新建登录页

首先新建index.html作为登录页，注意我们通过ajax请求后端数据的话，实际上是不需要再使用JSP这种模板技术了。

index.html.html

注意编码采用UTF-8以支持中文。

3.2 引入EasyUI支持

由于我们使用EasyUI框架，而EasyUI又依赖于jQuery，所以我们引入相关的样式css文件及js文件。

有了css和js引入，我们就可以在网页中使用EasyUI封装好的样式和js方法了。

3.3 开发登录表单

需要通过登录名和密码登录。

用户名:

type="text" id="loginName" data-options="required:true">

密码:

type="text" id="password" data-options="required:true">

data-options="iconCls:'icon-ok'">登录

注意，我们通过easyui-panel、easyui-textbox等EasyUI提供的样式类，为我们的页面标签设定了EasyUI风格。

3.4 微调样式

虽然已经使用EasyUI但是部分细节还是需要使用css调整下，注意有个原则是尽量使用EasyUI提供的样式。

width: 500px;

height: 500px;

margin: 0 auto;

padding-top: 200px;

}

.input-box{

margin: 32px 0px 0px 128px;

}

.input-box label{

display: inline-block;

width: 64px;

}

3.5 编写登录方法

最后我们就需要通过js编写登录方法了，由于在登录按钮上已经绑定了οnclick="loginAction()"，所以我们编写loginAction方法即可。

function loginAction() {

console.log("loginAction");

var param = {

loginName : $("#loginName").val(),

password : $("#password").val()

}

$.ajax({

url : "CoreServlet?method=login",

type : "post",

dataType : "json",

data : param,

success : function(res) {

console.log(res);//暂时打印后端返回结果

},

});

}

注意：