实现简单登陆注册功能流程分析

一：思路分析

用户前端注册账号时，我们前端需要使用ajax访问后端文件（下面以php文件举例），通过php文件操作服务器里面的数据库，当然我们得提前建立好数据库与表、编写php文件访问数据库，将前端所需数据做输出。前端则通过ajax访问php文件，获取数据php文件中输出的返回数据。最终使用js操作编写所需呈现给用户的效果。若用户前端登录，登录成功以后将信息保存至cookie中。后面通过读取cookie中数据，将首页登录字更换为用户账户名。

二：关于建立数据库与建表

这里使用Navicat来建立数据库与表，我们打开Navicat，点击连接，然后填写新建链接中信息（连接名随意取，用户名随意取）。

数据库中新建连接

然后我们点击新建数据库建立数据库（数据库名可以随意填写，需要注意字符集和排序规则的格式），完了以后点击确定。

新建数据库

新建数据库2

我们打开建好的数据库，在点击图下方的新建表，填写我们后面所需要用到的数据，一般情况账户名设置为不重复，完了以后ctrl+s保存设置表名，当然我们也可以最开始就设置好表的名字。

打开建好的数据库

填写表的信息1

设置列不重复

设置表名

三、编写PHP文件访问服务器中数据库

首先通过php文件对建立连接数据库，设置编码，选择数据库。然后在php文件里编写SQL语句操作数据库，做判断将前端数据做返回。

//建立连接，选择数据库的conn.php文件
<?php 
    //链接
    mysql_connect("localhost:3306","root","");
    mysql_query("set names 'utf8'");
    mysql_query("set character set 'utf8'");
    mysql_select_db("liyi");
 ?>

//这个是cors跨域php文件示例，该文件为login.php文件
<?php
    //添加请求头
    header("Access-Control-Allow-Origin:*");
    $username=$_GET["username"];
    $password=$_GET["password"];
    //链接数据库
    require "conn.php";
    //编写SQL语句
    $sql = "SELECT username,password FROM users WHERE username='$username' AND password='$password'";
    $result = mysql_query($sql);

    if( $row = mysql_fetch_array($result,MYSQL_ASSOC)){
        $r = array("res_code"=>1,"res_err"=>"","res_body"=>$row);
        echo json_encode($r);//向前端返回数据
    }else{
        $r = array("res_code"=>-1,"res_err"=>"用户名或密码错误");
        echo json_encode($r);//向前端返回数据
    }
    mysql_close();
 ?>

//register.php文件
<?php
    //CORS跨域添加请求头
    header("Access-Control-Allow-Origin:*"); 
    $username=$_POST["username"];
    $password=$_POST["password"];
    require "conn.php";
    $sql = "INSERT INTO users(username,password) VALUES('$username','$password')";
    $result = mysql_query($sql);
    if($result){
        $arr=array("res_code"=>1,"res_err"=>"");
        echo json_encode($arr);//向前端返回数据
    }else{
        $arr = array("res_code"=>-1,"res_err"=>"错误：".mysql_error());
        echo json_encode($arr);//向前端返回数据
    }
    mysql_close();
 ?>

四：前端通过ajax访问获取数据

前端通过ajax访问获取到数据以后，做判断将所需内容渲染至页面。下面是使用jQuery发起ajax请求访问php文件获取返回数据。做登录与注册操作，登录成功我们使用cookie将用户信息保存至cookie中。

//登录页面代码示例
$.cookie.json=true;//这里使用了jquery中的cookie插件，这个设置是将保存至cookie中的数据为json文本的形式做保存
$("#login").click(function(){
    const data = $("#sign_user").serialize();
    $.getJSON("http://localhost:80/php2/login.php",data,function(data){
        if(data.res_code==1){
            $("#prompt").html("登录成功");
            location="/index.html";
            $.cookie("login_user",data,{path:"/",expires:7});
        }else{
            $("#prompt").html("用户名或密码错误");
        }
    })
    return false;
})

//当点击注册时
$.cookie.json=true;//这里使用了jquery中的cookie插件，这个设置是将保存至cookie中的数据为json文本的形式做保存
$("#register").click(function(){
    const data = $("#register_form").serialize();
    //获取验证框的value值
    const value= $("#checkout").val();
    //判断是否和图片上文字相同
    if(value == $(".code").data("content")){
        //判断密码和再次输入密码是否相同
        if($(".confirm").val()==$(".re-confirm").val()){
                //发起ajax请求
            $.post("http://localhost:80/php2/register.php",data,function(data){
                if(data.res_code==1){
                    console.log(1)
                    $(".prompt1").html(`礼易账号注册成功`);
                    location="/html/login.html";
                }else{
                    $(".prompt1").html(`礼易账号已被注册，请更换账户名`);
                }
            },"json")
        }else if($(".confirm").val()!==$(".re-confirm").val()){
            $(".prompt1").html(`两次输入的密码不相同，请再次确认`);
        }
    }else if(value !== $(".code").data("content")){
        $(".prompt1").html(`验证码输入错误，请重新输入`);
    }
    return false;
})