公司通讯录原创

深处莫神

发布于 2022-8-27 15:08

浏览

1收藏

注册登录

思路：
1.手机号、密码登录需要放入表单中，提交表单接收数据

  <form method="post">
    <label>手机号</label>
    <input type="text" name="mobile" required placeholder="请输入手机号" class="span12" />

    <label>密码</label>
    <input type="password" class="span12" name="password" required placeholder="请输入密码" />

    <button class="btn btn-primary pull-right">
        登录
    </button>

    <div class="clearfix"></div>
</form>

接收数据与后端验证

2.接收数据，需要判断是否接收到数据，如果接收到数据去掉两边空白，否则为空
3.如果接收数据为空，则提示用户手机号和密码不能为空。为了防止某些人更改前端代码而进行不输入密码或用户名的登录即去掉required必填属性，后端需要进行拦截用户名密码是否为空。

 //接收数据
    $mobile = isset($_POST['mobile']) ? trim($_POST['mobile']) : '';
    $password = isset($_POST['password']) ? trim($_POST['password']) : '';

    //判断变量是否为空
    if(empty($mobile))
    {
        ShowMsg('手机号码不能为空');
        exit;
    }

    if(empty($password))
    {
        ShowMsg('密码不能为空');
        exit;
    }

封装函数ShowMsg()消息提示函数：

// 提醒消息的方法
// $msg = 消息文案
// $url = 跳转地址
function ShowMsg($msg = '未知消息', $url = '')
{
    // history.go() 不会刷新界面
    // location.href 刷新界面
    
    //跳转地址如果为空就返回上一页
    if(empty($url))
    {
        echo "<script>alert('$msg'); history.go(-1)</script>";
        return false;
    }else
    {
        //有地址就跳转到给的地址界面去
        echo "<script>alert('$msg');location.href=`$url`;</script>";
    }
}

数据库验证管理员数据

4.接收到数据之后，需要进入到数据库里匹配数据，查看数据库里是否有该用户的数据。如果不存在则提示管理员不存在。

链接数据库，设置编码

//链接数据库 返回 一个数据库对象
$db = @mysqli_connect("localhost", "root", "root", "company");

//判断是否链接失败
if(!$db)
{
  echo "链接错误码：".mysqli_connect_errno()."<br />";
  echo "链接错误信息：".mysqli_connect_error()."<br />";
  exit;
}

// 设置编码
mysqli_set_charset($db, "UTF8");

// 全局变量记录表前缀
$pre_ = "pre_";

 //写sql语句
    $sql = "SELECT * FROM {$pre_}admin WHERE mobile = '$mobile'";

    $admin = find($sql);

    //如果没找出管理员
    if(!$admin)
    {
        ShowMsg('管理员不存在');
        exit;
    }

封装find()函数，寻找数据库人员是否存在

/**
 * @name 单条查询
 * @author K2218@qq.com
 * @param $sql 要执行sql语句
 * @return 返回管理员信息数组
 */
function find($sql)
{
    //函数内想要拿全局变量
    global $db;

    //执行sql语句，返回执行结果
    $res = mysqli_query($db, $sql);

    //判断语句是否执行成功
    if(!$res)
    {
        //打印出执行的错误信息
        echo mysqli_error($db);
        exit;
    }

    //从结果中捞出数据,并返回
    return mysqli_fetch_assoc($res);
}

数据库验证密码数据

5.同时也需要判断接受到的密码与数据库里的密码是否一样，注意数据库的密码是密码盐加密过之后的，因此要让密码+密码盐加密后验证。
模拟密码生成过程：

// // 自定义设置密码
// $password=111;
// $salt="sgudhhdiah";

// // 将密码和密码盐一起加密
// echo md5($password);
// echo "<br />";
// echo time();
// exit;

  //判断密码是否正确，与数据库密码是否一致

    //密码盐
    $salt = $admin['salt'];

    //让输入密码 + 密码盐 一起加密
    $repass = md5($password.$salt);

    if($repass != $admin['password'])
    {
        ShowMsg('密码错误');
        exit;
    }

最后一次登录时间记录

6.为了防止用户重复登录，已经登录了还要在进入登录，时间要记录最后一次的登录时间，然后用变量记录更新成功返回影响的行数，如果有成功更新则显示登录成功，否则失败。

  //更新一下最后登录时间，字段名=>当前时间
    $data = [
        'lasttime'=>time()
    ];

    //更新成功返回影响行数
    $affectid = update("admin", $data, "id = ".$admin['id']);

    if($affectid)
    {
        ShowMsg('登录成功', 'index.php');
        exit;
    }else
    {
        ShowMsg('登录失败');
        exit;
    }

封装更新数据库的数据

函数的参数判断，需要什么变量，参数就有几个

UPDATE 表名 SET ‘字段‘='值' WHERE 条件
表名，字段，条件都是变量，因而需要传三个参数

/**
 * @name 更新sql语句方法
 * @param $table 表名
 * @param $data 更新数据
 * @param $where 条件
 */
