一週一個小demo — 前端後臺的交互實例

時間  2019-11-18
標籤 一週 1周 一個 demo 前端 後臺 交互 實例 简体版
原文   原文鏈接

　　這一週呢，本K在大神的指導下，完成了一個利用ajax與php文件上傳處理相結合的一個留言板功能的小實例，下面就讓本K來帶你們瞅瞅如何實現這一種功能。javascript

1、界面概覽

首先咱們來看一下這個小demo的具體效果。php

這個demo中，主要包括了三個步驟，也分別對應了三個功能，分別是註冊，登陸與留言板功能。而這三個功能基本都藉助了先後臺交互的幾種技術，下面，本K就給你們分別展現一下這三個功能實現的代碼。css

2、功能實現

一、註冊功能與登陸功能

1.1 代碼展現

1.1.1 註冊功能html

（1）前段部分前端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用戶註冊</title>
        <link rel="stylesheet" type="text/css" href="../libs/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 350px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -175px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用戶註冊</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用戶名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input type="password" class="form-control" name="pwd" />
                    </div>
                    <div class="form-group">
                        <label>確認密碼</label>
                        <input type="password" class="form-control" name="rePwd" />
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="肯定註冊" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="login.php"/>返回登陸</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="../libs/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("doReg.php",{"formData":str},function(data){
                    if(data=="true"){
                        alert("註冊成功！即將跳轉登錄頁！");
                        location = "login.php";
                    }else{
                        alert("註冊失敗！由於啥我不知道！");
                    }
                });
            });
        });
    </script>
</html>

（2）後臺部分java

<?php

    header("Content-Type:text/html;charset=utf-8");
    
    $str = $_POST["formData"]."[;]";
    
    $num = file_put_contents("user.txt", $str,FILE_APPEND);
    
    if($num>0){
        echo "true";
    }else{
        echo "false";
    }

（3）用戶數據存儲文件jquery

userName=123&pwd=123&rePwd=123[;]

// 這實際上是一個普通的txt文件，就是後臺部分的user.txt

1.1.2 登陸功能ajax

（1）前端部分json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用戶登陸</title>
        <link rel="stylesheet" type="text/css" href="../libs/bootstrap.css"/>
        <style type="text/css">
            body{
                margin: 0px;
                padding: 0px;
                background-color: #CCCCCC;
            }
            .panel{
                width: 380px;
                height: 280px;
                position: absolute;
                left: 50%;
                margin-left: -190px;
                top: 50%;
                margin-top: -140px;
            }
            .form-horizontal{
                padding: 10px 20px;
            }
            .btns{
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
    
    
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">用戶登陸</div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label>用戶名</label>
                        <input type="text" class="form-control" name="userName"/>
                    </div>
                    <div class="form-group">
                        <label>密碼</label>
                        <input type="password" class="form-control" name="pwd"/>
                    </div>
                    
                    <div class="form-group btns">
                        <input type="button" class="btn btn-primary" value="登陸系統" id="submit"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a type="button" class="btn btn-success" href="reg.php"/>註冊帳號</a>
                    </div>
                    
                </form>
            </div>
        </div>
    </body>
    
    <script src="../libs/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#submit").on("click",function(){
                var str = $("form").serialize();
                console.log(str);
                $.post("doLogin.php",{"formData":str},function(data){
                    if(data=="true"){
                        location = "index.php?name="+$("input[name='userName']").val();
                    }else{
                        alert("用戶名或密碼錯誤！！！");
                    }
                });
            });
        });
    </script>
</html>

（2）後臺部分bootstrap

<?php

    header("Content-Type:text/html;charset=utf-8");
    
    $str = $_POST["formData"];
    
    list($userName) = explode("&", $str);
    list(,$pwd) = explode("&", $str);
    
    $users = file_get_contents("user.txt");
    
    $userArr = explode("[;]", $users);
    
    foreach ($userArr as $user) {
        list($realName) = explode("&", $user);
        list(,$realPwd) = explode("&", $user);
        if($userName==$realName&&$pwd==$realPwd){
            echo "true";
            die();
        }
    }
    
    echo "false";

 

1.2 功能詳述

　　用戶註冊與登陸功能的實現的主要依賴有三個，分別是ajax向後臺傳遞數據並接受結果，php後臺對ajax發來的數據進行後臺處理並反饋結果，用戶數據的接收與存儲（這一點其實能夠化做後臺處理部分）。

1.2.1 前端詳述

　　前端部分的主要任務是接收用戶發來的信息並向後臺傳遞，而這部分任務的實現主要依靠兩行代碼。

　　首先咱們看一下ajax發送請求這一部分是如何實現的。這一部分功能的實現主要就依靠兩行代碼。

