编写独立的登录页（替换框架自带登录页）

1.需求场景

为了满足客户个性化的需求，很多情况下需要重新设计登录页，这样可以更契合客户所在行业和背景。

如果要替换登录页，就必须要考虑尽可能的方便，尽量少的耦合代码。

2.解决方案

2.1.登录功能介绍

2.1.1.登录界面

引入框架依赖包后，就有默认的登录页面及功能。默认登录页效果如下。

2.1.2.登录页面代码

该登录页的代码如下：

<%@ page language="java" contentType="text/html;charset=UTF-8"
		 pageEncoding="UTF-8" %>
<%--
  ~ *************************************************************
  ~ 文件：login.jsp  模块：QiDianAdminTemplate  项目：TaiJiAdmin
  ~ 当前修改时间：2020年03月10日 12:27:29
  ~ 上次修改时间：2020年03月10日 12:26:28
  ~ 作者：大路
  ~ Copyright (c) 2018-2020  
  ~ *************************************************************
  --%>




	
	
	
	
	
	
	
	
	
	

	
	



	


	
${noCodeConfig.systemName}
	

		

			
${noCodeConfig.companyName}
			

				

					

						账 号
						

							
						
					
					

						密 码
						

							
						
					
					

						
						

							

						
					
				
			
		
	

2.1.3.登录提交数据

点击登录（或者回车）后，提交到服务端的数据如下。

提交的数据有：

• 提交地址：login.do?action=login
• screenWidth：屏幕分辨率宽度。登录JS方法自动获取，无需处理。
• screenHeight：屏幕分辨率高度。登录JS方法自动获取，无需处理。
• username：登录账号。表单输入。
• password：登录密码。表单输入。

2.1.4.登录返回处理

登录成功后，会向本地浏览器cookie中，写入username和服务端返回的token。本地写入的cookie信息如下。整个写入过程，是JS的登录方法自动完成的，无需单独处理。

• username：登录账号。
• token：登录成功后，服务端返回的随机token。每次登录后，都会生成一个新的。后续的数据提交验证，都以token和username为依据。

2.1.5.登录整体流程

整个登录过程详述如下：

1. 登录页面需有登录表单，表单需赋一个id值。表单中需有username和password输入框。点击表单提交按钮，调用ncUserLogin()方法，方法参数为表单的id值。
2. ncUsesrLogin()方法会自动获取屏幕分辨率，以及自动获取表单数据，传递到后台服务端。
3. ncUserLogin()方法会自动根据服务端返回结果，进行分别处理。如果是失败，则显示失败提示；如果是成功，则会跳转到登录后主页。同时，成功后，还会向本地浏览器写入cookie信息。

2.2.替换方案

了解了登录过程和原理后，要替换为自定义的登录页面，就非常简单了。

2.2.1.编写同名登录页面

框架自带的登录页面，是login.jsp文件，我们只需要在项目中，创建同文件夹同名文件，即可覆盖框架的文件。登录页面文件路径，如下图所示。路径为：webapp/WEB-INF/view/login.jsp。

2.2.2.引入关键文件

编写好自定义登录页面的样式布局后，需要引入和登录相关的JS和CSS文件。引入的文件代码，如下所示。文件的作用，在代码中有说明。

1. css文件在head头部中引入。对提示框的样式进行设定。
2. js文件可在body结束前引入。引入4个JS文件，作用分别是jQuery、提示框功能、本地浏览器写cookie功能、登录功能。

 

2.2.3.调用登录方法

文件都成功引入后，接下来对登录的点击事件，只需要调用ncUserLogin()方法即可。也可对表单的回车进行响应，回车后调用登录功能。

如下代码所示。表单赋值id为loginForm，然后对回车事件和点击事件，都调用ncUserLogin('loginForm')即可。

3.应用样例

如果要替换为下面的登录页面，如下图所示。

按照上面的步骤操作后，回车密码错误，提示效果如下。正确则进入首页。