1、今日完成任务：
（1）前端个人中心模块里常用旅客信息列表显示以及添加、修改和删除操作。
（2）前端在线订票界面。
2、核心代码
passengers.php常用旅客显示界面:
<?php require_once 'function.php'; //显示所有数据 // $sql="select * from passengers;"; // $rows=sel($sql); //总个数 $sqlNum="select count(*) from passengers;"; $rowsNum=sel($sqlNum);//总个数 $pageSize=10;//每页10条 $pages=ceil($rowsNum[0]["count(*)"]/$pageSize);//页数 //分页 if(isset($_GET["page"])){ $page=$_GET["page"]; }else{ $page=1; } //var_dump($page); $start_from=($page-1)*$pageSize; $sqlPage="select * from passengers LIMIT $start_from, $pageSize;"; $rows=sel($sqlPage); ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人中心-客车网上售票系统</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/userInfo.css"/> <link rel="stylesheet" type="text/css" href="layer/mobile/need/layer.css"/> </head> <body> <!--头部--> <div class="header"> <div class="container clear"> <div class="left"><a href="index.html"><img src="img/logo_pc.png"/></a></div> <div class="right clear"> <ul class="nav left clear"> <li><a href="home.php">首页</a></li> <li><a href="ticketsOnline.php">在线订票</a></li> <li><a href="newsList.php">新闻公告</a></li> <li><a href="leftMessage.php">留言中心</a></li> <li class="active"><a href="userInfo.php">个人中心</a></li> </ul> <div class="right btns-links"> <a href="login.php">登录</a> <a href="register.php">注册</a> </div> </div> </div> </div> <!--常用旅客--> <div class="userInfo-box"> <div class="container clear"> <div class="left w18"> <ul> <li> <h3>资料设置</h3> <a href="userInfo.php">个人资料</a> <a href="passengers.php">常用旅客</a> </li> <li> <h3>我的订单</h3> <a href="">所有订单</a> <a href="">待支付订单</a> <a href="">已支付订单</a> </li> </ul> </div> <div class="right w80"> <div class="userInfo-ctn"> <h3>常用旅客</h3> <p><span class="common-passengers" onclick="passengers_add('添加','passengers-add.php',600,450)">+新增旅客</span></p> <?php if($rows){?> <table class="passengers-list" border="" cellspacing="" cellpadding=""> <tr> <th>姓名</th> <th>证件类型</th> <th>证件号码</th> <th>电话号码</th> <th>操作</th> </tr> <?php foreach ($rows as $key=>$value){?> <tr> <td><?php echo $rows[$key]["passengersName"]?></td> <td>身份证</td> <td><?php echo $rows[$key]["passengersCard"]?></td> <td><?php echo $rows[$key]["passengersTel"]?></td> <td> <a class="opera-btn opera-add" onclick="passengers_edit('编辑','passengers-add.php?id=<?php echo $rows[$key]["passengersId"];?>','600','450')" href="javascript:;">修改</a> <a class="opera-btn opera-del" onclick="passengers_del(this,<?php echo $rows[$key]["passengersId"];?>)" href="javascript:;">删除</a> </td> </tr> <?php }?> </table> <?php }else{?> <p style="font-size:16px;color:#ccc;">暂无乘客信息</p> <?php }?> <div class="pages"> <?php echo "<a href='passengers.php?page=1'>".'|<'."</a> "; // 第一页 for ($i=1; $i<=$pages; $i++) { ?> <a <?php if($page==$i){echo 'class="active"';}?> href='passengers.php?page=<?php echo $i;?>'><?php echo $i;?></a> <?php }; echo "<a href='passengers.php?page=$pages'>".'>|'."</a> "; // 最后一页 ?> </div> </div> </div> </div> </div> <!--优势--> <div class="register-advantage"> <div class="container"> <ul class="clear"> <li class="clear"> <div class="advantage-img left"><img src="img/icon_pinpaibaozheng.png"/></div> <div class="left"> <h4>品牌保证</h4> <p>提供正规的购票服务</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_kuaisufankui.png"/></div> <div class="left"> <h4>快速反馈</h4> <p>第一时间短信通知</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_fangbiankuaijie.png"/></div> <div class="left"> <h4>方便快捷</h4> <p>车站直接取票上车</p> </div> </li> <li class="clear"> <div class="advantage-img left"><img src="img/icon_zhifufangbian.png"/></div> <div class="left"> <h4>支付方便</h4> <p>支付宝微信</p> </div> </li> </ul> </div> </div> <!--底部--> <div class="register-footer"> <p>客车网上售票系统官方电话 400-100-1234 0371-1234567 客车网上售票信息公示</p> <p>客车网上售票系统 Copyright©2020-2030 版权所有 XXXXXX网络科技有限公司 豫ICP备15030935号-1</p> </div> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="layer/layer.js"></script> <script type="text/javascript"> /* //iframe层-父子操作 添加乘客信息 $(".common-passengers").click(function(){ layer.open({ title:'编辑', type: 2, area: ['600px', '450px'], fixed: false, //不固定 maxmin: true, close:true, content: 'passengers-add.php' }); }); */ function layer_show(title,url,w,h){ layer.open({ title:title, type: 2, area: [w+"px", h+"px"], fixed: false, //不固定 maxmin: true, close:true, content: url }); } //添加成功信息 function passengers_add(title,url,w,h){ layer_show(title,url,w,h); } //修改乘客信息 function passengers_edit(title,url,w,h){ layer_show(title,url,w,h); } //删除乘客信息 function passengers_del(obj,id){ layer.confirm("确认要删除吗？",function(){ //此处请求后台程序，下方是成功后的前台处理…… window.location.href="passengers_delAction.php?id="+id; $(obj).parents("tr").remove(); layer.msg('已删除!',{icon:1,time:1000}); }); } </script> </body> </html>
passenger-add.php添加界面：
<?php require_once 'function.php'; $Id=$_GET['id']; if(isset($Id)){ //echo "修改"; $sql="select * from passengers where passengersId='$Id';"; $rows=sel($sql); }else{ //echo "添加"; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .modal-dialog{ /*width: 400px;*/ margin: auto; background: #FFFFFF; } .modal-dialog .modal-content{padding: 20px 10px;} .modal-dialog .modal-content table{width: 100%;font-size: 14px;font-family: "微软雅黑";border-collapse: collapse;} .modal-dialog .modal-content table td{padding: 10px 0px;} .modal-dialog .modal-content table td input,.modal-dialog .modal-content table td select{height: 26px;padding: 2px 6px;background-color: #fff;border: 1px solid rgb(204, 204, 204);} #submit{background: #358EEC;color: #FFFFFF;width:80px;border-radius: 2px;text-align: center;border-color: #358EEC;height: 34px;} .tips{font-size: 12px;color: red;} </style> </head> <body> <div class="modal-dialog"> <div class="modal-content"> <form action="passengers-addAction.php?id=<?php echo $rows[0]['passengersId']?>" method="post"> <table border="0" cellspacing="" cellpadding=""> <tr> <td align="right" style="font-weight: bold;width:160px;">姓名：</td> <td> <input type="text" name="passengers-name" id="passengers-name" value="<?php echo $rows[0]['passengersName']?>" /> <span class="tips-name tips"></span> </td> </tr> <tr> <td align="right" style="font-weight: bold;">证件信息：</td> <td> <select name="card"> <option value="身份证">身份证</option> </select> </td> </tr> <tr> <td align="right" style="font-weight: bold;">省份证号：</td> <td> <input type="text" name="passengers-card" id="passengers-card" value="<?php echo $rows[0]['passengersCard']?>" /> <span class="tips-card tips"></span> </td> </tr> <tr> <td align="right" style="font-weight: bold;">手机号码：</td> <td> <input type="tel" name="passengers-tel" id="passengers-tel" value="<?php echo $rows[0]['passengersTel']?>" /> <span class="tips-tel tips"></span> </td> </tr> <tr> <td></td> <td><input type="submit" name="submit" id="submit" value="保存" /></td> </tr> </table> </form> </div> </div> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /*姓名身份证，手机号提交*/ function isChinaName(name) { var pattern = /^[\u4E00-\u9FA5]{1,6}$/; return pattern.test(name); } // 验证身份证 function isCardNo(card) { var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; return pattern.test(card); } // 验证手机号 function isPhoneNo(phone) { var pattern = /^1[345678]\d{9}$/; return pattern.test(phone); } /*用户名判断*/ function userName(inputid, spanid) { $(inputid).blur(function(e) { if ($.trim($(inputid).val()).length == 0) { $(spanid).html("请输入姓名！"); return false; } else { if (isChinaName($.trim($(inputid).val())) == false) { $(spanid).html("姓名不合法！"); return false; }else{ return true; } } }); $(inputid).focus(function() { $(spanid).html(""); }); }; /*身份证判断*/ function userID(inputid, spanid) { $(inputid).blur(function() { if ($.trim($(inputid).val()).length == 0) { $(spanid).html("请输入身份证号！"); return false; } else { if (isCardNo($.trim($(inputid).val())) == false) { $(spanid).html("身份证号不正确！"); e.preventDefault(); return false; }else{ return true; } } }); $(inputid).focus(function() { $(spanid).html(""); }); }; /*手机号判断*/ function userTel(inputid, spanid) { $(inputid).blur(function() { if ($.trim($(inputid).val()).length == 0) { $(spanid).html("请输入手机号！"); return false; } else { if (isPhoneNo($.trim($(inputid).val())) == false) { $(spanid).html("手机号不正确！"); e.preventDefault(); return false; }else{ return true; } } $(inputid).focus(function() { $(spanid).html(""); }); }); }; $(function(){ userName('#passengers-name', ".tips-name"); userID('#passengers-card', ".tips-card"); userTel('#passengers-tel', ".tips-tel"); $("#submit").click(function(){ if($.trim($('#passengers-name').val()).length==0){ $('.tips-name').show().html("请输入姓名！"); return false; } if($.trim($('#passengers-card').val()).length==0){ $('.tips-name').show().html("请输入身份证号！"); return false; } if($.trim($('#passengers-tel').val()).length==0){ $('.tips-tel').show().html("请输入电话！"); return false; } }); }); </script> </body> </html>
passenger-addAction.php
<?php require_once 'function.php'; $passengersName=$_POST["passengers-name"]; $passengersCard=$_POST["passengers-card"]; $passengersTel=$_POST["passengers-tel"]; $passengersId=$_GET["id"]; if($passengersId!=0){ //修改 $sql="update passengers set passengersName='$passengersName',passengersCard='$passengersCard',passengersTel='$passengersTel' where passengersId=$passengersId; "; $result=oper($sql); }else{ //添加 $sql="insert into passengers(passengersName,passengersCard,passengersTel)values('$passengersName','$passengersCard','$passengersTel');"; $result=oper($sql); } echo "<script>"; echo 'parent.location.href="passengers.php";'; echo "parent.layer.closeAll();"; echo "</script>"; ?>
删除
<?php require_once 'function.php'; $id=$_GET['id']; $sql="delete from passengers where passengersId=$id;"; $result=oper($sql); header("location:passengers.php"); ?>
在线订票界面：