function update($table, $data = [], $where = 1)
{
    global $db;
    global $pre_;

    //真正的表名
    $table = $pre_.$table;

    //判断数据是否为空
    if(empty($data))
    {
        ShowMsg('更新的数据为空');
        exit;
    }

  //把传入的数据形式由'lasttime'=>16661827换成`字段`='值'的形式，即`lasttime`='16661827'
     // 字段可能不止一个，最后要用逗号分隔开，同时也需要去除最后一个字段的逗号
    $str = "";

    foreach($data as $key=>$item)
    {
        $str .= "`$key` = '$item',";
    }

    //干掉最后一个,元素
    //第二个参数 给什么内容 就可以去掉这个内容
    $str = trim($str, ",");

    // UPDATE 表名 SET `字段`='值',`字段`='值' WHERE 条件
    $sql = "UPDATE $table SET $str WHERE $where";

    //执行sql语句
    $res = mysqli_query($db, $sql);

    //判断执行是否成功
    if(!$res)
    {
        echo mysqli_error($db);
        exit;
    }

    //如果执行成功返回 影响行数
    return mysqli_affected_rows($db);
}

缓存知识点

知识点：

cookie : 属于客户端的缓存，存放在客户端本地的
session : 属于服务器端的缓存，不存在客户端， session是基于cookie的缓存,但如果cookie被禁用了（隐身模式，无痕模式等），session仍旧可以正常使用。

文件缓存的使用：

cookie：比如会员，QQ（几十亿）量大的信息就建议存放在cookie中，存放在本地的。缺点：不安全，
session : 网站管理员 10几个量少的就可以存放在session中，管理员的信息就存放在服务器端优点：较安全，信息存放在服务器端.
两者都是先将存入的内容写入到文件中，在将文件存放在本地或者服务器上的

session 操作

开启对话 session_start()

存session $_SESSION[‘存的session名称’]=‘值’

获取session $SESSION[‘获取session名称’]

删除会话、删除缓存unset、删除变量unset($SESSIOON)

清空整个session里面的所有缓存 session_unset() 清空session缓存

session_destroy() 注销session缓存

cookie,session没有绝对安全的。不可以将一些敏感的信息记录到缓存中，比如银行卡密码等。可以记录id 用户名,性别，头像等到缓存中。

session缓存验证管理员登录

判断在首页上是否登录，如果没有登录，在进入其他页面的时候都要请先登录的提示，登录后才可以点击跳转到其他页面。

管理员缓存信息记录

session记录管理员信息：

  //更新成功返回影响行数
    $affectid = update("admin", $data, "id = ".$admin['id']);

    if($affectid)
    {

        //将用户信息 记录到 session 中
        $_SESSION['auth'] = [
            'id' => $admin['id'], //记录管理员id
            'mobile' => $admin['mobile'], //记录管理员手机号
            'nickname' => $admin['nickname'], //记录管理昵称
        ];

        ShowMsg('登录成功', 'index.php');
        exit;
    }else
    {
        ShowMsg('登录失败');
        exit;
    }

验证是否登录：

session缓存会话开启和登录验证

首先需要在init.php文件里开启对话，这样在每个页面都需要登录前进行登录验证的时候，不必每个都写session_start();来开启对话。

//开启session会话
session_start();

<?php
include_once('./config/init.php');

//判断是否有登录
AuthLogin();
?>

段落引用验证是否登录的封装函数

//验证是否登录
function AuthLogin()
{
    //引用全局变量
    global $pre_;

    $auth = isset($_SESSION['auth']) ? $_SESSION['auth'] : [];

    //为空说明没有登录
    if(!empty($auth))
    {
        ShowMsg('请登录', 'login.php');
        exit;
    }

    //要获取出id 和 mobile手机号
    $id = isset($auth['id']) ? $auth['id'] : 0;
    $mobile = isset($auth['mobile']) ? $auth['mobile'] : '';

    //根据条件验证 管理员是否存在
    $sql = "SELECT * FROM {$pre_}admin WHERE id = $id AND mobile = '$mobile'";

    //查询一条
    $login = find($sql);

    //如果没找出信息
    if(!$login)
    {
        //注销整个会话
        session_destroy();

        //非法登录，并跳转到登录界面
        ShowMsg('非法登录', 'login.php');
        exit;
    }

    //返回当前登录人的信息
    return $login;
}

login界面要单独写登录信息：

//获取session 判断是否已经登录过了，如果已经登录过就不要在重复登录了
$auth = isset($_SESSION['auth']) ? $_SESSION['auth'] : [];

//如果不为空 就说明登录了
if(!empty($auth))
{
     //要获取出id 和 mobile手机号
     $id = isset($auth['id']) ? $auth['id'] : 0;
     $mobile = isset($auth['mobile']) ? $auth['mobile'] : '';
 
     //根据条件验证 管理员是否存在
     $sql = "SELECT * FROM {$pre_}admin WHERE id = $id AND mobile = '$mobile'";
 
     //查询一条
     $login = find($sql);

     //如果没找出信息
    if($login)
    {
        ShowMsg('您已登录，无须重复登录', 'index.php');
        exit;
    }else
    {
        //注销整个会话
        session_destroy();

        //非法登录，并跳转到登录界面
        ShowMsg('非法登录', 'login.php');
        exit;
    }
}

退出页面

<a href="javascript:void(0)" id="logout" class="hidden-phone visible-tablet visible-desktop">退出登录</a>

//接收action 判断是否是执行退出动作
$action = isset($_GET['action']) ? trim($_GET['action']) : '';

//执行退出动作
if($action == "logout")
{
    // 销毁session
    session_destroy();
    ShowMsg('退出成功', 'login.php');
    exit;
}

