布局简单的登陆页面

作业要求

练习测试题目
1.布局简单的登录页面，并完成用户登录操作。
提示：1）添加简单必要的登录表单验证。例如：用户账号、密码或验证码等是否为空，是否输入非法字符。
2）前后台交互完成用户登录功能。
3）创建数据库表—userinfo，包含姓名、密码、是否在线、最后一次在线时间等信息。
4）登录条件判断：
a.若用户账号不存在，给出提示：“该账号不存在，请重新输入！”；
b.若用户账号存在，但密码不匹配，给出提示：“用户密码有误，请重新输入！”；
c.若当前用户为在线状态，或最后一次在线时间与当前时间差<5分钟，则登录失败，给提示“当前用户在线！无法重复登录！”。
5）关于登录过程中的密码安全问题，采用合理的解决方式。例如：密码加密、时间戳判断、加盐处理等。
6）采用session或cookie完成用户会话存储。
7）登录成功后，定时更新状态。进入主页面，采用定时器每隔5分钟更新一个用户在线状态及用户最后一次在线时间。
请根据提示完成以上功能，也可自行扩充。

创建数据库

数据库中的布尔类型

bit

数据库的三种时间类型

Mysql中经常用来存储日期的数据类型有三种：Date、Datetime、Timestamp。
【1】Date数据类型：用来存储没有时间的日期。Mysql获取和显示这个类型的格式为“YYYY-MM-DD”。支持的时间范围为“1000-00-00”到“9999-12-31”。
【2】Datetime类型：存储既有日期又有时间的数据。存储和显示的格式为 “YYYY-MM-DD HH:MM:SS”。支持的时间范围是“1000-00-00 00:00:00”到“9999-12-31 23:59:59”。
【3】Timestamp（时间戳）类型：也是存储既有日期又有时间的数据。存储和显示的格式跟Datetime一样。支持的时间范围是“1970-01-01 00:00:01”到“2038-01-19 03:14:07”。
原文链接：link.
参考：link.
link.
link.

Datatime和Timestamp比对，除了特殊情况，通常选Timestamp，因为它的空间效率更高，且能储存时区信息。
存储比秒精度更高的日期和时间值，可以使用Bigint的时间戳，或者使用Double存储秒之后的小数部分。

创建数据库语句

create table userinfo(
userId int primary key auto_increment,
userName varchar(20) not null,
userPwd varchar(20) not null,
isOnline bit,
loginTime timestamp not null default current_timestamp on update current_timestamp
);

default current_timestamp
表示当插入数据的时候，该字段默认值为当前时间

on updata current_timestamp
表示每次更新这条数据的时候，该字段都会更新成当前时间

这两个操作是mysql数据库本身在维护，所以可以根据这个特性来生成【创建时间】和【更新时间】两个字段，且不需要代码来维护

时间戳

默认时间戳(Timestamp)类型的取值范围为’1970-01-01 00:00:01’ UTC 至’2038-01-19 03:14:07’ UTC，数据精确到秒级别，该取值范围包含约22亿个数值，因此在MySQL内部使用4个字节INT类型来存放时间戳数据。

1、在存储时间戳数据时，先将本地时区时间转换为UTC时区时间，再将UTC时区时间转换为INT格式的毫秒值(使用UNIX_TIMESTAMP函数)，然后存放到数据库中。
2、在读取时间戳数据时，先将INT格式的毫秒值转换为UTC时区时间(使用FROM_UNIXTIME函数)，然后再转换为本地时区时间，最后返回给客户端。

安全性处理

若不设置加密，报文中数据以明文传输，网页安全性得不到保障。

数据库中，数据也以明文形式保存，缺乏安全性保障。

密码加密

在HTTPS还没有普及的时候，前端采用HTTP协议，登录用户名和密码在不做任何控制的情况下是明文传输的。

密码加密仅仅只是防止明文传输，加密效果取决于key，而key对于前台是透明的。

参考：http协议及前端加密方式整理

前端加密库：crypto.js

CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。包括：
MD5
SHA-1
SHA-256
AES
Rabbit
MARC4
HMAC
HMAC-MD5
HMAC-SHA1
HMAC-SHA256
PBKDF2
官方文档：CryptoJS
参考：JS中利用CryptoJS进行MD5/SHA256/BASE64/AES加解密的方法与示例
and crypto 廖雪峰的官方网站

使用命令行安装

在command命令行中安装：node install crypto-js

在安装目录下，有package-lock.json文件和node_modules文件夹。package-lock.json中crypto.js版本等信息。

JS中调用

<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>

AES对称加密

参考：AES加密算法概述(前端登录加密)
and AES对称加密算法详解：第二篇：对称加密及AES加密算法
and AES加密算法的详细介绍与实现

    let keys = "shxn49fjr759cngi";//16位密钥自定
    let encrypted = CryptoJS.AES.encrypt("hello",keys).toString();
    console.log("加密结果 AES："+encrypted);
    let decrypted = CryptoJS.AES.decrypt(encrypted,keys).toString(CryptoJS.enc.Utf8);
    console.log("解密结果 AES："+decrypted);

CryptoJS.AES.encrypt的两个参数分别为加密原文和密钥。
字符串类型的密钥使用时要UTF-8处理。

使用AES对称加密的前端加密，后端解密，参考前后端AES加密解密,前端使用CryptoJS,后端Java实现。

但是使用AES对称加密，密钥写在前台js文件中，可以通过网页查看器显示。通过密钥解密密文获得原文，其他密码加密方式也使用字典破解等方式解密（尤其是弱密码）因此密码加密并不安全。参考在线加密/解密。

若要实现在网页查看器中不可查，还要对js文件进行加密。

PBKDF2加密

迭代加密，更为安全的密码加密方法。

RSA非对称加密

参考：用户登录对密码进行加密

HTTPS传输加密

加盐处理

参考："加盐"到底加的是什么 and 用户登录相关安全 密码加密

项目源码

源码：Java及jsp的简单布局登录