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

#最简单的网页登录注册功能讲解及其实现| 来源: 网络整理| 查看: 265

目录前言结构创建数据库存储账户信息html注册页面注册处理后台程序html登录页面后台登录处理程序演示

前言

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

结构

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

mysql存储用户账户信息编写注册html页面编写后台注册程序编写登录html页面编写后台登录验证程序

下面给出最简单的结构在这里插入图片描述

创建数据库存储账户信息

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

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

以管理员模式运行cmdcd /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表示来完成输入的读取。在这里插入图片描述

登录用户名: 密码: 注册

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

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

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

我们需要查询数据库，如果用户名存在则注册失败，否则在数据库中写入用户名与密码，并返回成功。

演示

这里已经存在用户名为root，密码为114514的用户了，我们再注册一个用户名和密码都是admin的用户。注意最后数据库中存的都是md5加密后的密码。在这里插入图片描述

【本文地址】

今日新闻