<script>
    $("#logout").click(function(){
        //确认对话框
        if(confirm("是否确认退出"))
        {
            //跳转界面
            location.href = `login.php?action=logout`
            return false
        }
    })
</script>

忘记密码

如果忘记了自己存放数据库的密码，那就自己重新输入生成密码

// //重置密码
// $password = "123123";
// $salt = "hello";

// //新密码
// echo md5($password.$salt);

后端员工数据列表获取

<!-- 数据列表 -->
<div class="well">
    <table class="table datalist">
        <thead>
        <tr>
            <th>ID</th>
            <th>员工昵称</th>
            <th>性别</th>
            <th>手机号</th>
            <th>入职时间</th>
            <th>所属部门</th>
            <th>所属职位</th>
            <th style="width: 100px;">操作</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach($list as $item){?>
            <tr>
                <td><?php echo $item['id'];?></td>
                <td><?php echo $item['nickname'];?></td>
                <td>
                    <?php if($item['sex'] == 0){?>
                        保密
                    <?php }else if($item['sex'] == 1){?>
                        男
                    <?php }else if($item['sex'] == 2){?>
                        女
                    <?php }else{ ?>
                        未知数据
                    <?php }?>
                </td>
                <td><?php echo $item['phone'];?></td>
                <td><?php echo date("Y-m-d", $item['createtime']);?></td>
                <td><?php echo $item['depName'];?></td>
                <td><?php echo $item['jobName'];?></td>
                <td>
                    <a class="btn btn-primary" href="user.html" >
                        <i class="icon-pencil"></i>
                    </a>
                    <a class="btn btn-danger" href="#myModal" role="button" data-toggle="modal">
                        <i class="icon-remove"></i>
                    </a>
                </td>
            </tr>
        <?php }?>
        </tbody>
    </table>
</div>

分页功能知识点

查询语语句(链表查询),员工表，
渲染数据，输出到页面上（高级分离术）
3.每页显示6条—$limit,当前在哪一页—$page,总共多少条数据—$count,一共多少页—$total，
4.分页样式，组装分页字符串
5.当前页如果等于1，说明在第一页，当前页和第一页不能被点击。同理，最后一页和尾页不能点击。

分页原生代码

<?php
include_once('./config/init.php');

//判断是否登录
AuthLogin();

//当前默认在第一页
// $page = 1;

//如果有传递分页参数 就拿  如果没有就 默认 第一页
$page = isset($_GET['page']) ? $_GET['page'] : 1;

//每页显示多少条
$limit = 5;

//查询当前的总条数出来
$sql = "SELECT count(*) AS c FROM {$pre_}person";
$count = find($sql);
$count = isset($count['c']) ? $count['c'] : 0;

//算总页面 总共有多少页数
$total = ceil($count / $limit);

//组装分页字符串
$str = "<ul>";

//先判断首页
if($page <= 1)
{
    $str .= "<li><a>首页</a></li>";
    $str .= "<li><a>上一页</a></li>";
}else
{
    $prev = $page - 1;
    $str .= "<li><a href='person_list.php'>首页</a></li>";

    $str .= "<li><a href='person_list.php?page=$prev'>上一页</a></li>";
}

//中间页面
for($i=1;$i<=$total;$i++)
{
    //判断当前页 == $i
    if($page == $i)
    {
        $str .= "<li><a>$i</a></li>";
    }else
    {
        $str .= "<li><a href='person_list.php?page=$i'>$i</a></li>";
    }
}

//如果当前页 大于或等于 $total 总页数
if($page >= $total)
{
    $str .= "<li><a>下一页</a></li>";
    $str .= "<li><a>尾页</a></li>";
}else
{
    $next = $page + 1;
    
    $str .= "<li><a href='person_list.php?page=$next'>下一页</a></li>";

    $str .= "<li><a href='person_list.php?page=$total'>尾页</a></li>";
}


//拼接
$str .= "</ul>";


//偏移量 查询起始位置
// LIMIT 起始位置0，每页显示多少条
// LIMIT 0,5;
// LIMIT 5,5;
$start = ($page - 1) * $limit;

//查询数据
$sql = "SELECT per.*, dep.name AS depName, job.name AS jobName FROM {$pre_}person AS per LEFT JOIN {$pre_}department AS dep ON per.depid = dep.id LEFT JOIN {$pre_}job AS job ON per.jobid = job.id LIMIT $start,$limit";

$list = all($sql);

?>

all()函数的封装，多条查询数据的封装

/**
 * @name 多条查询
 * @author K2218@qq.com
 * @param $sql 要执行sql语句
 * @return 返回查询信息数组 二维数组
 */
function all($sql)
{
    global $db;

    //执行语句
    $res = mysqli_query($db, $sql);

    //判断语句是否执行成功
    if(!$res)
    {
        //输出错误信息
        echo mysqli_error($db);
        exit;
    }

    //从执行结果中返回数据
    return mysqli_fetch_all($res, MYSQLI_ASSOC);
}

分页函数代码封装

   <!-- 分页 -->
    <div class="pagination">
         <?php echo $PageStr; ?>
    </div>

include_once('./config/init.php');

//判断是否登录
AuthLogin();

//当前默认在第一页
// $page = 1;

//如果有传递分页参数 就拿  如果没有就 默认 第一页
$page = isset($_GET['page']) ? $_GET['page'] : 1;

//每页显示多少条
$limit = 5;

