留言板相关功能

一个留言本登录窗口：

下面是代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="../0614/public/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    开发部内部留言板
    <div>用户名：<input type="text" name="name"  id="name" /></div><br />
    <div>密码：<input type="password" name="mima" id="mima" /></div><br />
    <input type="submit" value="登陆" onclick="denglu()"/>
    

</body>
</html>
<script type="text/javascript">
function denglu(){
        var name = document.getElementById("name").value;
        var mima = document.getElementById("mima").value;
        $.ajax({
            type:"post",
            url:"dengluchuli.php",
            async:true,
            data:{
                type:"denglu",
                name:name,
                mima:mima
            },
            dataType:"text",
            success:function(data){
                alert(data);
            if(data == "ok"){
            window.location.href="xitongyemian.php";
            }else {
                alert("账号密码错误");
                }
            }
        });
}
</script>

接下来是登录处理页面：

<?php
    session_start();
     $type =$_POST['type'];
     $name =$_POST['name'];
    $mima =$_POST['mima'];
    $conn =new mysqli("localhost","root","","ceshi3");
    $conn->connect_error?die("链接失败"):"";
    $sql = "select * from yuangong where UserName = '{$name}'";
    $result = $conn->query($sql);
    $attr = $result->fetch_all();
    if($attr[0][1] == $mima){
        $_SESSION["name"] = $name;
        echo "ok";
    }else {
        echo "no";
    }
?>

接下来进行跳转,跳转到系统主页的收件箱页面包含已读未读等功能。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="../0614/public/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <title>Document</title>
    <style type="text/css">
        .daohang{
            width: 18%;
            height: 300px;
            background-color: #204D74;
            color: #0069D9;
            text-align: center;
            line-height: 20px;
            float: left;
        }
        .liebiao{
            width: 100%;
            height: 30px;
            background-color: #204D74;
            color: #20C997;
            text-align: center;
            line-height: 30px;
            margin-top: 50px;
        }
        .liebiao:hover{
            background-color: #B92C28;
            color: #C4E3F3;
            cursor:pointer;
        }
        .neirong{
            width: 82%;
            height: 500px;
            background-color: #6C757D;
            float: right;
        }
    </style>
</head>
<body>
    <div><a href="tuichu.php">退出系统</a></div>
    <div class="daohang">
        <div class="liebiao" onclick="shoujian()" >收件箱</div>
        <div class="liebiao" onclick="fajian()">发件箱</div>
    </div>
    <div class="neirong" >
    </div>
    <div class="container">
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">内容</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
        
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>
</body>
</html>
<script type="text/javascript">
    function shoujian(){
        $.ajax({
            type:"post",
            url:"xitongchuli.php",
            async:true,
        data:{
            type:"type"
        },
        dataType:"json",
        success:function(data){
            frist(data);
        }
        });
    }
    function frist(data){
        var str = "";
        str += "<table width='100%'>";
        str += "<tr><td>序号</td><td>寄件人</td><td>收件人</td><td>时间</td><td>内容</td><td>阅读状态</td></tr>";
         for(var i=0;i<data.length;i++){
                str +="<tr>";
        for(var j=0;j<data[i].length;j++){
            if(data[i][5]=='0'){
                data[i][5] = "未读";
            }else if(data[i][5]=='1'){
                data[i][5] = "已读";
            }
            str+="<td>"+data[i][j]+"</td>";
        }
        str += "<td><button type='button'data-toggle='modal' data-target='#myModal' onclick='dian(\""+data[i][0]+"\",\""+data[i][4]+"\")'>查看</button></td>"
        str +="</tr>";    
         }
         str += "</table>";
         $(".neirong").html(str);
    }
    function dian(bb,aa){
        $(".modal-body").html(aa);
        $.ajax({
            type:"post",
            url:"xitongchuli.php",
            async:true,
            data:{
            type:"yuedu",
             bb:bb
            },
            dataType:"json",
            success:function(data){
                frist(data);
            }
        });
    }
    
</script>

接下来是系统的处理页面

<?php
        session_start();
        $type =$_POST['type'];
         $conn = new mysqli("localhost","root","","ceshi3");
        $conn->connect_error?die("链接失败"):"";
        switch($type){
        case"type":
        $name = $_SESSION["name"]; 
        $sql = "select * from liuyan where Recever = '{$name}' or Recever='all'" ;
         $result = $conn->query($sql);
        $attr =$result->fetch_all();
        echo json_encode($attr);
        break;
        case"yuedu":
        $bb = $_POST['bb'];
        $sql = "update liuyan set states = 1 where Ids = '{$bb}'";
        $result = $conn->query($sql);
//        $attr =$result->fetch_all();
        $name = $_SESSION["name"]; 
        $sql = "select * from liuyan where Recever = '{$name}' or Recever='all'";
        $result = $conn->query($sql);
        $attr = $result->fetch_all();
        echo json_encode($attr);
        break;
    }


?>

最后这是一个退出页面：返回登录页面

<?php
    session_start(); 
    unset($_SESSION["uid"]);
    header("location:zhuye.php");

?>

最后一个注册的验证：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="../0614/public/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
    
    注册账号：<input id="username" type="text" />
    密码：<input id="mima" type="text"/>
    <button onclick="tianjia()">提交</button>
</body>
<script type="application/javascript">

//当密码框获得焦点时，触发的事件
$("#mima").focus(function(){
    var username = $("#username").val();
    if(username == ""){
        alert("不能为空");
    }else {
    $.ajax({
            type:"POST",
            url:"yanzheng.php",
            data:{
                username:username,
            },
            dataType:"TEXT",
            success:function(data){
                //alert(data);
                if(data != 0){
                    $("#username").focus();//重新让用户名输入框获得焦点
                    alert("该账号已被注册");
                    
                }
            }
        });
    }
})
function tianjia(){
    
}
</script>

</html>

输入用户名时实时后台数据监测用户名是否被占用；下面是处理页面

<?php
    $username =$_POST['username'];
    $conn =new mysqli("localhost","root","","ceshi3");
    $conn->connect_error?die("链接失败"):"";
    $sql = "select count(*) from yuangong where UserName = '{$username}'";
    $result = $conn->query($sql);
    $attr = $result->fetch_all();
    echo $attr[0][0];
?>

猜你喜欢