　　第一行代碼是  var str = $("form").serialize();  這一行的功能就是將form表單中提交的數據序列化成一字符串，具體實現以下圖

　　

　　將form表單中的提交數據序列化是爲了後臺可以更好的解析這一部分。

　　而另外一行關鍵代碼就是ajax請求的主體部分，這一部分主要讓人比較難搞明白的是接受的 data 參數。data 參數是ajax請求相對應後臺處理完成後，後臺給前臺反饋的一個信息，就好比說註冊成功之後所返回的true與失敗之後所返回的false。

1.2.2 後臺詳述

　　後臺對前端傳來數據的處理關鍵在於如何獲取、解析傳來的數據。這一部分，PHP給咱們提供了三行代碼來實現。

　　第一行代碼： $str = $_POST["formData"]; 經過超全局數組 $_POST 得到前臺傳來的序列化好的字符串，這就解決了數據的獲取部分。

　　第二行代碼： file_put_contents("user.txt", $str,FILE_APPEND); PHP提供給咱們的file_putt_contents()，讓咱們能夠將咱們得到的數據儲存到一個文件中長久保留。

　　第三行代碼： file_get_contents("user.txt"); 這是PHP提供給咱們與file_putt_contents()相對應的數據提取的方法。

　　依靠以上三行代碼，再加上咱們對數據解析後的處理，咱們就能夠在後臺輕鬆的對整個功能進行實現。

二、留言功能

2.1 代碼展現

（1）前端部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #note{
                width: 400px;
                height:100px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <textarea name="note" id="note"></textarea>
        <br />
        <input type="button" id="submit" value="留言" />
        
        <h1>留言內容</h1>
        <hr>
        <div id="liuyanban">
            
        </div>
    </body>
    
    <script src="../libs/jquery-3.1.1.js"></script>
    <script>
        $(function(){
            getData();
            
            var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';
            if(userName=="null"){
                location = "login.php";
            }
            
            $("#div1").html("歡迎您，<span style='color:red;'>"+userName+"</span>");
            
            $("#submit").on("click",function(){
                var noteVal = $("#note").val();
                if(noteVal==""){
                    alert("留言內容不能爲空，請覈對！");
                    return;
                }
                var time = getTime();
                var note = {
                    "userName":userName,
                    "time":time,
                    "noteVal":noteVal
                }
                
                $.post("doAdd.php",note,function(data){
                    if(data=="true"){
                        alert("留言內容提交成功！");
                        location.reload(true);
                    }else{
                        alert("留言失敗！緣由不明！");
                    }
                });
                    
            });
        });
        
        function getData(){
            $.post("doShowNote.php",function(data){
                var arr = data.split("[;]");
                arr.pop();
                console.log(arr);
                for (var i=0;i< arr.length;i++) {
                    var thisNote = $.parseJSON(arr[i]);
                    var div = "<br/><div id='div"+i+"'>用戶名："+thisNote.userName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;發佈時間："+thisNote.time+"<br/><br/> 留言內容："+thisNote.noteVal+"</div><br/><hr>"
                    $("#liuyanban").prepend(div);
                }
            })
        }
        
        function getTime(){
            var today  = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var date1  = today.getDate();
            var hours = today.getHours();
            var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();
            var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();
            var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds;    
            return dateTime;
        }
    </script>
</html>

（2）後臺部分

// 筆記的添加
<?php

    header("Content-Type:text/html;charset=utf-8");
    
    $userName = $_POST["userName"];
    $time = $_POST["time"];
    $noteVal = $_POST["noteVal"];
    
    $arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal];
    
    $str = json_encode($arr);
    
    $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND);
    
    if($num>0){
        echo "true";
    }else{
        echo "false";
    }
    
// 筆記的展現
<?php
    header("Content-Type:text/html;charset=utf-8");
    echo file_get_contents("note.txt");

（3）留言數據儲存文件

// 這也是一個用於存儲留言內容等各類信息的TXT文件

{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]

2.2 功能詳述

2.1.1 前端部分

　　前端部分的做用無異於登陸註冊功能，只不過根據要求多了對當前日期、用戶名數據、留言版樣式的獲取。

2.1.2 後臺部分

　　後臺部分其實和登錄註冊的後臺實現是一個套路，不過比兩個要多了一步。 json_encode($arr); 這是PHP提供給咱們的將數組轉化成JSON對象格式的方法，這就方便了咱們在前端對留言數據的反饋獲取。

 

以上就是本K首次在這個星期給你們帶來的小功能demo，但願可以幫到你們，若有錯誤，敬請指正，謝謝您的支持！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程