//查询当前的总条数出来
$sql = "SELECT count(*) AS c FROM {$pre_}person";
$count = find($sql);
$count = isset($count['c']) ? $count['c'] : 0;

//中间显示多少个页码数
$size = 3;


//调用分页函数
$PageStr = page($page, $count, $limit, $size);


//偏移量 查询起始位置
// LIMIT 起始位置0，每页显示多少条
// LIMIT 0,5;
// LIMIT 5,5;
$start = ($page - 1) * $limit;

//查询数据
$sql="SELECT adm.* FROM {$pre_}admin AS adm LIMIT $start,$limit";

$list = all($sql);

?>

分页封装函数

/* 
*   获取当前的网址   
*/

function get_url()
{
    // 获取当前的完整地址
    $str = $_SERVER['PHP_SELF'] . '?';

    if($_GET){
        foreach($_GET as $k => $v){
            if($k != 'page'){
                $str.= $k.'='.$v.'&';
            }
        }
    }

    return $str;

}

/** 
 * 
 * 分页函数
 * @param string $current 当前页 page
 * @param string $count   记录总数 count
 * @param string $limit   每页显示多少条 limit
 * @param string $size    中间显示页码多少条
 * @param string $class   样式
 * @return string 组装的分页字符串
 * 
*/  
function page($current,$count,$limit,$size,$class='digg')
{
    $str = '';
    if($count > $limit){
        // 算出总页数
        $pages = ceil($count / $limit);
        // 获取当前页面的url（带有参数的）
        $url = get_url();
        // 开始拼接分页
        $str.='<div class="'.$class.'">';

        // 判断当前页是否是1
        if($current == 1){
            $str.='<span class="disabled">首&nbsp;&nbsp;页</span>';
            $str.='<span class="disabled">上一页</span>';
        }else{
            $str.='<a href="'.$url.'page=1">首&nbsp;&nbsp;页</a>';
            $str.='<a href="'.$url.'page='.($current - 1).'">上一页</a>';
        }

        // 中间
        if($current<=floor($size / 2)){
            $start = 1;
            $end = $pages < $size ? $pages : $size;
        }elseif ($current >= $pages - floor($size / 2)) {
            $start = $pages - $size + 1 <= 0 ? 1 : $pages - $size + 1;
            $end = $pages;
        }else {
            $start = $current - floor($size / 2);
            $end = $current + floor($size / 2);
        }

        for($i=$start;$i<=$end;$i++){
            if($i==$current){
                $str.='<span class="current">'.$i.'</span>';
            }else{
                $str.='<a href="'.$url.'page='.$i.'">'.$i.'</a>';
            }
        }

        //最后
        if($pages==$current){
            $str .='<span class="disabled">下一页</span>';
            $str.='<span class="disabled">尾&nbsp;&nbsp;页  </span>';
        }else{
            $str.='<a href="'.$url.'page='.($current+1).'">下一页</a>';
            $str.='<a href="'.$url.'page='.$pages.'">尾&nbsp;&nbsp;页 </a>';
        }

        $str.='</div>';
    }

    return $str;
}

添加员工

封装页面

    <!-- 表单 -->
              <div class="well">
                  <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="home">
                      <form method="post" enctype="multipart/form-data">
                        <label>昵称</label>
                        <input type="text" name="nickname" class="input-xxlarge" placeholder="请输入昵称" required />

                        <label>性别</label>
                        <select name="sex" required class="input-xlarge">
                          <option value="0">保密</option>
                          <option value="1">男</option>
                          <option value="2">女</option>
                        </select>

                        <label>手机号</label>
                        <input type="text" name="phone" class="input-xxlarge" placeholder="请输入手机号" required />

                        <label>邮箱</label>
                        <input type="email" name="email" class="input-xxlarge" placeholder="请输入邮箱" required />

                        <label>详细地址</label>
                        <input type="text" name="address" class="input-xxlarge" placeholder="请输入详细地址" required />

                        <label>入职时间</label>
                        <input type="date" name="createtime" class="input-xxlarge" placeholder="请选择入职时间" required />

                        <label>员工头像</label>
                        <input type="file" name="avatar"  class="input-xxlarge" />

                        <label>所属部门</label>
                        <select name="depid" required class="input-xlarge">
                          <?php foreach($deplist as $item){?>
                            <option value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
                          <?php }?>
                        </select>

                        <label>所属职位</label>
                        <select name="jobid" required class="input-xlarge">
                          <?php foreach($joblist as $item){?>
                          <option value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
                          <?php }?>
                        </select>

                        <label></label>
                        <input class="btn btn-primary" type="submit" value="提交" />
                      </form>
                    </div>
                </div>
              </div>

#####数据库获取信息
选择职位和部门的时候需要获取数据库信息进行选项确定

   <label>所属部门</label>
    <select name="depid" required class="input-xlarge">
        <?php foreach($deplist as $item){?>
        <option value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
        <?php }?>
    </select>

在确定部门之后，其选择的职位只能是对于部门内部的比如财务部->秘书，技术部->前端

//先查询出所有部门的信息
$sql = "SELECT * FROM {$pre_}department";
$deplist = all($sql);

//获取第一个部门信息
$depid = isset($deplist[0]) ? $deplist[0]['id'] : 0;

//根据部门的id 去找职位列表
$sql = "SELECT * FROM {$pre_}job WHERE depid = $depid";
$joblist = all($sql);

//判断是否有post表单
if($_POST)
{
  var_dump($_POST);
  exit;
}

