目录
前言
最近刚学完PHP和MysqL,历时半个多月时间完成了这样一个简单的算是人员管理系统吧,为了加深印象总结一下,还有很多不足之处,希望大家多多指正,一起学习!
概述
完成这个系统我们要用到的软件有VScode(大家应该都有),Navicat(数据库管理工具),XAMPP(大家如果没有装数据库,可以在下载时勾选里面的MysqL)。还需在文件中加入layui。
总共有以下这些文件:
内容
-
创建数据库表
第二个用来实现增删改查的user表
<?PHP
$dsn = "MysqL:host=127.0.0.1;port=3306;dbname=system;charset=utf8";
$MysqLAccount = "root";
$MysqLPassword = "";
// 创建PDO对象
$pdo = new PDO($dsn,$MysqLAccount,$MysqLPassword);
//设置取值方式
// $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
.实现登录
-
login.PHP
-
<!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>管理系统</title> <link rel="stylesheet" href="../utils/layui-v2.7.6/css/layui-css"> <script src="../utils/layui-v2.7.6/layui/layui.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> <style> body { background-color: #5FB878; /* display: flex; justify-content: center; align-items: center; */ } .Box { width: 330px; height: 230px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 6px; Box-shadow: rgba(29,203,122,0.3) 0px 0px 0px 3px; padding: 30px; Box-sizing: border-Box; display: flex; flex-direction: column; justify-content: space-between; } .btns { display: flex; justify-content: space-between; } </style> </head> <body> <div class="Box"> <h2>后台管理系统</h2> <form class="layui-form" action="../server/server_login.PHP" method="POST"> <div class="layui-form-item"> <div> <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div > <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <script> //Demo // layui.use('form',function() { // var form = layui.form; // //提交 // form.on('submit(formDemo)',function(data) { // layer.msg(JSON.stringify(data.field)); // return false; // }); // }); </script> </body> </html>
server_login.PHP
-
<?PHP require_once '../server/db.PHP'; //获取账号密码 $username = $_POST['username']; $password = $_POST['password']; //定义语句 $sql = "select * from admin where username = '$username' and password = '$password'"; //执行 $stmt = $pdo->query($sql); $user = $stmt->fetch(); //判断 if(empty($user)){ //未成功,返回登录页 echo "<script>alert('账号或密码错误'); history.back();</script>"; }else{ //成功 session_start(); //存储session $_SESSION['username'] = $user['username']; echo "<script>location.href = '../view/userlist.PHP'</script>"; }
-
实现列表
-
nav.PHP
-
<div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">后台管理系统</div> <!-- 头部区域(可配合layui 已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <!-- 移动端显示 --> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"> <i class="layui-icon layui-icon-spread-left"></i> </li> <li class="layui-nav-item layui-hide-xs"><a href="">控制台</a></li> <li class="layui-nav-item layui-hide-xs"><a href="">商品管理</a></li> <li class="layui-nav-item layui-hide-xs"><a href="">用户</a></li> <li class="layui-nav-item"> <a href="javascript:;">其他</a> <dl class="layui-nav-child"> <dd><a href="">menu 11</a></dd> <dd><a href="">menu 22</a></dd> <dd><a href="">menu 33</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="gg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item layui-nav-itemed"> <a class="" href="javascript:;">所有用户</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">用户列表</a></dd> <dd><a href="javascript:;">添加用户</a></dd> <dd><a href="javascript:;">menu 3</a></dd> <dd><a href="">the links</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">新闻管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">list 1</a></dd> <dd><a href="javascript:;">list 2</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="javascript:;">云市场</a></li> <li class="layui-nav-item"><a href="">发布商品</a></li> </ul> </div> </div>
userlist.PHP
-
<?PHP session_start(); // $_SESSION['username'] if (empty($_SESSION['username'])) { echo "<script>alert('请先登录');location.href = './login.PHP'</script>"; } //引入数据库连接文件 require_once '../server/server_userlist.PHP'; ?> <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width"> <title>首页</title> <link rel="stylesheet" href="../utils/layui-v2.7.6/layui/css/layui.css"> <script src="../utils/layui-v2.7.6/layui/layui.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> </head> <style> .btn1 { padding: 15px; } img { width: 30px; height: 30px; } </style> <body> <div class="layui-layout layui-layout-admin"> <?PHP include './nav.PHP' ?> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;"> <!-- 页面主体内容 --> <button type="buttton" class="layui-btn" onclick="location.href= 'useradd.PHP'"> <i class="layui-icon layui-icon-add-circle-fine"></i> 新增用户 </button> <!-- 显示用户信息的表格 --> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>编号</th> <th>账号</th> <th>密码</th> <th>姓名</th> <th>头像</th> <th>身份</th> <th>年龄</th> <th>生日</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <?PHP foreach ($users as $user) { echo "<tr> <td>{$user['id']}</td> <td>{$user['username']}</td> <td>{$user['password']}</td> <td>{$user['name']}</td> <td><img src='{$user['icon']}'></td> <td>{$user['type_name']}</td> <td>{$user['age']}</td> <td>{$user['birthday']}</td> <td>{$user['ctime']}</td> <td> <button type='button' class='layui-btn layui-btn-normal layui-btn-sm ' onclick='toEditPage(${user['id']})'>编辑</button> <button type='button' class='layui-btn layui-btn-danger layui-btn-sm ' onclick='delUser(${user['id']},\"{$user['name']}\")'>删除</button> </td> </tr>"; } ?> </tbody> </table> <!-- 分页 --> <div id="test1"></div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <!-- <script src="./layui/layui.js"></script> --> <script> //删除用户 function delUser(id,name) { layer.confirm('确定要删除'+name+'吗?',{ icon: 3,title: '提示' },function(index) { window.location.href = '../server/server_userdelete.PHP?id=' + id; layer.close(index); }); } //编辑用户 function toEditPage(id) { window.location.href = "./useredit.PHP?id=" + id; } // JS分页相关 layui.use('laypage',function() { var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号,count: 50 //数据总数,从服务端得到 }); }); //JS layui.use(['element','layer','util'],function() { var element = layui.element,layer = layui.layer,util = layui.util,$ = layui.$; //头部事件 util.event('lay-header-event',{ //左侧菜单事件 menuLeft: function(othis) { layer.msg('展开左侧菜单的操作',{ icon: 0 }); },menuRight: function() { layer.open({ type: 1,content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px','100%'],offset: 'rt' //右上角,anim: 5,shadeClose: true }); } }); }); </script> </body> </html>
server_userlist.PHP
-
<!-- 通过数据库获取用户数据 --> <?PHP //引入数据库连接文件 require_once '../server/db.PHP'; //定义sql语句 $sql = "select * from user"; //执行查询 $stmt = $pdo->query($sql); //处理结果集 $users = $stmt->fetchAll(); date_default_timezone_set('Asia/Shanghai'); // echo "<pre>"; // foreach ($users as $v){ // print_r($v); // } //对结果集中数据做转换 foreach ($users as &$item) { switch($item['type']) { case 0: $item['type_name'] = '校长'; break; case 1: $item['type_name'] = '教师'; break; case 2: $item['type_name'] = '学生'; break; } $item['ctime'] = date('Y-m-d H-i-s',$item['create_time']); }
-
-
新增用户
- useradd.PHP
-
<?PHP session_start(); // $_SESSION['username'] if (empty($_SESSION['username'])) { echo "<script>alert('请先登录');location.href = './login.PHP'</script>"; } //引入数据库连接文件 ?> <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width"> <title>新增用户</title> <link rel="stylesheet" href="../utils/layui-v2.7.6/layui/css/layui.css"> <script src="../utils/layui-v2.7.6/layui/layui.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> </head> <style> .btn1 { padding: 15px; } #show_img { width: 40px; height: 40px; display: none; } </style> <body> <div class="layui-layout layui-layout-admin"> <?PHP include './nav.PHP' ?> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding: 15px;width: 450px;"> <!-- 新增用户的表单 --> <form class="layui-form" action="../server/server_useradd.PHP" method="POST"> <div class="layui-form-item"> <label class="layui-form-label">账号</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">身份</label> <div class="layui-input-block"> <input type="radio" name="type" value="0" title="校长"> <input type="radio" name="type" value="1" title="教师"> <input type="radio" name="type" value="2" title="学生" checked> </div> </div> <div class="layui-form-item"> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-block"> <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-form-item"> <label class="layui-form-label">生日</label> <div class="layui-input-block"> <input type="text" name="birthday" class="layui-input" id="birthday"> </div> </div> <div class="layui-form-item"> <div class="layui-form-item"> <label class="layui-form-label">头像</label> <input type="hidden" name="icon"> <div class="layui-input-block"> <button type="button" class="layui-btn" id="pic"> <i class="layui-icon"></i>上传图片 </button> <img src=" " alt="" id="show_img"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> 底部固定区域 </div> </div> <!-- <script src="./layui/layui.js"></script> --> <script> //js // layui.use('form',function(){ // var form = layui.form; // //监听提交 // form.on('submit(formDemo)',function(data){ // return false; // }); // }); //头像上传相关操作 layui.use('upload',function() { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#pic' //绑定元素,url: '../server/upload.PHP' //上传接口,field:'pic',done: function(res) { console.log(res); //上传完毕回调 $("input[name='icon']").attr("value",res.data.path); $("input[name='pic']").attr("value",res.data.path); $("#show_img").attr("src",res.data.path).css('display',"inline-block") },error: function() { //请求异常回调 } }); }); // 日期相关操作 layui.use('laydate',function() { var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#birthday' //指定元素 }); }); //JS layui.use(['element',shadeClose: true }); } }); }); </script> </body> </html>
server_useradd.PHP
-
<!-- 新增用户的后端操作 --> <?PHP //引入数据库连接文件 require_once './db.PHP'; //获取表单参数 $username = $_POST['username'] ; $password = $_POST['password'] ; $name = $_POST['name'] ; $type = $_POST['type']; $age = $_POST['age'] ; $birthday = $_POST['birthday'] ; $icon = $_POST['icon'] ; $create_time = time(); //定义sql语句 $sql = "insert into user values (null,'$username','$password','$name','$icon',$type,$age,'$birthday',$create_time)"; //执行 $isSuccess = $pdo->exec($sql); //判断并处理结果 if($isSuccess) { echo "<script>location.href = '../view/userlist.PHP'</script>"; }else{ echo "<script>alert('新增失败');location.href = '../view/useradd.PHP'</script>"; }
-
-
删除用户
- server_userdelete.PHP
-
<?PHP //引入数据库连接文件 require_once './db.PHP'; //获取参数 $id = $_GET['id']; //定义sql $sql = "delete from user where id = " .$id; //执行sql $isSuccess = $pdo->exec($sql); //判断并处理结果 if($isSuccess) { echo "<script>location.href = '../view/userlist.PHP'</script>"; }else{ echo "<script>alert('删除失败');location.href = '../view/userlist.PHP'</script>"; }
-
-
编辑用户
- useredit.PHP
-
<?PHP include '../server/server_useredit.PHP' ?> <!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width"> <title>编辑用户</title> <link rel="stylesheet" href="../utils/layui-v2.7.6/layui/css/layui.css"> <script src="../utils/layui-v2.7.6/layui/layui.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> </head> <style> .btn1{ padding: 15px; } img{ width: 30px; height: 30px; } </style> <body> <div class="layui-layout layui-layout-admin"> <?PHP include './nav.PHP' ?> <?PHP $id=$_GET['id'] ?> <div class="layui-body"> <!-- 内容主体区域 --> <div style="padding:15px;width:450px"> <!-- 添加用户按钮 --> <button type="button" class="layui-btn layui-btn-sm layui-btn" onclick="location.href='./userlist.PHP'"> <i class="layui-icon layui-icon-left ">返回</i> </button> <form class="layui-form" action="../server/server_userupdate.PHP" method="POST"> <div class="layui-input-block"> </div> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <?PHP echo "<input type='text' name='name' required lay-verify='required' placeholder='{$name}' autocomplete='off' class='layui-input'>"; ?> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">账号</label> <div class="layui-input-block"> <?PHP echo " <input type='text' name='username' placeholder='{$username}' autocomplete='off' class='layui-input' >" ?> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <?PHP echo" <input type='password' name='password' required lay-verify='required' placeholder='{$password}' autocomplete='off' class='layui-input'>"; ?> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年龄</label> <div class="layui-input-block"> <?PHP echo "<input type='text' name='age' required lay-verify='required' placeholder='{$age}' autocomplete='off' class='layui-input'>" ?> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-block"> <?PHP echo " <input type='text' name='birthday' placeholder='{$birthday}' class='layui-input' id='birthday'>" ?> </div> </div> <?PHP $check0=""; $check1=""; $check2=""; switch($type){ case 0: $check0="checked"; break; case 1: $check1="checked"; break; case 2: $check2="checked"; break; } ?> <div class="layui-form-item"> <label class="layui-form-label">身份</label> <div class="layui-input-block" > <input type="radio" name="type" value="0" title="校长" <?PHP echo $check0; ?>> <input type="radio" name="type" value="1" title="老师" <?PHP echo $check1; ?>> <input type="radio" name="type" value="2" title="学生" <?PHP echo $check2; ?>> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">头像</label> <input type="hidden" name="icon"> <div class="layui-input-block"> <button type="button" class="layui-btn" id="pic"> <i class="layui-icon"></i>更换头像 </button> <img src="" id="show_img"> </div> </div> <input type='hidden' name='id' value='<?PHP echo $id ?>' class='layui-input' > <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> </div> </div> <script> layui.use('upload',function() { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#pic' //绑定元素,field: 'pic',done: function(res) { //上传完毕回调 $("input[name='icon']").attr("value",res.data.path); $("#show_img").attr("src",'inline-block'); },error: function() { //请求异常回调 } }); }); </script> <script> // <!-- 出生日期的script --> layui.use('laydate',function() { var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#birthday' //指定元素 }); }); </script> <script> //JS layui.use(['element',function() { var element = layui.element,$ = layui.$; //头部事件 util.event('lay-header-event',{ //左侧菜单事件 menuLeft: function(othis) { layer.msg('展开左侧菜单的操作',{ icon: 0 }); },menuRight: function() { layer.open({ type: 1,shadeClose: true }); } }); }); </script> </body> </html>
server_useredit.PHP
-
<?PHP //引入数据库连接文件 require_once '../server/db.PHP'; $id=$_GET['id']; $sql="select * from user where id=".$id; // echo $sql; $stmt=$pdo->query($sql); $user=$stmt->fetch(); $ids=$user["id"]; $name=$user["name"]; $username=$user["username"]; $password=$user["password"]; $age=$user["age"]; $birthday= $user["birthday"]; $type= $user["type"]; $icon=$user["icon"];
server_userupdate.PHP
-
<?PHP //引入数据库连接文件 require_once './db.PHP'; //获取表单参数 $username = $_POST["username"]; $name = $_POST["name"]; $password = $_POST["password"]; $age = $_POST["age"]; $birthday = $_POST["birthday"]; $type = $_POST["type"]; $icon = $_POST["icon"]; $id = $_POST["id"]; $sql = "update user set username='$username',name='$name',password='$password',age=$age,birthday='$birthday',type=$type,icon='$icon' where id='$id'"; print_r($sql); $stmt = $pdo->exec($sql); if ($stmt == true) { echo "<script>location.href='../view/userlist.PHP';</script>"; } else { echo "<script>alert('更新失败!');location.href='../view/useredit.PHP';</script>"; }
-
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。