小項目：聊天室（jQuery，PHP，MySQL）

時間 2019-11-16

原文原文鏈接

這幾天寫了一個小項目，初衷是本身寫一個有前端，有後端的東西練練手，因此，實際意義並不大，只是拿來試試手而已。javascript

我對這個聊天室的構想是這樣的：先建兩個數據庫，一個保存用戶名和密碼，另外一個保存用戶名和發送的信息，並記錄發送的時間，網頁上也想了不少騷操做，可是最後也就簡簡單單的卡了幾張圖在兩邊，簡潔，勉強算是美觀可看。用戶登錄以後，網頁就開始下載數據庫的信息，並把用戶發送的信息一個個壘成盒子向騰訊同樣發出來。額。。。想來真是簡單，我居然寫了一星期左右。php

時間其實大部分耗費在處理後臺發送過來的數據上面，查了不少資料，老是不得其法，後面終於慢慢摸索出來了，要在後臺先把數據轉換成json格式，而後在js裏面轉爲數組，以後就能夠隨便拆分。css

好了，上代碼吧html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title>chat with sb</title>
        <meta charset="utf-8" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js"></script>
        <script src="js/index.js"></script>
        <style type="text/css">
            a{cursor: pointer;}
            img{height:100%;}
            div{overflow:hidden;border: 1px solid black;text-align: center;}
            #left{position: absolute;top:0px;left:0px;width:25%;height:100%}
            #right{position: absolute;top:0px;right:0px;width:25%;height:100%}
            #sign{position: absolute;right:50%;margin-right: -24%;width:80px;height:auto}
            #main{position: absolute;top:50px;left:50%;margin-left: -24%;width: 48%;height:700px;}
            .show{height:70%;margin:10px 10px 10px 10px;overflow: auto;}
            .text{height:25%;margin:10px 10px 10px 10px;}
            #signUp,#signIn{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px}
            a:hover{background-color: #C71585;}
            #writeIn{width:100%;height:80%;border:none}
            #exit{position: absolute;right:1px;top:1px;}
            .insert{text-align: left;width: -webkit-fit-content;margin-left:10px;margin-top:10px ;padding: 5px 5px 5px 5px;background-color:#C71585;}
            .insert a:hover{background-color: white;}
            .insert a{cursor: auto;}
        </style>
    </head>
    <body>
        <div id="left"><img src="img/left.jpg" /> </div>
        <div id="right"><img src="img/right.jpg" /></div>
        <div id="sign"><a onclick="signIn()">登錄</a><a onclick="signUp()">註冊</a>   </div>
        <div id="main">
            <div class="show"><a id="more">更多消息</a></div>
            <div class="text"><textarea id="writeIn"></textarea><button onclick="send()">發送</button></div>
        </div>
        <script type="text/javascript">

            newInsert('sb','2017-7-22 16:02:24','在嗎?');
            var a=new ajax();
            setInterval("a.aja()",1000);    
                
            function ajax(){                                                        
                var  maxid=0;
                this.aja=function(){                    
                    if($.cookie('username')==null){                        
                        return;
                    }
                    $.post("http://127.0.0.1/timeFigure.php",{
                        max:maxid
                    },function(data,status){                        
                        var obj = JSON.parse(data);
                        obj=obj.reverse();
                        for(var i=0;i<obj.length;i++){                        
                            newInsert(obj[i].user,obj[i].date,obj[i].str);
                        };
                        maxid=obj[i-1].id;                                                
                    }    );    
                };

            };

        

              function newInsert(user,time,str){
                    var insert=$("<div class='insert'></div>");
                    insert.html("<a>"+user+"  "+time+"<br />"+str+"</a>");
                    $(".show").append(insert);
              };
              function   signIn(){
                     $("body").css("background-color","#999999");
                  $("#writeIn").css("background-color","#999999");
                  var sign=$("<div id='signIn'></div>");
                  sign.html("<br/><br/>用戶名：<input type='text' id='user'/><br />密碼：<input type='password' id='password'/><br /><br /><button onclick='submitIn()'>提交</button>");
                  $("body").append(sign);
                  sign.css("background-color","white");
                  var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
                  sign.append(exitDiv);                  
              };
              function   signUp(){
                     $("body").css("background-color","#999999");
                  $("#writeIn").css("background-color","#999999");
                  var sign=$("<div id='signUp'></div>");
                  sign.html("<br/><br/>用戶名：<input type='text' id='user' /><br />密碼：<input type='password' id='password'/><br /><br /><button onclick='submitUp()'>提交</button>");
                  $("body").append(sign);
                  sign.css("background-color","white");
                  var exitDiv=$("<button onclick='exit()' id='exit'>X</button>");
                  sign.append(exitDiv);                      
              };
              function exit(){
                    $("#exit").parent().remove();
                    $("body").css("background-color","white");
                  $("#writeIn").css("background-color","white");
              };
               function submitIn(){
                     $.post("http://127.0.0.1/signIn.php",{
                         user:$("#user").val(),
                         password:$("#password").val()
                     },function(data,status){
                         if(data){
                             $.cookie('username',data);
                             $("#sign").html("你好，"+$.cookie('username'));exit();
                         }
                         else {
                             alert("密碼錯誤");
                         }                         
                     });                  
               };
               function submitUp(){
                     $.post("http://127.0.0.1/signUp.php",{
                         user:$("#user").val(),
                         password:$("#password").val()
                     },function(data,status){
                         var COOKIE_NAME='username';
                                               //cookie異常
                         $.cookie(COOKIE_NAME,data,{ expires: 7, path: '/' });
                         $("#sign").html("你好，"+$.cookie("username"));
                     });                   
                   exit();
               };
               function send(){
                  if(!$.cookie('username'))
                   {
                       alert("請先登陸");
                       $("#writeIn").val("");
                       return;
                   }
                   $.post("http://127.0.0.1/saveSTR.php",{
                       user:$.cookie('username'),
                       str:$("#writeIn").val()
                   },function(data,status){
                       $("#writeIn").val("");
                       if(data)
                       {
                           alert("data");
                       }
                   });
               };

        </script>
    </body>
</html>

註冊的PHP代碼前端

<?php
    header('Access-Control-Allow-Origin:*');
    $user=$_POST['user'];
    $password=$_POST['password'];
    
    $conn=mysql_connect("127.0.0.1","root","root");
    if(!$conn)
    {
        die (mysql_error());
    }

    mysql_select_db('my_db',$conn);
    if(mysql_query("INSERT INTO persons (user,password) VALUES ('$user','$password')"))
    {
        die ($user);
    }else{
        echo mysql_error();
    }
    mysql_close($conn);
?>

發送信息的後臺代碼java

<?php
    header('Access-Control-Allow-Origin:*');
    $max=$_POST['max'];    
    $array=array();
    $conn=mysql_connect("127.0.0.1","root","root");
    if(!$conn)
    {
        die (mysql_error());
    }
    mysql_select_db('my_db',$conn);    
    mysql_query("SELECT * FROM context\n"
     . " ORDER BY id ASC LIMIT 0, 30 ");
    $sql=mysql_query("select * from context WHERE id>$max");  
    while($row=mysql_fetch_array($sql))
    {
        $array[]=array('user'=>($row['user']),'date'=>$row['reg_date'],'str'=>($row['str']),'id'=>$row['id']);        
    }
    $json_obj = json_encode($array);
     echo ($json_obj); 
    mysql_close($conn);    
?>