表单提交验证(正则验证)

  <form id="person" method="post" enctype="multipart/form-data">
	...
  </form>

正则验证手机号和邮箱：

//表单提交事件
  $("#person").submit(function(){
    //获取手机号、邮箱
    var phone = $("input[name=phone]").val()
    var email = $("input[name=email]").val()

    //手机号验证
    var PhoneReg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;

    //判断手机号码正则
    if(!PhoneReg.test(phone))
    {
      alert('手机号码填写格式有误')
      return false
    }

    //判断邮箱
    var EmailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

    if(!EmailReg.test(email))
    {
      alert('邮箱填写格式有误')
      return false
    }
  })

ajax获取post请求数据

//ajax post数据
$action = isset($_POST['action']) ? $_POST['action'] : '';

手机号验证

手机号是唯一的，则需要进行异步验证：
—失去焦点时触发进行事件的异步验证。

//当手机号改变的时候触发
  $("input[name=phone]").change(function(){
    var phone = $(this).val()

    //拿到内容，正则验证
    //手机号验证
    var PhoneReg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;

    //判断手机号码正则
    if(!PhoneReg.test(phone))
    {
      alert('手机号码填写格式有误')
      return false
    }

    //发送一个异步请求，到php服务器里面去
    $.ajax({
      //请求类型
      // async: true, //默认为异步
      type: 'post',
      url:'person_add.php',
      data:{
        action: 'check',
        phone: phone
      },
      dataType:'json', //服务器返回类型
      success:function(success)
      {
        if(success.result)
        {
          //可以注册
          $("#notice").css({
            display:'inline',
            color:'green'
          })

          $("#notice").text(success.msg)
        }else
        {
          //不能注册
          $("#notice").css({
            display:'inline',
            color:'red'
          })

          $("#notice").text(success.msg)
        }
      }
    })

  })

action=''为异步请求行为，失去焦点验证手机号行为请求

//如果action == 'check' 我就知道他的请求是 ajax 异步请求过来的
if($action == "check")
{
  $success = [
    'result' => false, //成功 或者 失败
    'msg' => '',  //文案信息
  ];

  $phone = isset($_POST['phone']) ? trim($_POST['phone']) : '';

  //判断是否为空
  if(empty($phone))
  {
    $success['result'] = false;
    $success['msg'] = '手机号码不能为空';
  }

  //去查询数据库手机号是否存在
  $sql = "SELECT * FROM {$pre_}person WHERE phone = '$phone'";

  $result = find($sql);

  //如果不为空，就说明手机号存在，不能添加
  if($result)
  {
    $success['result'] = false;
    $success['msg'] = '手机号已存在，不能注册';
  }else
  {
    //不存在、可以注册
    $success['result'] = true;
    $success['msg'] = '可以注册';
  }

  //将信息返回给前端 
  //将php的数据转换为json
  echo json_encode($success);
  exit;
}

验证select选项

需要保证在选择相对应部门之后，其职位也会是对于部门下的职位.财务部->会计,技术部->前端开发。

  <label>所属部门</label>
    <select name="depid" required class="input-xlarge">
    <?php foreach($deplist as $item){?>
        <option value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
    <?php }?>
    </select>

部门改变时触发函数，发送异步请求

 //部门改变的时候触发
  $("select[name=depid]").change(function(){
    //获取部门id
    var depid = $(this).val()

    //发送ajax 异步请求
    $.ajax({
      // async: true, //默认值
      //发送请求
      type:'post', 
      //请求地址
      url:"person_add.php",
      //发送的数据
      data:{
        action:'DepCheck',
        depid:depid
      },
      //服务器返回的数据类型
      dataType:'json',
      //成功的回调函数
      success:function(success)
      {
        if(success.result)
        {
          //有职位

          //循环遍历，插入到下拉框中
          var html = '';

          for(var item of success.msg)
          {
            html += `<option value='${item.id}'>${item.name}</option>`
          }

          $('select[name=jobid]').html(html)

        }else
        {
          //没有职位
          $('select[name=jobid]').html('')
        }
      }
    })
  })

异步请求动作为$action == ‘DepCheck’

//如果action == 'DepCheck' 我们就知道他的请求是 ajax 异步请求过来的
// data:{
//   action:'DepCheck',
//   depid:depid
// },
if($action == 'DepCheck')
{
  $success = [
    'result' => false, //成功 或者 失败
    'msg' => '',  //文案信息
  ];

  //切换部门， ajax 异步请求 更换 职位列表
  $depid = isset($_POST['depid']) ? $_POST['depid'] : 0;

  //查询职位
  $sql = "SELECT * FROM {$pre_}job WHERE depid = $depid";

  $joblist = all($sql);

  if(empty($joblist))
  {
    $success['result'] = false;
    $success['msg'] = '该部门下没有职位';
  }else
  {
    //有职位
    $success['result'] = true;
    $success['msg'] = $joblist;
  }

  //结束这个ajax请求，并返回结果
  echo json_encode($success);
  exit;
}

员工添加到数据库

表单提交

