最简单的网页登录注册功能讲解及其实现

前言

最近打算做一个网页登录的练习，今天撸一个最简单的demo，记录一下学习的过程。

结构

实现一个网页最基本的注册与登录功能，我们需要

1. mysql存储用户账户信息
2. 编写注册html页面
3. 编写后台注册程序
4. 编写登录html页面
5. 编写后台登录验证程序

下面给出最简单的结构

创建数据库存储账户信息

使用mysql数据库来创建一个存储用户数据的数据库。

我们来到mysql的控制台。这里我使用的是xampp带的mysql。打开mysql控制台的方法：

1. 以管理员模式运行cmd
2. cd /d 路径 命令进入mysql的bin目录下
3. 输入命令mysql -u 用户名 -p
4. 输入密码
5. 登录成功

进入数据库

mysql -u 用户名 -p
输入密码

创建数据库，我们创建一个名叫mydb的数据库，并且选择这个数据库

create database mydb;
use mydb;

然后我们创建一个数据表，表有两个字段，分别是username和password，数据类型是varchar(32)变长字符串。

create table user_account (`username` varchar(32), `password` varchar(32));

html注册页面

我们需要使用最基本的input表示来完成输入的读取。

<h1>登录</h1>
用户名: <input type="text" id="username"><br>
密码: <input type="password" id="password"><br>
<button id="regBtn">注册</button>

然后利用JavaScript绑定注册按钮的点击回调函数，利用ajax，将用户名+密码发送（POST提交）到后台程序。

除此之外我们还要使用md5来加密用户的密文，数据库不会保存用户密码的明文。

使用md5需要导入一个名为md5.min.js的文件，里面提供了md5加密函数。我们可以在他的github上面下载。

<script src="md5.min.js"></script>
<script type="text/javascript">
	document.getElementById('regBtn').onclick = function() {
   
		var input_username = document.getElementById("username").value;
		var input_password = document.getElementById("password").value;
		// ajax提交用户名+密码到后台程序
		var xhr = new XMLHttpRequest()