先上图
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/button.css" rel="stylesheet" /> <script src="js/jquery.js"></script> <link href="css/font-awesome.css" rel="stylesheet" /> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> .header { width: 100%; padding: 0px; margin: 0px; background-color: #699C03; } .header-nav { min-width: 1170px; padding: 15px; height: 50px; } .header-nav-left { float: left; padding-left: 150px; width: 40%; } .header-nav-left h3 { font-size: 18px; line-height: 25px; margin: 0px; } .header-nav-right { float: left; width: 59.9999%; position: relative; } .header-nav-right ul { padding: 0px; margin: 0px; list-style: none; position: absolute; right: 25px; } .header-nav-right ul li { float: left; margin-left: 5px; color: #fff; } .header-nav-right ul li a { color: #fff; text-decoration: none; } .content { min-width: 1170px; padding: 0px; margin: 0px auto; } .content-side { width: 25%; float: left; margin: 20px 0px; padding: 20px; } .content-side ul { padding: 0px 0px 0px 50px; margin: 0px; list-style: none; } .content-side ul li { margin-bottom: 10px; } .content-side ul li a { display: inline-block; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0px 0px 5px 2px #eee; text-decoration: none; } .content-right { width: 59.999%; margin: 20px 0px; padding: 20px; float: left; } .content-right-about { height: 250px; width: 100%; } .content-right-form { margin: 0px auto; padding: 0px; width: 100%; overflow: hidden; } .write { margin-top: 10px; height: 250px; width: 99.99%; border: 1px solid #BBBBBB; border-radius: 4px; box-shadow: 0px 0px 5px 2px #DDDDDD; } .btn { margin-bottom: 5px; border: 1px solid #ccc; } .footer { border-top: 1px solid #bbb; min-width: 1200px; margin-top: 20px; } .submits button { background-color: #4CB0F9; border-radius: 4px; color: #fff; } .submits button:hover { background-color: #4F9FCF; } .on{ display:none; } .uptext{ width:100%; display:none; z-index:100; } .uptext-list{ width:900px; height:auto; margin:0px auto; position:fixed; left:0px; right:0px; top:50px; bottom:0px; z-index:101; background-color:#fff; } #pages{ padding:0px; margin:0px auto; list-style:none; } #pages li{ float:left; } .tablebody{ overflow:hidden; } </style> </head> <body style="position:relative"> <div class="header"> <div class="header-nav"> <div class="header-nav-left"> <h3>网站后台管理</h3> </div> <div class="header-nav-right"> <ul> <li><span>欢迎到来到网站后台</span></li> <li><a href="" οnclick="window.location.reload()">主菜单</a></li> <li><a href="">网站首页</a></li> <li><a href="">后台主页</a></li> <li><a href="">内容发布</a></li> <li><a href="">内容管理</a></li> <li><a href="">退出</a></li> </ul> </div> </div> </div> <div class="content"> <div class="content-side"> <ul> <li><a href="">删除内容</a></li> <li><a href="">更改内容</a></li> <li><a href="">查询内容</a></li> <li><a href="">搜索内容</a></li> </ul> </div> <div class="content-right"> <div class="content-right-form"> <form id="myform" action="" method="post"> <dl> <dt class="lead">标题</dt> <dd><input id="frist" type="text" name="title" class="form-control" /></dd> </dl> <dl> <dt>内容</dt> <dd><textarea name="body" style="width:100%;height:250px"></textarea></dd> </dl> <div class=" submits row" style="margin-top: 20px;"> <div class="col-lg-6 col-md-6"> <button id="addtext" type="submit" class="pull-left form-control ">增加</button> </div> <div class="col-lg-6 col-md-6"> <button type="reset" class="pull-right form-control ">重置</button> </div> </div> </form> </div> </div> <div class="content-right on"> <table cellpadding="0" class="table table-bordered"> <tr class="toptr"> <th>标题</th> <th>内容</th> <th>删除</th> </tr> <tbody class="tablebody"></tbody> </table> <ul id="pages"> </ul> </div> <div class="content-right on"> <table cellpadding="0" class="table table-bordered"> <tr class="toptr"> <th>标题</th> <th>内容</th> <th>修改</th> </tr> <tbody class="tablebody"></tbody> </table> <ul id="pages"> </ul> </div> <div class="content-right on"> <table cellpadding="0" class="table table-bordered"> <tr class="toptr"> <th>标题</th> <th>内容</th> </tr> <tbody class="tablebody"></tbody> </table> <ul id="pages"></ul> </div> <div class="uptext"> <div class="uptext-list"> <form id="myform" action="" method="post"> <dl> <dt class="lead">标题</dt> <dd><input type="text" name="title" class="form-control" /></dd> </dl> <dl> <dt>内容</dt> <dd><textarea style="width:100%;height:250px"></textarea></dd> </dl> <div class=" submits row" style="margin-top: 20px;"> <div class="col-lg-6 col-md-6"> <button id="uptext-button" type="submit" class=" pull-left form-control ">增加</button> </div> <div class="col-lg-6 col-md-6"> <button type="button" id="black" class="pull-right form-control ">取消</button> </div> </div> </form> </div> </div> <div class="content-right on"> <div style="padding:20px;" ><label for="search" id="searchs" style="margin-right:5px;border:1px solid #ccc;border-radius:4px;padding:4px;cursor:pointer;color:#fff;background-color:#4CB0F9">搜索</label><input id="key" style="border:1px solid #bbb;border-radius:4px;line-height:14px;font-size:14px;padding:6px 12px" type="text" placeholder="请输入关键字" /></div> <table cellpadding="0" class="table table-bordered"> <tr class="toptr"> <th>标题</th> <th>内容</th> </tr> <tbody class="tablebody"></tbody> </table> <ul id="pages"> </ul> </div> </div> <script> $(function(){ //增加数据 $("#addtext").on('click', function () { var $titleval = $("input[id=frist]").val(), $bodyval = $("textarea").val() if ($titleval == "" || $bodyval == "") { alert("标题与内容不能为空"); } else { var datas = { title:$titleval, body:$bodyval }; $.ajax({ type: 'post', timeout: 6000, data: datas, url: 'add.php', async: 'false', success: function (result) { $("input[type=text]").val(''); $("textarea").val(''); obj = JSON.parse(result);//json字符串类型转换成js对象(如果ajax中指定了dataType为json,那么久不需要转换英文指定了json得到的就是一个对象) if(obj.eger=="false"){ alert('标题或内容已存在'); }else if(obj=="ture"){ alert('添加成功'); } } , error: function () { alert('false'); } }) } return false; }) //end var table = function () { var tablebody = ''; $.ajax({ url: 'select.php', dataType: 'json', type: 'post', success: function (result) { $(".tablebody").empty(); $.each(result.datalist, function (i, data) { tablebody += "<tr><td>" + data.title + "</td><td>" + data.body + "</td><td style='text-align:cneter'><span><a href='#' id='remove' textid='" + data.ID + "'>删除</a></td></tr>" }) $(".tablebody").html(tablebody); } }) } var table1 = function(){ var tablebody = ''; $.ajax({ url: 'select.php', dataType: 'json', type: 'post', success: function (result) { $(".tablebody").empty(); $.each(result.datalist, function (i, data) { tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td><td style='text-align:cneter'><span><a href='#' id='uptext' textid='" + data.ID + "'>修改</a></td></tr>" }) $(".tablebody").html(tablebody); } }) } //查询翻页star var page = 0,//当前页初始化 onepage = 2,//每页数 all = 0, pagenum = 0;//页数初始化 var pg = 0; //页码索引 var table2 = function () { var tablebody = ''; var spanhtml=''; $.ajax({ url: 'select.php', dataType: 'json', type: 'post', success: function (result) { $(".tablebody").empty(); $(".content .content-right").eq(3).children('ul').empty(); all = result.datalist.length; pagenum = Math.ceil(all / 2); var start = page * onepage, end = (page + 1) * onepage; $.each(result.datalist, function (i, data){ if (i>=start&&i<end) { tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>" } }) for (pg = 0; pg <= 2; pg++) { if (page == pg) { spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px ;background-color:#21B9A4;color:#fff'>" + (page + 1) + "</span>";//当前页颜色突出 }else spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px'>" + (pg+1) + "</span>"; } $(".tablebody").html(tablebody); $(".content .content-right").eq(3).children('ul').append("<li style='cursor:pointer'>上一页</li><li style='cursor:pointer'>下一页</li>").children('li:eq(0)').after(spanhtml); } }) } var table3 = function () { var tablebody = ''; $.ajax({ url: 'select.php', dataType: 'json', type: 'post', success: function (result) { $(".tablebody").empty(); $.each(result.datalist, function (i, data) { tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>" }) $(".tablebody").html(tablebody); } }) } $(".content-side ul li").click(function () { var index = $(this).index(); $(".content .content-right").eq(index + 1).removeClass("on").siblings('div.content-right').addClass("on"); if (index == 1) { table1(); } else if(index==2){ table2(); } else if (index == 3) { table3(); }else{ table(); } return false; }) //上下翻页 $("ul#pages li").live('click', function () { var index = $(this).index(); if (index == 0 && page > 0) { page--; } else if (index == (pg+1) && page < pagenum-1) { page++; } else return false; table2(); }) //跳转页 $("ul#pages span").live('click', function () { page = $(this).index()-1; table2(); }) //删除数据 $("#remove").live('click', function () { var textid = $(this).attr('textid'); $.ajax({ type: 'post', data: { textid: textid }, url: 'remove.php', success: function () { table(); } }) return false; })//end //修改数据 $("#uptext").live('click', function () { textid = $(this).attr('textid'); var title = $(this).parents('td').siblings('#title').html(), body = $(this).parents('td').siblings('#bodyval').html(); $(".uptext input[type=text]").val(title); $(".uptext textarea").val(body); $(".uptext").show(); $("#black").click(function () { $('.uptext').hide(); }) $('#uptext-button').on('click', function () { var title = $(".uptext input[type=text]").val(), bodyval = $(".uptext textarea").val(); var uptext = { title: title, bodyval:bodyval, textid:textid, } $.ajax({ type: 'post', url: 'update.php', data: uptext, success: function () { $('.uptext').hide(); table1(); }, error: function () { alert('错误'); } }) return false; }) })//end //搜索 $("#searchs").live('click', function () { var $keys = $("input[id=key]").val(), resulthtml = '', i = 0; var keys = { keys: $keys }; $.ajax({ url: 'search.php', data: keys, dataType: 'json', type: 'post', success: function (result) { $(".tablebody").empty(); $.each(result.datalist, function (i,data) { resulthtml += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>" }) $(".tablebody").html(resulthtml); } }) }) }) </script> <div class="footer" style="position:fixed;bottom:20px;left:0px;right:0px"> <p class="text-center">Copyright © 2016.5.5 </p> </div> </body> </html>
主要改修的还是ajax部分,由于前面写的是基于mvc的后台所以前端部分会有点修改。以下是php后台代码
这一部分说实话弄了我半天,主要是一个去重复的功能,json对象这部分,后面会提到
增加数据 add.pp: <?php header("Content-type:text/html;charset=utf8"); $conne = mysql_connect("localhost","root","root")or die("链接失败".@mysql_error()); $select = mysql_select_db("test",$conne)or die("链接失败".@mysql_error()); $utfgbk = mysql_query("set names utf8"); $title = $_REQUEST['title']; $body = $_REQUEST['body']; $arraysone = array('one'=>'ture','two'=>'false'); $arrays = array(array('one'=>'ture','two'=>'false')); $row =mysql_query("select count(*) from article where title='$title'"); $text = mysql_fetch_row($row); $nam = $text[0]; if($nam==1){ echo json_encode(array("eger"=>$arraysone['two'])); }else{ $sql = mysql_query("insert into article(title,body)values('$title','$body')"); echo json_encode($arrays[0]['one']); } ?>
有些数据库连接操作我并没有弄到一个文件去,而且增删改查文件都是独立的,
删除部分
remove.php
<?php header("content-type:text/html;charset=utf8"); $conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error); $select = mysql_select_db("test",$conne)or die("连接失败".@mysql_error); $utf = mysql_query("set names uthf8"); $id = $_REQUEST['textid']; if($id){ mysql_query("delete from article where id=$id"); }else{ echo "false"; } ?>
修改部分
update.php
<?php header("content-type:text/html;charset=utf8"); $conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error()); $select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error()); $utf = mysql_query("set names utf8"); $id = $_REQUEST['textid']; $title = $_REQUEST['title']; $body = $_REQUEST['bodyval']; $sql=mysql_query("update article set title='$title',body='$body' where id=$id"); mysql_free_result($sql); ?>
查询部分,查询部分我是分开来的,一个是搜索,一个是列出所有内容并分页显示,分页功能写在前端代码部分
这是搜索的后台代码部分 search.php <?php header("content-type:text/html;charset=utf8"); $conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error()); $select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error()); $utf = mysql_query("set names utf8"); $arrays = array(); $i=0; $key = $_REQUEST['keys']; if($key){ $result = mysql_query("select*from article where title like'%$key%' or body like '%$key%'"); while($row = mysql_fetch_array($result,MYSQL_ASSOC)){ $arrays[$i]=$row; $i++; } echo json_encode(array("datalist"=>$arrays)); }else{ $result = mysql_query("select*from article"); while($row = mysql_fetch_array($result,MYSQL_ASSOC)){ $arrays[$i]=$row; $i++; } echo json_encode(array("datalist"=>$arrays)); } ?>
这是查询翻页部分,其实这部分删除和修改及搜索都有用到,所以这是通用的一部分 <?php header("Content-type:text/html;charset=utf8"); $conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error()) ; mysql_select_db("test", $conne)or die("数据库连接失败".@mysql_error()); mysql_query("set names utf8"); $listsql = mysql_query("select*from article"); $arrays = array(); $i=0; while($row = mysql_fetch_array($listsql,MYSQL_ASSOC)){ $arrays[$i]=$row; $i++; } echo json_encode(array('datalist'=>$arrays)); ?>
写的不好处请大家担待担待比我也刚学PHP不久,有些地方可能漏写什么东西,但是不影响大局