// 判断是否有表单提交
if($_POST)
{
//    var_dump($_POST); 
//     exit;

    $phone=isset($_POST['phone']) ? trim($_POST['phone']) : ''; 
   
    if(empty($phone))
    {
      ShowMsg('手机号不能为空');
      exit;
    }

    // 判断手机号是否被注册
    $sql="SELECT * FROM {$pre_}person WHERE phone='$phone' ";
    // var_dump($sql);
    // exit;
    $check=find($sql);

    if($check)
    {
      ShowMsg('手机号已存在');
      exit;
    }
	//数据封装
    // 不存在则可以进行注册
    $data=[
        'nickname' =>trim($_POST['nickname']),
        'sex' => trim($_POST['sex']) ,
        'phone' =>$phone,
        'email' =>trim($_POST['email']) ,
        'address' =>trim($_POST['address']) ,
          // 标准时间转换为时间戳
        'createtime' => strtotime($_POST['createtime']) ,
        'depid' =>trim($_POST['depid']) ,
        'jobid' =>trim($_POST['jobid']) ,
    ];

    // 判断头像文件是否存在，并且判断文件大小是否大于0
    if(isset($_FILES['avatar']) && $_FILES['avatar']['size'] > 0)
    {
      $result=upload('avatar', './assets/uploads');

      $data['avatar']=$result;
    }

    // 执行插入,调用add()函数
    $insertid=add('person',$data);
    if($insertid)
    {
      ShowMsg('添加员工成功');
      exit();
    }else{
      showmsg('添加员工失败');
      exit();
    }
    

}

插入方法，add()插入员工数据到数据库的函数

// 判断是否有表单提交
if($_POST)
{
//    var_dump($_POST); 
//     exit;

    $phone=isset($_POST['phone']) ? trim($_POST['phone']) : ''; 
   
    if(empty($phone))
    {
      ShowMsg('手机号不能为空');
      exit;
    }

    // 判断手机号是否被注册
    $sql="SELECT * FROM {$pre_}person WHERE phone='$phone' ";
    // var_dump($sql);
    // exit;
    $check=find($sql);

    if($check)
    {
      ShowMsg('手机号已存在');
      exit;
    }

    // 不存在则可以进行注册
    $data=[
        'nickname' =>trim($_POST['nickname']),
        'sex' => trim($_POST['sex']) ,
        'phone' =>$phone,
        'email' =>trim($_POST['email']) ,
        'address' =>trim($_POST['address']) ,
          // 标准时间转换为时间戳
        'createtime' => strtotime($_POST['createtime']) ,
        'depid' =>trim($_POST['depid']) ,
        'jobid' =>trim($_POST['jobid']) ,
    ];

    // 判断文件是否存在，并且判断文件大小是否大于0
    if(isset($_FILES['avatar']) && $_FILES['avatar']['size'] > 0)
    {
      $result=upload('avatar', './assets/uploads');

      $data['avatar']=$result;
    }

    // 执行插入
    $insertid=add('person',$data);
    if($insertid)
    {
      ShowMsg('添加员工成功');
      exit();
    }else{
      showmsg('添加员工失败');
      exit();
    }
    

}

/**
 * @name 插入数据的方法
 * @param $table 表名
 * @param $data 插入数据
 * @return 返回插入的自增id
 */
function add($table,$data)
{
    // 引入全局变量
    global $pre_;
    global $db;

    // 拼接完整的表名称
    $table=$pre_.$table;
    // 拼装sql语句
    $keys=array_keys($data);
    // exit;

    // 将数组变成字符串
    $str="`".implode('`,`',$keys)."`";
    $val="'".implode("','",$data)."'";


    // 拼接最后完整的sql语句
    $sql="INSERT INTO $table($str) VALUES ($val)";
    // exit;

    // 执行
    $res=mysqli_query($db,$sql);

    if(!$res) {
        echo mysqli_error($db);
        exit;
    }
    return mysqli_insert_id($db);
}

ajax异步通讯

1.必须要jquery文件

员工编辑：

person_list表：

  <a class="btn btn-primary" href="person_edit.php?id=<?php echo $item['id'];?>" >
        <i class="icon-pencil"></i>
  </a>

表单部分：进入修改界面的时候，要把已经填过的信息默认填入

对于有value值的来说value=""填入已经输入过的值即可打开时已经填入
对于select选择框，三元运算符判断，需要被选中的即设置属性为selected即可

数据库获取到的人员信息：

//获取列表传递过来的id 
$id = isset($_GET['id']) ? $_GET['id'] : 0;

//根据id去数据库查询一下是不是真的存在这条记录
$sql = "SELECT * FROM {$pre_}person WHERE id = $id";

$person = find($sql);

数据库中查找所有部门的职位信息，在进行select选择的时候，进行选择:

//先查询出所有部门的信息
$sql = "SELECT * FROM {$pre_}department";
$deplist = all($sql);

//获取当前编辑员工的所选部门
$depid = isset($person['depid']) ? $person['depid'] : 0;

//根据部门的id 去找职位列表
$sql = "SELECT * FROM {$pre_}job WHERE depid = $depid";
$joblist = all($sql);

表单信息的传入：

