最簡單的ThinkPHP例項（4）登入與註冊

阿新 • • 發佈：2021-08-17

這是一個簡單的登入與註冊的TP5的例子~

1、html部分

首頁：application\index\view\index\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>最簡單的ThinkPHP例項（4）登入與註冊</title>
</head>
<body>
    <div>老使用者？<a href="/index/index/login">去登入</a></div>
    <br/>
    <div>新使用者？<a href="/index/index/zhuce">去註冊</a></div>
</body>
</html>

View Code

登入頁：application\index\view\index\login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最簡單的ThinkPHP例項（4）登入與註冊</title>
</head> 

<body>
    <div id="app">
        <h2>登入</h2>
        <form onsubmit="return false;">
            <div>
                使用者名稱：<input type="text" v-model="username" />
            </div>
            <div>
                密碼：<input type="password" v-model="password" />
            </div>
            <div style="color: red">{{ error }}</div>
            <br/>
            <div>
                <button type="submit" @click="login()">登入</button>
                <button type="reset">重置</button>
            </div>
            <br/>
            <div>新使用者？<a href="/index/index/zhuce">去註冊</a></div>
        </form>
    </div>


    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生產環境版本，優化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/qs.js"></script>
    <script>
        var axiosAjax = axios.create({
            baseURL:'/',
            // <---- 這裡使用 qs 轉換引數
            transformRequest: [function (data) { // 轉換資料
                data = Qs.stringify(data); // 通過Qs.stringify轉換為表單查詢引數
                return data;
            }],
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
                error: ''
            },
            methods: {
                login(){
                    if(!this.username){
                        this.error = '請輸入使用者名稱'
                        return
                    }
                    if(!this.password){
                        this.error = '請輸入密碼'
                        return
                    }
                    this.error = ''

                    // post方法
                    axiosAjax.post('/index/index/login', {
                        username: this.username,
                        password: this.password,
                    })
                    .then( (response) => {
                        console.log(response);
                        const data = response.data
                        if(data.code === 0){
                            alert('登入成功！')
                        }else{
                            this.error = data.msg
                        }
                    })
                    .catch( (error) => {
                        console.log(error);
                        this.error = error
                    });
                }
            }
        })
    </script>
</body>
</html>

View Code

註冊頁：application\index\view\index\zhuce.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最簡單的ThinkPHP例項（4）登入與註冊</title>
</head>
<body>
    <div id="app">
        <h2>註冊</h2>
        <form onsubmit="return false;">
            <div>
                使用者名稱：<input type="text" v-model="username" />
            </div>
            <div>
                密碼：<input type="password" v-model="password" />
            </div>
            <div>
                確認密碼：<input type="password" v-model="password2" />
            </div>
            <div style="color: red">{{ error }}</div>
            <br/>
            <div>
                <button type="submit" @click="zhuce()">立即註冊</button>
                <button type="reset">重置</button>
            </div>
            <br/>
            <div>老使用者？<a href="/index/index/login">去登入</a></div>
        </form>
    </div>


    <!-- 開發環境版本，包含了有幫助的命令列警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 生產環境版本，優化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/qs.js"></script>
    <script>
        var axiosAjax = axios.create({
            baseURL:'/',
            // <---- 這裡使用 qs 轉換引數
            transformRequest: [function (data) { // 轉換資料
                data = Qs.stringify(data); // 通過Qs.stringify轉換為表單查詢引數
                return data;
            }],
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        var app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: '',
                password2: '',
                error: ''
            },
            methods: {
                zhuce(){
                    if(!this.username){
                        this.error = '請輸入使用者名稱'
                        return
                    }
                    if(!this.password){
                        this.error = '請輸入密碼'
                        return
                    }
                    if(!this.password2){
                        this.error = '請再次密碼確認'
                        return
                    }
                    if(this.password !== this.password2){
                        this.error = '兩個密碼不一致'
                        return
                    }
                    this.error = ''

                    // post方法
                    axiosAjax.post('/index/index/zhuce', {
                        username: this.username,
                        password: this.password,
                        password2: this.password2,
                    })
                    .then( (response) => {
                        console.log(response);
                        const data = response.data
                        if(data.code === 0){
                            alert('註冊成功！')
                        }else{
                            this.error = data.msg
                        }
                    })
                    .catch( (error) => {
                        console.log(error);
                        this.error = error
                    });
                }
            }
        })
    </script>
