前言
最近打算做一个网页登录的练习,今天撸一个最简单的demo,记录一下学习的过程。
结构
实现一个网页最基本的注册与登录功能,我们需要
- mysql存储用户账户信息
- 编写注册html页面
- 编写后台注册程序
- 编写登录html页面
- 编写后台登录验证程序
下面给出最简单的结构
创建数据库存储账户信息
使用mysql数据库来创建一个存储用户数据的数据库。
我们来到mysql的控制台。这里我使用的是xampp带的mysql。打开mysql控制台的方法:
- 以管理员模式运行cmd
cd /d 路径
命令进入mysql的bin目录下- 输入命令
mysql -u 用户名 -p
- 输入密码
- 登录成功
进入数据库
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()