<!-- 表单 -->
<div class="well">
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active in" id="home">
            <form id="person" method="post" enctype="multipart/form-data">
            <label>昵称</label>
            <input type="text" name="nickname" class="input-xxlarge" placeholder="请输入昵称" required value="<?php echo $person['nickname'];?>" />

            <label>性别</label>
            <select name="sex" required class="input-xlarge">
                <option value="0" <?php echo $person['sex'] == 0 ? 'selected' : ''; ?>>保密</option>
                <option value="1" <?php echo $person['sex'] == 1 ? 'selected' : ''; ?>>男</option>
                <option value="2" <?php echo $person['sex'] == 2 ? 'selected' : ''; ?>>女</option>
            </select>

            <label>手机号</label>
            <input type="text" name="phone" class="input-xxlarge" placeholder="请输入手机号" value="<?php echo $person['phone'];?>" required />
            <span id="notice" style="display:none;"></span>

            <label>邮箱</label>
            <input type="email" name="email" class="input-xxlarge" placeholder="请输入邮箱" required value="<?php echo $person['email'];?>" />

            <label>详细地址</label>
            <input type="text" name="address" class="input-xxlarge" placeholder="请输入详细地址" required value="<?php echo $person['address'];?>" />

            <label>入职时间</label>
            <input type="date" name="createtime" class="input-xxlarge" placeholder="请选择入职时间" required value="<?php echo date('Y-m-d', $person['createtime'])?>" />

            <label>员工头像</label>
            <input type="file" name="avatar"  class="input-xxlarge" />

            <!-- 什么情况下显示图片 -->
            <!-- 不为空 并且 还得要存在 -->
            <?php if(!empty($person['avatar']) && is_file($person['avatar'])){?>
                <a href="<?php echo $person['avatar']?>" target="_blank">
                <img src="<?php echo $person['avatar']?>" style="width:100px;height:100px" />
                </a>
            <?php }?>

            <label>所属部门</label>
            <select name="depid" required class="input-xlarge">
                <?php foreach($deplist as $item){?>
                <option <?php echo $person['depid'] == $item['id'] ? 'selected' : '';?> value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
                <?php }?>
            </select>

            <label>所属职位</label>
            <select name="jobid" required class="input-xlarge">
                <?php foreach($joblist as $item){?>
                <option <?php echo $person['jobid'] == $item['id'] ? 'selected' : '';?> value="<?php echo $item['id'];?>"><?php echo $item['name'];?></option>
                <?php }?>
            </select>

            <label></label>
            <input class="btn btn-primary" type="submit" value="提交" />
            </form>
        </div>
    </div>
</div>

2.需要注意切换部门，填写职位表的时候，不在默认选中第一个，而是默认选中的是我选择的那个。

  //切换部门， ajax 异步请求 更换 职位列表
  $depid = isset($_POST['depid']) ? $_POST['depid'] : 0;

3.需要注意在选中更改电话号码的时候，选择其他号码的之后，在选反回来选择自己填写原本的手机号是可以选择的。

//判断是否有post表单
if($_POST)
{
  $phone = isset($_POST['phone']) ? trim($_POST['phone']) : '';

  if(empty($phone))
  {
    ShowMsg('手机号不能为空');
    exit;
  }

  //判断手机号是否被注册 但是除了自己
  $sql = "SELECT * FROM {$pre_}person WHERE phone = '$phone' AND id != $id";
  $check = find($sql);

  if($check)
  {
    ShowMsg('手机号已存在');
    exit;
  }

  //不存在就可以注册

  //封装数据
  $data = [
    'nickname' => trim($_POST['nickname']),
    'sex' => trim($_POST['sex']),
    'phone' => $phone,
    'email' => trim($_POST['email']),
    'address' => trim($_POST['address']),
    //标准时间转换为时间戳
    'createtime' => strtotime(trim($_POST['createtime'])),
    'depid' => trim($_POST['depid']),
    'jobid' => trim($_POST['jobid']),
  ];

   //判断一下是否有文件上传
  // <input type="file" name="avatar" />
  //判断文件是否存在，并且大小是否大于0 
  if(isset($_FILES['avatar']) && $_FILES['avatar']['size'] > 0)
  {
    // avatar
    $result = upload('avatar', './assets/uploads');

    //将上传好的图片路径，插入到组装数组里面
    $data['avatar'] = $result;
  }

  //执行更新语句
  $affect = update('person', $data, "id = $id");

  if($affect)
  {
    ShowMsg('编辑员工成功', 'person_list.php');
    exit;
  }else
  {
    ShowMsg('编辑员工失败');
    exit;
  }
}

编辑上传头像时删除旧图片

注意：unlink()得去找到文件的绝对路径才能删除文件，
dirname()获取当前文件所在的绝对目录
进行路径的拼接，找到文件的绝对路径，然后在进行删除

   // 最后需要删除的路径为绝对路径
    // echo "D:\software\phpstudy_pro\WWW\all\company-3\assets\uploads";
     // 有图片已经上传上去则把旧图片删除
     if(!empty($avatar)){
       // 获取当前文件所在的绝对目录
      $file1=str_replace('\\','/',dirname(__FILE__));

      // 获取数组里的avatar的字符串,然后去掉两边的.为获取路径
      $aa=trim($avatar['avatar'],".");

      // 拼接最终的路径文件
      $file1.=$aa;
      var_dump($file1); 

      unlink($file1);
      echo "删除头像成功";
     }

员工删除

1.换成复选框,id=“all”,传多值表单,name=list[]数组结构

  <tr>
    <th><input type="checkbox" id="all" /></th>
    <th>员工昵称</th>
   ...
  </tr>

 <td>
    <!-- 以数组的方式进行数据传递 -->
    <input type="checkbox" class="list" name="list" value="<?php echo $item['id']?>" />
</td>

事件全选(js)

prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

<script>
    $("#all").click(function(){
	// 点击全选中为true,不选中为false
	// console.log($(this).prop('checked'));
        $(".list").prop('checked', $(this).prop('checked'))
    })