</body>
</html>

View Code

2、控制器部分

<?php
namespace app\index\controller;

// 引入系統資料類
use think\Db;
// 引入系統控制器類
use think\Controller;

class Index extends Controller
{
    public function index()
    {
        return view();
    }

    public function zhuce()
    {

        if(!$_POST){
            return view();
        }

        $username = $_POST["username"];
        $password = $_POST["password"];
        // $password2 = $_POST["password2"]; // 此處忽略兩次密碼校驗

        $data = '';
        $code = '';
        $msg = '';
        
        // 從資料庫中讀取資料
        $ifExit = Db::table('user')->where('username', $username)->find();

        if($ifExit){
            $msg = '使用者已存在，請勿重複註冊';
            $code = -1;
        }else{
            $data = [
                "username" => $username,
                "password" => $password
            ];
            $userId = Db::table('user')->insertGetId($data);
            $data['id'] = $userId;
            $code = 0;
        }
    
        $res = [
            "data" => $data,
            "code" => $code,
            "msg" => $msg
        ];

        return json_encode($res, JSON_UNESCAPED_UNICODE);
    }

    public function login()
    {

        if(!$_POST){
            return view();
        }

        $username = $_POST["username"];
        $password = $_POST["password"];

        $data = '';
        $code = '';
        $msg = '';
        
        // 從資料庫中讀取資料
        $ifExit = Db::table('user')->where('username', $username)->find();

        if(!$ifExit){
            $msg = '使用者不存在';
            $code = -1;
        }else{
            if($password != $ifExit["password"]){
                $msg = '密碼錯誤';
                $code = -1;
            }else{
                $data = $ifExit;
                $code = 0;
            }
        }
    
        $res = [
            "data" => $data,
            "code" => $code,
            "msg" => $msg
        ];

        return json_encode($res, JSON_UNESCAPED_UNICODE);
    }
}

View Code

3、資料庫部分

最後的效果：

註冊校驗：

登入校驗：

最後：這個例子只是為了入門TP做的簡單的嘗試，實際應用的登入和註冊往往要複雜得多，比如防注水的驗證碼等。

最簡單的ThinkPHP例項（4）登入與註冊

這是一個簡單的登入與註冊的TP5的例子~ 1、html部分首頁：application\\index\\view\\index\\index.html

最簡單的ThinkPHP例項（1）拉取並顯示資料庫資料

1、開啟PHPStudy並啟動 2、開啟資料庫管理工具、新建本地資料庫（如果已經新建過就跳過這一步）

最簡單的ThinkPHP例項（2）表單操作

1、html部分 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

最簡單的ThinkPHP例項（3）介面

前端人，前端魂，前端最常打交道就是介面，來吧，用php擼兩個~ 1、html部分 application\\index\\view\\index\\index.html

多執行緒原理（4）-synchronized與鎖

yy 這篇文章我們來聊一聊Java多執行緒裡面的“鎖”。首先需要明確的一點是：Java多執行緒的鎖都是基於物件的，Java中的每一個物件都可以作為一個鎖。

SqlServer，分頁查詢（最簡單，新手必備！）

SqlServer，分頁查詢（最簡單，新手必備！） sqlserver資料庫在處理分頁資料時，不如mysql可以用limit來限制每次查詢的行數，智慧用top來進行查詢，這對於新手程式設計師來說，可能不是很容易來寫出來。本文分享一個

常見sqlite3 API的簡單使用（4）

sqlite3_bind_**** int sqlite3_bind_text(sqlite3_stmt*,int,const char*,int,void(*)(void*)); sqlite3_bind_text是slite3_bind家族的一員。作用是將sqlite3_prepare_v2 中sql語句裡的佔為符 ? 替換成變數。