04 | background login: login method based on account and password (Part 1)

Hello , I am program ape zero one .

In the last article How to quickly deploy a system based on laravel Framework development website in , We use it together laravel The framework quickly deploys a website . But there is only one default page on the website , It seems a little lonely and cold , It's time to start adding bricks to the website .

stay php Project under development , In most cases , We are all implementing back-end services that can provide certain functions . So what functions or services should the blog website we want to develop have ？

Bokee.com , It is actually a content publishing system . The administrator creates the blog in the background of the website 、 Publish after editing , Users can browse at the front desk of the website 、 Evaluation and other operations .

Therefore, the function of our website is divided into two parts , First, background management , The included functions include login function 、 Change Password 、 Blog management 、 Background account management 、 Reset password 、 Background role management 、 Background authority management 、 System setting management and other functions ; First, the front desk display , The functions include blog paging 、 Post details 、 Blog classification 、 The blog recommends 、 Blog evaluation and other functions .

then , Let's take a look at how the login function in the background management function is realized .

Login function , Used to verify whether a user has access to the system . If the verification passes , The user can access the system , So you can create 、 to update 、 Delete the data and resources of the system .

Common login methods , as follows ：

• To login , It is the simplest authentication method . The user submits the user name and password to the server for authentication , If it matches, the authentication passes , Login successful .

• SMS login , The background account needs to be bound with a mobile number , Submit your mobile number when logging in , The system sends a short message with random code to the user , After receiving the message, the user submits it to the system for authentication . If the mobile phone number and random code are authenticated , Users can access the system .

• Third party login , Through WeChat 、 Alipay 、qq、github Wait for the account authorization of the third-party platform to log in , Like a cell phone , You need to bind the account in advance .

In the blog website , We choose the account login method , That is, the user name + Password to login authentication .

The login process

The user enters the account and password on the login page , Click submit to pass ajax Way to commit to the server . The server received the login request , obtain post Parameter to query the corresponding record in the database , If any records are found , The password entered by the user is matched with the data in the database through the encryption algorithm . If the match is successful , Login succeeded ; If the match is unsuccessful , Then the corresponding error prompt is returned .

Screenshot of the page

The front-end code

The backstage front end style of blog website , It's all based on layui Developed . So you need to download layui. Download at ：http://layui.winxapp.cn. Extract the directory after downloading , Here's the picture ：

take layui Copy the entire directory to /public/static/admin Under the table of contents .

newly build /public/static/admin/css/login.css, The contents are as follows ：