</script>

添加删除的button按钮

 <tr>
    <td class="delete" colspan="8">
        <a type="submit" onclick="delall()" href="#myModal" role="button" data-toggle="modal" class="btn btn-danger">批量删除</a>
    </td>
</tr>

单条删除

首先需要获取到需要删除的员工的id号，即勾选之后点击删除按钮时候，能够获取到
隐藏域：

<form >
    ...
    <!-- 隐藏域 看不见的表单元素 -->
    <input type="hidden" name="ids" value=" " />
</form>

单个删除按钮：

<a onclick="delone(<?php echo $item['id'];?>);" class="btn btn-danger " href="#myModal" role="button" data-toggle="modal">
    <i class="icon-remove"></i>
</a>

js事件

//单条删除
    function delone(perid)
    {
        //将id写入到提交表单中的隐藏域选项上
        $("input[name=ids]").val(perid)
    }

多条删除

多条删除，元素追加

//多条删除
function delall()
{
    var ids = []

    $("input[name=list]").each(function(index, el){
        //获取元素的选中属性
        var checked = $(this).prop('checked')

        //如果选中就将id 插入到数组中
        if(checked)
        {
            ids.push($(this).val())
        }
    })

    //数组 转换成 字符串  join
    ids = ids.join(',')
    $("input[name=ids]").val(ids)
}

4.模态框,#锚点绑定id

5.修改模态框，form表单放在模态框外面，type="submit"才可以提交

 <!-- 模态框 -->
<form method="post">
    <div class="modal small hide fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">删除对话框</h3>
        </div>
        <div class="modal-body">
            <p class="error-text"><i class="icon-warning-sign modal-icon"></i>是否确认删除员工?</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
            <button class="btn btn-danger" type="submit">确认</button>
        </div>
        <!-- 隐藏域 看不见的表单元素 -->
        <input type="hidden" name='ids' value="" />
    </div>
</form>

删除员工数据的表单提交

注意一个逻辑问题，只有先把数据库里的头像文件删除了，才能在前端删除。

//删除员工数据
if($_POST)
{
    //接收ID
    $ids = isset($_POST['ids']) ? trim($_POST['ids']) : 0;
    //批量删除的时候要把员工的头像图片也要删除

    //查询
    $sql = "SELECT avatar FROM {$pre_}person WHERE id IN($ids)";

    $list = all($sql);

    //可以提取数组中指定的下标元素出来，放到一个新数组里面
    $avatar = array_column($list, 'avatar');

    //将空值过滤掉
    $avatar = array_filter($avatar);

    //将数组中所有的选项都唯一 去除重复选项
    $avatar = array_unique($avatar);

    //如果没有图片就直接删除数据库记录
    $affect = delete("person", "id IN($ids)");

    if($affect)
    {
        //如果数组不为空才去删除图片
        if(!empty($avatar))
        {
            foreach($avatar as $item)
            {
                //删除文件
                @is_file($item) && @unlink($item);
            }
        }

        ShowMsg('员工删除成功','person_list.php');
        exit;
    }else
    {
        ShowMsg('员工删除失败');
        exit;
    }

}

删除员工的方法封装

/**
 * @name 删除数据的方法
 * @param $table 表名
 * @param $where 条件
 * @return 返回影响行数
 */
function delete($table, $where = 1)
{
    //引入全局变量
    global $db;
    global $pre_;

    //表全名
    $table = $pre_.$table;

    //组装sql语句
    $sql = "DELETE FROM $table WHERE $where";

    //执行sql语句
    $res = mysqli_query($db, $sql);

    //判断语句是否执行成功
    if(!$res)
    {
        echo mysqli_error($db);
        exit;
    }

    //如果成功，返回影响行数
    return mysqli_affected_rows($db);
}

验证码

1.Login

删除职位时删除对应的员工的头像

数据库找到对应的员工头像

if($_POST)
{
    // 删除职位下对应的员工列表
    // 是否获取到id 
    $ids=($_POST['ids']) ? trim($_POST['ids']) : 0;

    // 找到id对应的职位下面的员工头像
    $sql="SELECT t1.avatar FROM
        (
            (SELECT avatar,jobid FROM pre_person as person WHERE person.jobid IN ($ids)) as t1
            LEFT JOIN 
            pre_job as t2
            ON t1.jobid=t2.id 
        )  ";
   
    $list=all($sql);

找到数据，提取

 // var_dump($list);
        // 提取数组到指定的下标元素出来放到一个新数组里去
    $avatar=array_column($list,'avatar');
 
    $avatar=array_filter($avatar);
    // 去重
    $avatar=array_unique($avatar);

    // 如果数组不为空才去删除图片
    $affect=delete("person","id IN($ids)");        
    // exit();
     // 删除职位
    $affect=delete("job","id IN($ids)");
    if($affect)
    {
        foreach($list as $item)
        {
            if(!empty($avatar))
            {
                foreach($avatar as $item)
                {
                    // 删除文件
                    @is_file($item) && @unlink($item);
                }
            }
        }
        ShowMsg('职位删除成功','job_list.php');
        exit;
    }else{
        ShowMsg('职位删除失败');
        exit;
    }

}

分类

其他

标签

前端

已于2022-9-7 15:45:44修改

51CTO

51CTO博客

51CTO学堂

公司通讯录 原创