/* Login form style  start*/
body{
    background: url("/static/admin/imgs/login-backend.jpg") no-repeat;
    background-size: cover;
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
}
.login{
    width:440px;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 4px;
    /* overflow-x: hidden; */
    box-sizing: border-box;
    align-self: center;
}
.login a.logo{
    display: block;
    height: 58px;
    width: 167px;
    margin: 0 auto 30px auto;
    background-size: 167px 42px;
}
.login .message {
    /*margin: 10px 0 0 -58px;*/
    padding: 18px 10px 18px 0;
    background: #09b4c5;
    position: relative;
    color: #fff;
    font-size: 24px;
    text-align: center;
    word-spacing:20px;
}
​
.login input[type=text],
.login input[type=file],
.login input[type=password],
.login input[type=email], select {
    border: 1px solid #DCDEE0;
    vertical-align: middle;
    border-radius: 3px;
    height: 50px;
    padding: 0px 16px;
    font-size: 14px;
    color: #555555;
    outline:none;
    width:100%;
    box-sizing: border-box;
}
.login input[type=text]:focus,
.login input[type=file]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus, select:focus {
    border: 1px solid #27A9E3;
}
.login input[type=submit],
.login input[type=button]{
    display: inline-block;
    vertical-align: middle;
    padding: 12px 24px;
    margin: 0px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    color: #ffffff;
    background-color: #09b4c5;
    border-radius: 3px;
    border: none;
    -webkit-appearance: none;
    outline:none;
    width:100%;
}
.login hr {
    background: #fff 0 0 no-repeat;
}
.login hr.hr15 {
    height: 15px;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
.login hr.hr20 {
    height: 20px;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
/* Login form style  end*/

download jquery-1.8.3.min.js Document to /public/static/admin/js Under the table of contents .

download md5.min.js Document to /public/static/admin/js Under the table of contents .

download login-backend.jpg Document to /public/static/admin/imgs Under the table of contents .

above 3 The download address of files is ：https://pan.baidu.com/s/18csudPMEew11Cd0XTy1H7g?pwd=blog

Here we are , The front-end documents are ready , Let's check the catalogue .

Back end code

newly build app/Http/Controllers/Admin/BaseController.php, The contents are as follows ：

<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
class BaseController extends Controller
{
    private $data = [];
    protected function assign($key, $value){
        $this->data[$key] = $value;
    }
    protected function view($page){
        $data = $this->data;
        return view($page, $data);
    }
}

newly build app/Http/Controllers/Admin/AuthController.php, The contents are as follows ：

<?php
namespace App\Http\Controllers\Admin;
class AuthController extends BaseController
{
    public function login(){
        return $this->view('admin/auth/login');
    }
}

newly build resources/views/admin/auth/login.blade.php, The contents are as follows ：

<!DOCTYPE html>
<html lang="{
   { str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Sign in - Blog background management </title>
        <link href="/static/admin/layui/css/layui.css" rel="stylesheet">
        <link href="/static/admin/css/login.css" rel="stylesheet">
    </head>
    <body>
    <div class="wrap">
        <div class="login">
            <div class="message"> after   platform   tube   The reason is </div>
            <hr class="hr20">
​
            <form method="post" class="layui-form" >
                <input name="username" placeholder=" account number " type="text" lay-verify="username" class="layui-input" autocomplete="off">
                <hr class="hr15">
                <input name="password" lay-verify="password" placeholder=" password "  type="password" class="layui-input">
                <hr class="hr15">
                <input value=" deng   record " lay-submit lay-filter="login" style="width:100%;" type="submit">
                <hr class="hr20" >
            </form>
        </div>
    </div>
    </body>
</html>
<script src="/static/admin/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/static/admin/js/md5.min.js" type="text/javascript"></script>
<script src="/static/admin/layui/layui.js" type="text/javascript"></script>
​
<script>
    $(function  () {
        layui.use('form', function(){
            var form = layui.form;
            form.verify({
                'username':function(value){
                    if(value.length < 1){
                        return ' Please enter your account number '
                    }
                },
                'password':function(value){
                    if(value.length < 1){
                        return ' Please input a password '
                    }
                }
            });
            // Monitor submission 
            form.on('submit(login)', function(data){
                let params = data.field || {};
                params.password = md5(params.password);
                params._token = "{
   {csrf_token()}}";
                $.ajax({
                    url:'/admin/auth/login',
                    data:params,
                    type:"post",
                    dataType:"json",
                    success:function(result){
                        let code = result.code||'';
                        if(code !== 'success') {
                            layer.msg(result.msg || " operation failed ");
                            return false;
                        }
                        window.location.href = '/admin';
                    },
                    error:function(error){
                        console.log(error)
                    }
                });
                return false;
            });
        });
    })
</script>

newly build app/Http/Controllers/Admin/HomeController.php, The contents are as follows ：

<?php
namespace App\Http\Controllers\Admin;
class HomeController extends BaseController
{
    public function index(){
        return $this->view('admin/home/index');
    }
}

newly build resources/views/admin/home/index.blade.php, The contents are as follows ：

<!DOCTYPE html>
<html lang="{
   { str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> home page - Blog background management </title>
        <link href="/static/layui/css/layui.css" rel="stylesheet">
    </head>
    <body>
    <div class="wrap">
         welcome back , Administrators .
    </div>
    </body>
</html>
<script src="/static/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/static/layui/layui.js" type="text/javascript"></script>

modify routes/web.php, The contents are as follows ：

<?php
#  Background routing 
Route::group([
    'prefix' => 'admin'
], function () {
    #  The background page     Access path ： domain name /admin
    Route::get('/', 'Admin\[email protected]');
    Route::group([
        'prefix' => 'auth'
    ], function () {
        #  Background login page     Access path ： domain name /admin/auth/login
        Route::get('/login', 'Admin\[email protected]');
        Route::post('/login', 'Admin\[email protected]');
    });
});

Here we are , We can enter the account password in the form , adopt ajax Submitted information to the server .

This involves laravel The first knowledge point of the framework , route . Routing is the page or interface address that can be accessed .

be-all laravel Routing is all around. routes The routing file in the directory defines . These files will be automatically loaded by the framework . Specific documents , You can visit laravel Check the official website address by yourself .

Official website address ：https://laravel.com/docs

Chinese document ：https://learnku.com/laravel/docs

Okay , Let's stop here today . Next , Let's see how to receive 、 Handle parameters submitted by users , And how to access the database for data query and account verification .

Welcome to your attention

Last , Welcome to my official account . Open the wechat search program ape zero one official account to follow , I hope we can make progress together .