CMS 实现过程(重点)

一. 程序结构介绍

1. 目录结构介绍

— cms 程序根目录

  1. -- cms.sql     数据库导出文件,可通过导入建立系统数据库
  3. -- controller.php    服务端接口处理程序
  5. -- js                js相关文件(jQuery)
  7. -- css             css 样式相关文件
  9. -- res             程序中的图片资源文件
  11. -- KindEditor    富文本编辑器
  13. -- home        前台页面文件
  15. -- admin      后台页面文件

2. 前后端交互过程

  • 基本通信过程示意图
    cms - 图1
  • 页面加载过程示意图
    cms - 图2
  • 实现过程示意图

cms - 图3

2.1 交互过程功能模块划分
  • index.html 负责前端页面的展示
  • controller.php 负责后端业务的逻辑处理
  • Database 负责数据的处理

2.2 交互过程实现步骤
  • 步骤一 页面基本布局框架实现与加载
  • 步骤二 通过Ajax向服务端发起请求,获取页面需要显示的数据
  • 步骤三 服务端接收客户端请求,并根据传递的参数进行业务的区分
  • 步骤四 在接口函数中通过PDO向数据库发起查询,并将查询结果返回
  • 步骤五 Ajax成功回调函数中接收服务端返回的数据,并将数据展示到页面中

2.3 按步骤实现过程

  • 步骤一 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.  <title>Document</title>
    9.  <style>
    10.      p{
    11.          width: 800px;
    12.          height: 50px;
    13.          margin: 0 auto;
    14.          margin-top: 100px;
    15.          line-height: 50px;
    16.          text-align: center;
    17.          font-weight: bold;
    18.          font-size: 20px;
    19.      }
    20.      div{
    21.          width: 800px;
    22.          height: 50px;
    23.          background: red;
    24.          margin: 0 auto;
    25.          line-height: 50px;
    26.          text-align: center;
    27.      }
    28.      ul{
    29.          list-style: none;
    30.          display: flex;
    31.          justify-content: space-between;
    32.          padding: 0;
    33.      }
    34.  </style>
    35. </head>
    36. <body>
    37.  <p>静态页面</p>
    38.  <div id="staticNav">
    39.      <ul>
    40.          <li><a href="list.html?id=1">创业资讯</a></li>
    41.          <li><a href="list.html?id=3">创业指导</a></li>
    42.          <li><a href="list.html?id=2">创业故事</a></li>
    43.          <li><a href="list.html?id=5">创业点子</a></li>
    44.          <li><a href="list.html?id=4">职场江湖</a></li>
    45.          <li><a href="list.html?id=6">求职攻略</a></li>
    46.          <li><a href="list.html?id=7">故事语录</a></li>
    47.          <li><a href="about.html">关于我们</a></li>
    48.      </ul>
    49.  </div>
    50.  <p>动态加载数据</p>
    51.  <div id="Nav">
    53.  </div>
    54. </body>
    55. </html>

  • 步骤二 

    1. <script src="../cms/js/jquery-1.11.3.js"></script>
    2.  <script>
    3.      $(function(){
    4.          $.get('controller.php',{"a":"getNavData"},function(data){
    6.          },'json');
    7.      });
    8.  </script>

  • 步骤三
    ```php <?php header(“content-type:text/html;charset=utf-8”);

    // 获取请求参数,进行业务判断 $act = $_GET[‘a’]; if($act == “getNavData”){

    1.    // 调用对应的业务处理函数
    2.  getNavData();

    }

?>

  2. -  步骤四  
  3. ```php
  4. <?php
  6.     // 数据库封装函数
  7.     function queryAll($sql){
  8.         $url = "mysql:host=localhost;dbname=cms";
  9.         $user = "root";
  10.         $pwd = "";
  11.         $conn = new PDO($url,$user,$pwd);
  12.         $st = $conn->query($sql);
  13.         $rs = $st->fetchAll(PDO::FETCH_ASSOC);
  14.         return $rs;
  15.     }
  17.     // 业务处理函数
  18.     function getNavData(){
  19.         $class = queryAll("select id,name  from class where type=0 order by sort");
  20.         echo json_encode($class);
  21.     }
  22. ?>

  • 步骤五 

    1. // Ajax 成功回调函数
    2. $.get('controller.php',{"a":"getNavData"},function (data){
    3. // 用于拼接内容的字符串
    4. var html = "<ul>";
    5. for(var i=0;i<data.length;i++){
    6.  var o = data[i];
    7.  html += "<li><a href='list.html?id=" + o.id + "'>" + o.name +"</a></li>";
    8. }
    9. html += "<li><a href='about.html'>关于我们</a></li>";
    10. html += "</ul>";
    12. // 将拼接内容设置到页面中
    13. $("#Nav").html(html);
    14. },"json");

3. Controller.php 服务端Ajax请求处理程序

  1. <?php 
  2. header("content-type:text/html;charset=utf-8");
  3. session_start();
  4. /**
  5.  * Ajax的处理类
  6.  */
  8. //########【页面Ajax逻辑处理】########################################
  11. $module = $_GET["m"];   //访问的模块：前台home、后台admin
  12. $act = "";  //操作
  14. if($module == "home"){
  15.     //前台
  16.     $act = $_GET["a"];
  18. }
  19. elseif ($module == "admin"){
  20.    // 后台
  21.    $act = $_GET["a"]; 
  22. }
  24. //########【前台接口函数封装函数】########################################
  30. //########【后台接口函数封装函数】########################################################################
  35. //########【MySQL封装函数】###############################################
  36. // 查询多条记录, 返回结果的二维数组
  37. function queryAll($sql){
  38.     $url = "mysql:host=localhost;dbname=cms";
  39.     $user = "root";
  40.     $pwd = "";
  41.     $conn = new PDO($url,$user,$pwd);
  42.     $st = $conn->query($sql);
  43.     $rs = $st->fetchAll(PDO::FETCH_ASSOC);
  44.     return $rs;
  45. }
  46. // 查询单条记录,返回结果的一维数组
  47. function queryOne($sql){
  48.     $url = "mysql:host=localhost;dbname=cms";
  49.     $user = "root";
  50.     $pwd = "";
  51.     $conn = new PDO($url,$user,$pwd);
  52.     $st = $conn->query($sql);
  53.     $rs = $st->fetch(PDO::FETCH_ASSOC);
  54.     return $rs;
  55. }
  56. // 执行增删改,返回影响结果
  57. function execute($sql){
  58.     $url = "mysql:host=localhost;dbname=cms";
  59.     $user = "root";
  60.     $pwd = "";
  61.     $conn = new PDO($url,$user,$pwd);
  62.     $row = $conn->exec($sql);
  63.     return $row;
  64. }

二. 前台页面实现

1. index.html

index页面功能模块

cms - 图4

1.1 获取展示分类标题
  • 请求目标: 前台m=home
  • 请求动作: a=getClass

controller.php

  1. if($act == "getClass"){
  2.       getClass();
  3. }
  5. // 获取分类函数
  6. function getClass(){
  7.     //获得所有分类
  8.     $class = queryAll("select id,name  from class where type=0 order by sort");
  9.     echo json_encode($class);
  10. }

页面中getClass函数

  1. //获得所有分类
  2. function getClass(){
  3.   // 发起请求,获取分类数据
  4.   $.get("../controller.php?m=home&a=getClass",function(data){
  5.     // 拼接 页头和页脚的内容
  6.     var p1 = "<ul>";
  7.     // 页头的导航条需要,页脚不需要
  8.     var p2  = "<li><a href='index.html'>首页</a></li>";
  9.     // 中间分类内容
  10.     var p3 = "";
  11.     // 遍历请求返回的数据
  12.     for(var i=0;i<data.length;i++){
  13.       // 拿到数据
  14.       var o = data[i];
  15.       //使用字符串形式拼接页面内容,点击跳转后传入分类的id,方便对应页面获取该类的数据
  16.       p3 += "<li><a href='list.html?id=" + o.id + "'>" + o.name +"</a></li>";
  17.     }
  18.     p3 += "<li><a href='about.html'>关于我们</a></li>";
  19.     p3 += "</ul>";
  21.     // 页头包含首页
  22.     var s1 = p1 + p2 + p3;
  23.     // 页脚不包含首页
  24.     var s2 = p1 + p3;
  25.     // 分别设置页头和页脚
  26.     // 通过标签名 header 找到页面位置,并将内容显示到页面中
  27.     $("header").html(s1);
  28.     // 通过ID名 footer 找到页面位置,并将内容显示到页面中
  29.     $("#footer").html(s2);
  30.   },"json");
  31. }

1.2 获取展示分类数据(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=getClassData

controller.php

  1. // 路由判断
  2. ...
  3. else if($act == "getClassData"){
  4.   getClassData();
  5. }
  6. ...
  10. // 获取分类数据函数
  11. function getClassData(){
  12.     // 返回数据格式
  13.     /**
  14.      *  [[name: 标题 , items:[item1, item2,... ], ...]
  15.      */
  16.     $data = [];
  17.     // 先获取分类标题
  18.     $class = queryAll("select id, name from class where type=0 order by sort");
  20.     // 遍历标题,获取每个标题对应的数据
  21.     foreach($class as $obj){
  22.          //获得所有分类中按时间排序后的前5条数据
  23.         $items= queryAll("select id, title, images, click from content where classId={$obj['id']} order by date desc limit 5");
  24.         // 创建一个关系数组,使用分类名做为key, 使用分类对应数据做为 Value
  25.         $tmp = ["name"=>$obj['name'], "items"=>$items];
  26.         // 添加到数组中
  27.         $data[] = $tmp;
  28.     }
  29.       // 最后返回的是一个索引数组,对应的每个元素是每一个分类的关系数组
  30.     echo json_encode($data);
  31. }

页面中getClassData函数

  1. //获得所有分类数据
  2. function getClassData(){
  3.   $.get("../controller.php?m=home&a=getClassData",function(data){
  4.     // 调用页面内容设置函数来设置内容
  5.     setContent( data );
  6.   },"json");
  7. }
  9. // 设置页面内容
  10. function setContent(data){
  12.   // 每一个分类,都被单独的放到一个section标签中
  13.   // 该标签中包含分类标题和分类内容两部分
  14.   for(var i=0;i<data.length;i++){
  15.     var html = "";
  16.     // 获取单个分类
  17.     var item = data[i];
  19.     // 设置分类标题
  20.     html += '<div class="title">';
  21.     html += '<img src="../res/icon_text3.png" />' + item.name;
  22.     html += '</div>';
  23.     // 追加到页面中
  24.     $("#s"+i).append(html);
  26.     // 获取内容数组
  27.     var items = item.items;
  29.     // 拼接行内分页内容item
  30.     var row = "";
  31.     row += '<div class="row">';
  32.     for(var j=0;j<items.length;j++){
  33.       var o = items[j];
  34.       row += '<div>';
  35.       row += '<img src="' + o.images + '"/>';
  36.       row += '<div class="t">' + o.title + '</div>';
  37.       row += '<div class="msg">';
  38.       row += '<div>' + item.name + '</div>';
  39.       row += '<div>人气：'+ o.click + '</div>';
  40.       row += '</div>';
  41.       row += '</div>';
  42.     }
  43.     row += '</div>';
  44.     $("#s"+i).append(row);
  45.   }
  46. }

1.3 获取展示排序数据
  • 请求目标: 前台m=home
  • 请求动作: a=getRank

controller.php

  1. // 路由判断
  2. ...
  3. else if($act == 'getRank'){
  4.   getRank();
  5. }
  6. ...
  9. // 获取推荐排行函数
  10. function getRank(){
  11.       // 查询排行数据
  12.     $rank = queryAll('select id, title  from content order by homePageWeight desc limit 10;');
  13.       // 服务端返回数据的另一种形式,直接返回拼接好的页面中要显示的内容
  14.     $html = '';
  15.     foreach($rank as $v){
  16.           // 通过查询结果拼接 html 代码,将文章 ID 做为参数放到地址中,在跳转内容页面时,
  17.           // 可以通过ID获取该页面的内容
  18.         $html .= "<li><span>.</span> <a href='content.html?id={$v['id']}'>{$v['title']}</a></li>";
  19.     }
  20.     echo $html;
  21. }

页面中getRank函数

  1. // 获取新闻排行
  2. function getRank(){
  3.   $.get("../controller.php?m=home&a=getRank",function(data){
  4.     // 因为请求返回的数据就是页面的HTML代码,所以直接添加到页面中
  5.     $("#rank").html(data);
  6.   });
  7. }

1.4 获取展示ICP备案信息
  • 请求目标: 前台m=home
  • 请求动作: a=getIcp

controller.php

  1. // 路由判断
  2. else if($act == "getIcp"){
  3.   getIcp();
  4. }
  6. // 获取备案信息的内容
  7. function getIcp(){
  8.     $icp = queryAll('select IcpId from website;');
  9.     echo json_encode($icp); 
  10. }

页面中的getICP函数

  1. // 获取备案号
  2. function getIcp(){
  3.   $.get("../controller.php",{'m':"home",'a':"getIcp"},function (data){
  4.     $('#icp').html(data[0].IcpId);
  5.   },"json");
  7. }

1.5 获取展示轮播图数据(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=getIcp

controller.php

  1. // 路由判断
  2. else if($act == "getLbt"){
  3.   getLbt();
  4. }
  6. // 获取轮播图数据
  7. function getLbt(){
  8.     $imgs = queryAll('select sort,name,url from rotationchart order by sort;');
  9.     echo json_encode($imgs);
  10. }

页面中的getLbt函数及轮播图按钮事件绑定函数

  1. // 获取轮播图数据
  2. function getLbt(){
  3.   $.get("../controller.php",{'m':"home",'a':"getLbt"},function (data){
  4.     lbtImgs = data;
  5.     var obj = lbtImgs[0];
  6.     $(".lbt img").attr({"src":obj.url});
  7.     $(".lbt>.txt").html(obj.name);
  8.   },"json");
  9. }
  10. // 绑定事件方法
  11. function bindEvent(){
  12.   $(".leftBtn").click(function(){
  13.     lbtIdx--;
  14.     if(lbtIdx < 0) lbtIdx = lbtImgs.length-1;
  15.     var obj = lbtImgs[lbtIdx];
  16.     $(".lbt img").attr({"src":obj.url});
  17.     $(".lbt>.txt").html(obj.name);
  18.     console.log("left");
  19.   }); 
  20.   $(".rightBtn").click(function(){
  21.     lbtIdx++;
  22.     if(lbtIdx == lbtImgs.length) lbtIdx = 0;
  23.     var obj = lbtImgs[lbtIdx];
  24.     $(".lbt img").attr({"src":obj.url});
  25.     $(".lbt>.txt").html(obj.name);
  26.     console.log("right");
  27.   });
  28. }

2. list.html

list页面功能模块

cms - 图5

2.1 导航,页脚,备案信息可复用index.html内容
  • 请求目标: 前台m=home
  • 导航,页脚
    • 请求动作: a=getClass
  • 备案信息
    • 请求动作: a=getIcp

2.2 获取推荐文章
  • 请求目标: 前台m=home
  • 请求动作: a=getListTj

controller.php

  1. // 路由判断
  2. ... 
  3. else if($act == "getListTj"){
  4.   getListTj();
  5. }
  6. ...
  8. // 获取推荐文章 
  9. function getListTj(){
  10.     $tj = queryAll("select id,title,images from content order by classificationWeight desc limit 4;");
  11.     echo json_encode($tj);
  12. }

页面中getListTj函数实现

  1. // 获取推荐文章
  2. function getListTj(){
  3.   $.get("../controller.php",{"m":"home","a":"getListTj"},function(data){
  4.     var html = "";
  5.     for(var i=0;i<data.length;i++){
  6.       var o = data[i];
  7.       html += "<div>";
  8.       html += "    <div><img src='" + o.images+ "' /></div>";
  9.       html += "    <div><a href='content.html?id=" + o.id +"'>" + o.title + "</a></div>";
  10.       html += "</div>";
  11.     }
  12.     $("#tj").append(html);
  13.   },"json");
  14. }

2.3 获取热门浏览
  • 请求目标: 前台m=home
  • 请求动作: a=getListHot

controller.php

  1. // 路由判断
  2. ... 
  3. else if($act == "getListHot"){
  4.   getListHot();
  5. }
  6. ...
  8. // 获取热门浏览
  9. function getListHot(){
  10.     $hot = queryAll("select id,title  from content order by click desc limit 10;");
  11.     echo json_encode($hot);
  12. }

页面中getListHot函数实现

  1. // 获取热门浏览
  2. function getListHot(){
  3.   $.get("../controller.php",{"m":"home","a":"getListHot"},function(data){
  4.     var html = "";
  5.     for(var i=0;i<data.length;i++){
  6.       var o = data[i];
  7.       html += '<li><span>.</span> <a href="content.html?id='+o.id+'">' +o.title+ '</a></li>';
  8.     }
  9.     $("#hot").html(html);
  10.   },"json");
  11. }

2.4 获取站点分类
  • 请求目标: 前台m=home
  • 请求动作: a=getSiteClass

controller.php

  1. // 路由判断
  2. ... 
  3. else if($act == "getSiteClass"){
  4.   getSiteClass();
  5. }
  6. ...
  8. // 获取网站分类
  9. function getSiteClass(){
  10.     $sc = queryAll("select id, name  from class order by sort;");
  11.     echo json_encode($sc);
  12. }

页面中getSiteClass函数实现

  1. // 获取侧边栏网站分类
  2. function getSiteClass(){
  3.   $.get("../controller.php?m=home&a=getSiteClass",function(data){
  4.     var html = "";
  5.     for(var i=0;i<data.length;i++){
  6.       var o = data[i];
  7.       html += '<li><span>.</span> <a href="list.html?id='+ o.id +'">' + o.name + '</a></li>';
  8.     }
  9.     $("#siteClass").html(html);
  10.   },"json");
  11. }

2.5 获取友情链接
  • 请求目标: 前台m=home
  • 请求动作: a=getLinks

controller.php

  1. // 路由判断
  2. ... 
  3. else if($act == "getLinks"){
  4.   getLinks();
  5. }
  6. ...
  8. // 获取友情链接
  9. function getLinks(){
  10.     $links = queryAll("select id,name,url from links;");
  11.     echo json_encode($links);
  12. }

页面中getLinks函数实现

  1. // 获取友情链接
  2. function getLinks(){
  3.   var html = '';
  4.   $.get("../controller.php",{"m":"home","a":"getLinks"},function (data){
  5.     for(var i=0;i<data.length;i++){
  6.       var o = data[i];
  7.       html += '<li><span>.</span> <a href="'+ o.url+'">' + o.name + '</a></li>';
  8.     }
  9.     $("#links").html(html);
  10.   },"json");
  12. }

2.6 获取列表页面内容(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=getContent

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "getContent"){
  4.     // 获取分类ID和当前页数
  5.     $cid = $_GET["cid"];
  6.     $page = isset($_GET["page"]) ? $_GET["page"] : 1;
  7.     getContent($cid, $page);
  8.   }
  9. ...
  13. // 获取内容
  14. function getContent($cid, $page){
  16.      // 页面显示的记录数
  17.      $pageNum = 8;
  19.     // 获取分类名
  20.     $c = queryOne("select name from class where id = {$cid}");
  22.     // 获取总记录数
  23.     $allNum = queryAll("select count(*) as num from content where classId = {$cid}")[0]["num"];
  25.     // 获取分类的内容
  26.     $startPage = ($page-1) * $pageNum;
  27.     $contents = queryAll("select id,title,images,date,content from content where classId = {$cid} limit {$startPage}, {$pageNum}");
  29.     // 总页数
  30.     $allPage = ceil($allNum / $pageNum);
  32.     // 页码的配置信息
  33.     $pageInfo = ["currentPage"=>$page, "allPage"=> $allPage];
  35.     // 组合页面信息
  36.     $tmp = ["name"=>$c["name"], "content"=>$contents, "pageInfo"=>$pageInfo];
  39.     echo json_encode($tmp);
  41. }

页面中getContent函数实现

  1. // 获取内容
  2. function getContent(){
  3.   // 通过请求地址将分类ID取出来
  4.   var cid = window.location.href.split("id=")[1];
  5.   console.log(cid);
  6.   $.get("../controller.php",{"m":"home","a":"getContent","cid":cid},function(data){
  7.     // 将返回的数据,做为参数传给 setPageContent函数,来设置页面内容  
  8.     setPageContent(cid, data);
  9.   },"json")
  10. }
  14. // 设置页面内容的函数,用来首次请求和页码响应后,获取数据展示到页面中
  15. function setPageContent(cid, data){
  16.   var cn = data.name;
  17.   var content = data.content;
  18.   // 设置分类标题
  19.   $("#className").html(cn);
  21.   // 拼接内容
  22.   var html = "";
  23.   // 添加导航下面的背景图片
  24.   html += '<div class="t">';
  25.   html += '  <img src="../res/bg2.jpg" />';
  26.   html += '</div>';
  27.   for(var i=0;i<content.length;i++){
  28.     var o = content[i];
  29.     // 截取内容中的第一段内容做为简单描述
  30.     var desc = o.content.split('</p>')[0];
  31.     // 去掉内容p标签上的样式
  32.     desc = desc.split('">')[1].trim();
  33.     // 处理时间
  34.     date = o.date.split(" ")[0];
  36.     // 拼接页面内容
  37.     html += '<div class="row">';
  38.     html += '  <img src="' + o.images +'" />';
  39.     html += '  <div>';
  40.     html += '    <div> <a href="content.html?id=' + o.id + '">'+ o.title +'</a> </div>';
  41.     html += '    <div class="desc">' + desc+ '</div>';
  42.     html += '    <div>';
  43.     html += '      <img src="../res/icon_time.png" />' + date;
  44.     html += '    </div>';
  45.     html += '  </div>';
  46.     html += '</div> ';
  47.   }
  49.   // 设置页码内容
  50.   var pageInfo = data.pageInfo;
  52.   html += "<ul class='page_list'>";
  53.   html += "  <li  onclick=getPageContent("+ cid + "," + 1 +")>首页</li>";
  54.   var prePage = pageInfo.currentPage == 1? 1 : pageInfo.currentPage - 1;
  55.   html += "  <li  onclick=getPageContent("+ cid + "," + prePage +")>前一页</li>";
  56.   for(var i=1;i<=pageInfo.allPage;i++){
  57.     if(i == pageInfo.currentPage)
  58.       // 绑定分页获取数据的方法
  59.       html += "  <li class='num active' onclick=getPageContent("+ cid + "," + i +")>" + i + "</li>";
  60.     else
  61.       html += "  <li class='num' onclick=getPageContent("+ cid + "," + i +")>" + i + "</li>";
  63.   }
  64.   var nextPage = pageInfo.currentPage == pageInfo.allPage ? pageInfo.allPage : parseInt(pageInfo.currentPage) + 1;
  65.   html += "  <li onclick=getPageContent("+ cid + "," + nextPage +")>后一页</li>";
  66.   html += "  <li  onclick=getPageContent("+ cid + "," + pageInfo.allPage +")>尾页</li>";
  67.   html += "</ul>";
  69.   // 先将页面中原来的内容清空
  70.   $("#list_content").empty();
  71.   // 将新内容添加到页面中
  72.   $("#list_content").append(html);
  73. }

2.7 获取分页内容(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=getContent

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "getContent"){
  4.     // 获取分类ID和当前页数
  5.     $cid = $_GET["cid"];
  6.     $page = isset($_GET["page"]) ? $_GET["page"] : 1;
  7.     getContent($cid, $page);
  8.   }
  9. ...

页面中getPageContent函数实现

  1. // 获取分页数据的内容
  2. function getPageContent(cid,page){
  3.   $.get("../controller.php",{"m":"home","a":"getContent","cid":cid,"page":page},function(data){
  4.     // 将返回的数据,做为参数传给 setPageContent函数,来设置页面内容  
  5.     setPageContent(cid, data);
  6.   },"json")
  7. }

3. content.html

content页面功能模块划分

cms - 图6

3.1 导航,页脚,推荐,热门,分类,链接可复用list页面内容
  • 请求目标: 前台m=home
  • 导航,页脚
    • 请求动作: a=getClass
  • 备案信息
    • 请求动作: a=getIcp
  • 推荐文章
    • 请求动作: a=getListTj
  • 热门浏览
    • 请求动作: a=getListHot
  • 网站分类
    • 请求动作: a=getSiteClass
  • 友情链接
    • 请求动作: a=getLinks

3.2 获取用户状态信息
  • 请求目标: 前台m=home
  • 请求动作: a=getUserStatus

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "getUserStatus"){
  4.     getUserStatus();
  5.   }
  6. ...
  8. // 返回用户状态,如果登陆返回用户名,未登陆返回空字符串
  9. function getUserStatus(){
  10.     $userStatus = [];
  11.     $userStatus["uid"] = isset($_SESSION["uid"]) ?  $_SESSION["uid"] : "0";
  12.     $userStatus["user"] = isset($_SESSION["user"]) ?  $_SESSION["user"] : "匿名用户";
  13.     echo json_encode($userStatus);   
  14. }

页面中getUserStatus函数

  1. // 获取用户状态
  2. function getUserStatus(){
  3.   $.get("../controller.php",{"m":"home","a": "getUserStatus"}, function (data){
  4.     // 将当前用户的用户添加到评论前的名称上
  5.     $(".pinglun .plbox .pluser").html(data.user);
  6.     userStatus = data;
  7.     console.log(userStatus);
  8.   },"json");
  9. }

3.3 获取文章内容(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=getNewsContent

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "getNewsContent"){
  4.     getNewsContent();
  5.   }
  6. ...
  8. // 返回文章内容,及上一条下一条数据
  9. function getNewsContent(){
  10.     $id1 = $_GET["cid"];
  11.     $id0 = $id1-1;
  12.     $id2 = $id1+1;
  13.     $content = queryAll("select id, title,content, date, userId, click, supportNum, classId from content where id in({$id0}, {$id1} ,{$id2});");
  14.     // 判断返回记录是否是三条(上一条,当前条,下一条)
  15.     if(count($content) < 3){
  16.         // 如果第一条是当前条,说明没有上一条数据
  17.         if($content[0]["id"] == $id1){
  18.             // 在第一个位置,添加"没有了"
  19.             array_unshift($content, ["id"=>0, "title"=>"没有了"]);            
  20.         }else{
  21.             array_push($content, ["id"=>0, "title"=>"没有了"]);
  22.         }
  23.     }
  24.     // 通过结果中的userId查发布者,将发布者保存到数据中
  25.     $user = queryOne("select userName from user where id = {$content[1]['userId']}");
  26.     $content[1]["userId"] = $user;
  28.     // 通过查询结果中的classId,将该文章所属的分类名取出
  29.     $className = queryOne("select name from class where id = {$content[1]["classId"]}");
  30.     $content[1]["classId"] = $className["name"];
  32.     // 获取Uid,cid, 判断当前用户是否点赞
  33.     $uid = isset($_SESSION["uid"]) ?  $_SESSION["uid"] : "0";
  34.     $isSupport = queryOne("select issupport from support where contentId = {$id1} and userId = {$uid}");
  35.     // 如果该用户在该文章没有点赞记录,或者点赞状态为0
  36.     if($isSupport == false || $isSupport["issupport"] == "0"){
  37.         // 没点赞
  38.         $content[1]["isSupport"] = 0;
  39.     }else{
  40.         // 点赞了
  41.         $content[1]["isSupport"] = 1;
  42.     }
  43.     // 将数据返回 
  44.     echo json_encode($content);    
  45. }

页面中getNewsContent函数

  1. // 获取内容
  2. function getNewsContent(){ 
  3.   $.get("../controller.php",{"m":"home","a":"getNewsContent", "cid":cid},function(data){
  4.     console.log(data);
  5.     // 设置分类标题
  6.     cn = data[1].classId;
  7.     $("#className").html(cn);
  8.     // 设置文章内容
  9.     for(var i=0;i<data.length;i++){
  10.       var o = data[i];
  11.       if(i == 0){
  12.         // 上一篇
  13.         $("#pre>a").attr({"href": (o.id !=0? "content.html?id=" +o.id:"javascript:;") });
  14.         $("#pre>a>span").html(o.title);
  15.       }else if(i == 1){
  16.         // 当前文章 
  17.         // 标题
  18.         $(".detail .ctitle .row1").html(o.title);
  19.         // 赞数
  20.         if(o.isSupport != "0")
  21.           $(".zan img").attr({"src":"../res/newHeart2021Active.png"});
  22.         else
  23.           $(".zan img").attr({"src":"../res/newHeart2021Black.png"});
  25.         $(".zan span").html(o.supportNum);
  26.         // 发布时间
  27.         $(".fdate").html(o.date);
  28.         // 作者
  29.         $(".author").html(o.userId.userName);
  30.         // 围观
  31.         $(".look").html(o.click);
  32.         // 内容
  33.         $(".content_text").html(o.content);
  35.       }else{
  36.         // 下一篇
  37.         $("#next>a").attr({"href": (o.id !=0? "content.html?id=" +o.id:"javascript:;") });
  38.         $("#next>a>span").html(o.title);
  39.       }
  40.     }
  41.   },"json")
  42. }

3.4 点赞事件逻辑(重点)
  • 请求目标: 前台m=home
  • 请求动作: a=clickZan

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "clickZan"){
  4.     clickZan();
  5.   }
  6. ...
  8. // 点赞请求
  9. function clickZan(){
  10.     $cid = $_GET["cid"];
  11.     $uid = $_GET["uid"];
  12.     // var_dump($cid);
  13.     // var_dump($uid);
  14.     $isSupport = queryOne("select issupport from support where contentId = {$cid} and userId = {$uid}");
  15.     // var_dump($isSupport);
  16.     // var_dump("-----");
  17.     // 点赞状态取反
  18.     if($isSupport == false){
  19.         // 没有点赞的情况,插入新点赞记录
  20.         $isSup = "1";
  21.         // 改变点赞表中,文章/用户/是否点赞状态
  22.         execute("insert into support (contentId,userId,issupport) values({$cid},{$uid},{$isSup})");
  23.         // 改变文章的总赞数
  24.         execute("UPDATE content set supportNum = supportNum + 1 where id = {$cid};");
  25.     }else{
  26.         // 如果有点赞记录,取反
  27.         $isSup = $isSupport["issupport"] == "1" ? "0" : "1";
  28.         // 改变点赞表中,文章/用户/是否点赞状态
  29.         execute("update support set issupport = {$isSup} where contentId = {$cid} and userId = {$uid}");
  30.         // 改变文章的总赞数
  31.         if($isSup == "0"){
  32.             execute("UPDATE content set supportNum = supportNum - 1 where id = {$cid};");
  33.         }else{
  34.             execute("UPDATE content set supportNum = supportNum + 1 where id = {$cid};");
  35.         }
  36.     }
  37.     echo json_encode(["isSupport"=> $isSup]);
  39. }

页面中clickZan函数

  1. // 点赞事件
  2. function clickZan(){
  3.   if(userStatus.uid == "0"){
  4.     window.location = 'login.html';
  5.   }else{
  6.     $.get("../controller.php",{"m":"home", "a":"clickZan", "cid":cid, "uid":userStatus.uid},function (data){
  7.       var num = parseInt($(".zan span").html());
  8.       console.log(num);
  9.       console.log(data);
  10.       if(data.isSupport == "1") 
  11.       {
  12.         alert("YesZan");
  13.         $(".zan img").attr({"src":"../res/newHeart2021Active.png"});
  14.         $(".zan span").html(num + 1);
  15.       }
  16.       else
  17.       {
  18.         alert("NoZan");
  19.         $(".zan img").attr({"src":"../res/newHeart2021Black.png"});
  20.         $(".zan span").html(num - 1);
  21.       }
  22.     },"json");
  23.   }
  24. }

3.5 获取用户评论
  • 请求目标: 前台m=home
  • 请求动作: a=getUserStatus

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "getComments"){
  4.     getComments();
  5.   }
  6. ...
  8. // 获取评论
  9. function getComments(){
  10.     $cid = $_GET["cid"];
  11.     $comments = queryAll("select id, userId, content, time from comments where contentId = {$cid} order by time desc");
  12.     // 将评论者Id 修改为评论者姓名 
  13.     foreach($comments as &$item){
  14.         $item['user'] = queryOne("select loginName as name from user where id = {$item['userId']}")["name"];
  15.         // 处理时间 
  16.         $item["time"] = date("Y-m-d H:i:s", $item['time']);
  17.         // 添加 当前用户的id
  18.         $item["currentUserId"] = isset($_SESSION["id"])?$_SESSION["id"]:0;
  19.     }
  20.     echo json_encode($comments);
  21. }

页面中getComments函数

  1. // 获取用户评论
  2. function getComments(){
  3.   $.get("../controller.php", {"m":"home","a": "getComments","cid":cid}, function (data){
  5.     // 清空原有内容
  6.     $(".plcontent").empty();
  7.     // 拼接评论内容
  8.     var html = '';
  9.     for(var i=0;i<data.length;i++){
  10.       var o = data[i];
  11.       html += '<div class="msgItem">';
  12.       html += '      <div class="msguser"><span class="user">' + o.user + '</span>';
  13.       if(o.currentUserId == o.userId){                
  14.         html += '<span class="msgdel"></span></div>';
  15.       }else{
  16.         html += '</div>';
  17.       }
  18.       html += '      <div class="msg">' + o.content + '</div>';
  19.       html += '      <div class="msgtime">' + o.time + '</div>';
  20.       html += '</div>';
  21.     }
  22.     console.log(html);
  23.     $('.plcontent').html(html);
  24.   },"json");
  25. }

3.6 发表用户评论
  • 请求目标: 前台m=home
  • 请求动作: a=getUserStatus

controller.php

  1. // 路由判断
  2. ... 
  3.   else if($act == "addComments"){
  4.     addComments();
  5.   }
  6. ...
  8. // 添加评论
  9. function addComments(){
  10.     $cid =  $_GET["cid"];
  11.     $uid =  $_GET["uid"];
  12.     $comm =  $_GET["comm"];
  13.     $time =  1642342314;
  14.     // $time =  $_GET["time"];
  15.     var_dump($cid);
  16.     var_dump($uid);
  17.     var_dump($comm);
  18.     var_dump($time);
  19.     $sql = "insert into comments(contentId, userId, content, time) values({$cid},{$uid},'{$comm}',{$time})";
  20.     var_dump($sql);
  21.     $ret = execute($sql);
  22.     var_dump($ret);
  23.     echo $ret;
  24. }

页面中addComments函数

  1. function addComments(){
  2.   if(userStatus.uid == "0"){
  3.     window.location = 'login.html';
  4.   }else{
  5.     // 获取评论
  6.     var comm = $(".plin").val();
  7.     // 获取当前时间 
  8.     var timestamp = new Date().getTime()
  9.     $.get("../controller.php",{"m":"home", "a":"addComments","cid":cid, "uid":userStatus.uid,"comm":comm, "time":timestamp},function (data){
  10.       var comm = $(".plin").val("");
  11.       // 重新获取评论  
  12.       getComments();
  13.     });
  14.   }   
  15. }

4. login.html

  • 请求目标: 前台m=home
  • 请求动作: a=login

controller.php

  1. // 开启Session会话
  2. session_start();
  4. // 路由判断
  5. ... 
  6.   else if($act == "login"){
  7.     login();
  8.   }
  9. ...
  11. // 登陆函数
  12. function login(){
  13.     $user = $_GET["user"];
  14.     $pwd = $_GET["pwd"];
  15.     $login = queryOne("select id from user where loginName='{$user}' and password='{$pwd}'");
  16.     if($login != false){
  17.           // 保存session信息
  18.         $_SESSION['uid'] = $login["id"];
  19.         $_SESSION['user'] = $user;
  20.         $_SESSION['pwd'] = $pwd;
  21.         echo 1;
  22.     }else{
  23.         echo 0;
  24.     }
  25. }

login页面中登陆按钮事件

  1. <script>
  2.   $(function(){
  3.   $("#btn").click(function(){
  4.     var user = $("#user").val();
  5.     var pwd = $("#pwd").val();
  6.     if( user == ""){
  7.       alert("用户名不能为空!");
  8.       $("#user").focus();
  9.       return;
  10.     }
  11.     if(pwd == ""){
  12.       alert("密码不能为空!");
  13.       $("#pwd").focus();
  14.       return;
  15.     }
  16.     $.get('../controller.php',{"m":"home","a":"login","user":user,"pwd":pwd},function(data){
  17.       if(data == 1){
  18.         window.location = "index.html?user=" + user;
  19.       }else{
  20.         alert("用户名或密码错误");
  21.       }
  22.     },"html");
  23.   });
  24. });
  25. </script>

三. 后台页面实现

1. loginback.html

  • 请求目标: 前台m=home
  • 请求动作: a=login

controller.php

  1. // 开启Session会话
  2. session_start();
  4. // 路由判断
  5. ... 
  6. elseif ($module == "admin"){
  7.     $act = $_GET["a"];
  8.     //后台
  9.     if($act == "login"){
  10.         backLogin();
  11.     }
  12. ...
  14. // 后台登陆函数
  15. function backLogin(){
  16.     $user = $_GET["user"];
  17.     $pwd = $_GET["pwd"];
  18.     $login = queryOne("select id from user where usertypeId = 1 and loginName='{$user}' and password='{$pwd}'");
  19.     if($login != false){
  20.         $_SESSION['buid'] = $login["id"];
  21.         $_SESSION['buser'] = $user;
  22.         $_SESSION['bpwd'] = $pwd;
  23.         echo 1;
  24.     }else{
  25.         echo 0;
  26.     }
  27. }

loginback页面中登陆按钮事件

  1. <script>
  2.   $(function(){
  3.   $("#btn").click(function(){
  4.     var user = $("#user").val();
  5.     var pwd = $("#pwd").val();
  6.     if( user == ""){
  7.       alert("用户名不能为空!");
  8.       $("#user").focus();
  9.       return;
  10.     }
  11.     if(pwd == ""){
  12.       alert("密码不能为空!");
  13.       $("#pwd").focus();
  14.       return;
  15.     }
  16.     $.get('../controller.php',{"m":"admin","a":"login","user":user,"pwd":pwd},function(data){
  17.       if(data == 1){
  18.         window.location = "websiteback.html?user=" + user;
  19.       }else{
  20.         alert("用户名或密码错误");
  21.       }
  22.     },"html");
  23.   });
  24. });
  25. </script>

2. websiteback.html

websiteback页面功能模块划分

cms - 图7

2.1 回显数据
  • 请求目标: 后台m=admin
  • 请求动作: a=getWebSite

controller.php

// 路由判断
... 
  else if($act == "getWebSite"){
    getWebSite();
  }
...

// webSite 表格中回显的数据
function getWebSite(){
    $web = queryOne("select id, name, logo, Icpid from website;");
    echo json_encode($web);
}

页面中getWebSite请求回调函数

<script src="../js/jquery-1.11.3.js"></script>
<script>
  // 用来保存选中logo图片的索引
  var logoIdx = 1;
  // 用来保存选中的logo地址
  var selectLogo = "";
  // 入口函数
  $(function(){
    // 回显数据
    $.get("../controller.php",{"m":"admin","a":"getWebSite"},function(data){
      $("[name=webname]").val(data.name);
      $("[name=icp]").val(data.Icpid);
      // 获取图片编号
      var logo = data.logo.split(".png")[0];
      logoIdx = logo.substr(-1);
      logoIdx = ".webrow2 img:nth-child("+ logoIdx+")";
      $(logoIdx).addClass("logoSelect");
    },"json");
  });
</script>

2.2 logo图片添加响应事件

该功能没有发起网络请求,是在回显数据之后,点击图片时,给相应图片添加样式,并记录该图片地址.

// 入口函数
... 

// 给logo 图片添加响应事件
console.log($(".webrow2 img"));
$(".webrow2 img").click(function(event){
  // 移除选中状态
  $(".webrow2 img").removeClass('logoSelect');
  // 添加选中状态
  $(this).addClass("logoSelect");
  // 获取logo地址
  selectLogo = $(this).attr("src");
});
...

2.3 保存按钮响应事件
  • 请求目标: 后台m=admin
  • 请求动作: a=updateWebSite

controller.php

// 路由判断
... 
  else if($act == "updateWebSite"){
    updateWebSite();
  }
...

// 更新webSite数据
function updateWebSite(){
    $name = $_GET["name"];
    $logo = $_GET["logo"];
    $icp = $_GET["icp"];
    $ret = execute("update website set name='{$name}', logo='{$logo}', Icpid='{$icp}' where id = 1");
    // var_dump($ret);
    echo $ret; 
}

页面中保存按钮绑定响应函数

// 入口函数
...

// 保存按钮绑定事件
$("#webBtn").click(function(){
  // 获取修改后的值,提交保存
  var webName = $("[name=webname]").val();
  var icp = $("[name=icp]").val();
  $.get("../controller.php",{"m":"admin","a":"updateWebSite","name":webName,"logo":selectLogo,"icp":icp},function(data){
    if(data == 1){
      alert("修改成功" + data);
    }else{
      alert("修改失败" + data);
    }
    console.log(data);
  })
});
...

2.4 退出按钮响应事件
  • 请求目标: 后台m=admin
  • 请求动作: a=logout

controller.php

// 路由判断
... 
    else if($act == "logout"){
    session_destroy();
  }
...

页面中退出按钮绑定回调函数

// 退出按钮绑定事件
$("#out").click(function(){
  // confirm 会弹出一个带取消按钮的弹框,确定返回true,取消返回 false,
  // 根据 confrim 的返回值进行不同的操作
  var cof=window.confirm("确认退出吗?");
  if(cof==true)
  {
    $.get("../controller.php",{"m":"admin","a":"logout"},function(data){
      window.location = 'loginback.html';
    });
    // 下面的返回值可以不写,也可以添加后给其它功能使用,这里没用
    return true;   //确认
  }
  else
    return false;  //取消

});

3. rotationchartback.html

rotationchartback页面功能模块划分

cms - 图8

3.1 退出按钮事件复用和模态框准备工作

复用退出功能 ,定义模态框相关变量

<script>
  // 用来保存选中logo图片的索引
  var imgIdx = 1;
  // 用来保存选中的logo地址
  var selectImg = "";
  // 用来记录当前页码,删除数据后刷新使用
  var cpn = 1;
  // 用来保存添加或修改状态的变量
  var status = "";
  // 用来保存修改数据的id
  var changeId = '';

    // 入口函数
  $(function(){
    // 退出按钮响应事件
    $("#out").click(function(){
      $.get("../controller.php",{"m":"admin","a":"logout"},function(data){
        window.location = 'loginback.html';
      });
    });

    // 让模态框隐藏
    $(".model").hide();


    // 给模态框关闭按钮添加事件
    $(".close").click(function(){
      $(".model").hide();
    });

    // 给模态框中的图片添加响应事件
    $(".webrow2 img").click(function(event){
      // 移除选中状态
      $(".webrow2 img").removeClass('logoSelect');
      // 添加选中状态
      $(this).addClass("logoSelect");
      // 获取logo地址
      selectImg = $(this).attr("src");
    });
  });
<script>

3.2 获取轮播图数据
  • 请求目标: 后台m=admin
  • 请求动作: a=getLbtData

controller.php

// 路由判断
... 
  else if($act == "getLbtData"){
    getLbtData();
  }
...


// 获取后台轮播图数据
function getLbtData(){
  // 当前页总条数
  $pageNum = 8;
  // 获取当前页码
  $currentPage = $_GET["currentPage"];
  // 分页信息
  $allData = queryOne("select count(*) as allNum from rotationchart;");
  $allPage = ceil($allData["allNum"]/$pageNum);

  // 在删除最后一页中最后一条记录时,应该返回到上一页
  $currentPage = $currentPage > $allPage ? $allPage : $currentPage;

  // sql 中用的当前页码
  $cp = ($currentPage - 1)*$pageNum;
  // 数据
  $data = queryAll("select id,sort,name,url from rotationchart limit {$cp}, {$pageNum};");

    // 组合页面数据和分页数据
  $page = ["currentPage"=>$currentPage, "allPage"=>$allPage];
  $tmp = ["content"=>$data, "page"=>$page];
  echo json_encode($tmp);
}

页面中getLbtData函数

// 入口函数
...
getLbtData();
...


// 获取轮播图数据, 同时获取分页数据的内容
function getLbtData(currentPage){
  $.get("../controller.php",{"m":"admin","a":"getLbtData","currentPage":currentPage},function(data){
    // 记录当前的页码
    cpn = currentPage;
    // 设置页面内容的方法
    setContent(data.content);

    // 设置页码内容
    setPageInfo(data.page);

  },"json");
}
// 


// 设置页面内容的方法
function setContent(data){
  var html = "<tr class='tableTitle'><td>名称</td><td>图片</td><td>图片排序</td><td>操作</td></tr>";
  for(var i=0;i<data.length;i++){
    var o = data[i];
    html += '<tr>';
    html += '    <td>'+ o.name +'</td>';
    html += '    <td><img src="'+ o.url +'" alt="" ></td>';
    html += '    <td>'+ o.sort +'</td>';
    html += '    <td><button onclick="changeItem(' + o.id +')">修改</button> <button onclick="delItem(' + o.id +')">删除</button></td>';
    html += '</tr> ';
  }
  console.log(html);
  $("#lbt table").html(html);
}

// 设置分页内容的方法
function setPageInfo(pageInfo){
  html = "";
  html += "<ul class='page_list'>";
  html += "  <li  onclick=getLbtData("+ 1 +")>首页</li>";
  var prePage = pageInfo.currentPage == 1? 1 : pageInfo.currentPage - 1;
  html += "  <li  onclick=getLbtData("+ prePage +")>前一页</li>";
  for(var i=1;i<=pageInfo.allPage;i++){
    if(i == pageInfo.currentPage)
      // 绑定分页获取数据的方法
      html += "  <li class='num active' onclick=getLbtData("+ i +")>" + i + "</li>";
    else
      html += "  <li class='num' onclick=getLbtData("+ i +")>" + i + "</li>";
  }
  var nextPage = pageInfo.currentPage == pageInfo.allPage ? pageInfo.allPage : parseInt(pageInfo.currentPage) + 1;
  html += "  <li onclick=getLbtData("+ nextPage +")>后一页</li>";
  html += "  <li  onclick=getLbtData("+ pageInfo.allPage +")>尾页</li>";
  html += "</ul>";


  // 将新内容添加到页面中
  $("#lbtPage").html(html);
}

3.3 删除记录功能
  • 请求目标: 后台m=admin
  • 请求动作: a=delLbtItem

controller.php

// 路由判断
... 
  else if($act == "delLbtItem"){
    delLbtItem();
  }
...

// 删除轮播图数据
function delLbtItem(){
    $id = $_GET["id"];
    $res = execute("delete from rotationchart where id = {$id}");
    echo $res;
}

页面中delLbtItem函数

// 删除方法
function delItem(id){
  $.get("../controller.php", {"m":"admin","a":"delLbtItem","id":id},function(data){
    getLbtData(cpn);
  })
}

3.4 添加按钮弹出模态框功能(重点)
  • 页面中添加按钮响应事件函数
// 入口函数
...
// 给添加按钮绑定事件,显示模态框
$("#lbtAddBtn").click(function(){
  $(".modelTitle").html("添加图片");
  $(".model").show();
  status = "add";
  // 因为和修改是共用一个model框,所以如果使用添加功能 ,那么先清除一下前面的痕迹
  $(".webrow2 img").removeClass('logoSelect');
  $("[name=webname]").val("");
  $("[name=icp]").val("");
});
...

3.5 修改按钮弹出模态框功能 (重点)
  • 请求目标: 后台m=admin
  • 请求动作: a=getLbtChangeItem

controller.php

// 路由判断
... 
  else if($act == "getLbtChangeItem"){
    getLbtChangeItem();
  }
...

// 获取轮播图修改时的回显数据
function getLbtChangeItem(){
    $id = $_GET["id"];
    $data = queryOne("select id,name,url,sort from rotationchart where id ={$id}");
    echo json_encode($data);
}

页面中changeItem函数

// 修改方法
function changeItem(id){
  $(".modelTitle").html("修改图片");
  $(".model").show();
  status = "change";
  // 保存id,在提交时使用
  changeId = id;
  $.get("../controller.php",{"m":"admin","a":"getLbtChangeItem","id":id},function(data){
    // 回显数据
    $("[name=webname]").val(data.name);
    $("[name=icp]").val(data.sort);
    // 获取图片编号
    var logo = data.url.split(".jpg")[0];
    imgIdx = logo.substr(-1);
    imgIdx = ".webrow2 img:nth-child("+ imgIdx +")";
    // 因为可能修改多个数据, 先将上一次的选中状态清除
    $(".webrow2 img").removeClass('logoSelect');
    // 给当前数据图片添加选中状态
    $(imgIdx).addClass("logoSelect");          
  },"json");

}

3.6 模态框提交按钮响应事件方法(重点)

因为添加和修改是共用一个模态框 ,所以在提交时,要区别功能的不同,分开提交

  • 请求目标: 后台m=admin
  • 请求动作: a=lbtAddItemData
  • 请求动作: a=lbtChangeItemData

controller.php

// 路由判断
... 
  else if($act == "lbtAddItemData"){
    lbtAddItemData();
  }else if($act == "lbtChangeItemData"){
    lbtChangeItemData();
  }
...

// 添加轮播图
function lbtAddItemData(){
    $name = $_GET['name'];
    $url = $_GET['url'];
    $sort = $_GET['sort'];
    $res = execute("insert into rotationchart(name,url,sort) values('{$name}','{$url}',{$sort})");
    echo $res;
}


// 修改轮播图
function lbtChangeItemData(){
    $id = $_GET['id'];
    $name = $_GET['name'];
    $url = $_GET['url'];
    $sort = $_GET['sort'];
    $res = execute("update rotationchart set name='{$name}', url='{$url}', sort = {$sort}  where id={$id}");
    echo $res;
}
  • 页面中modelSubmit提交按钮响应函数
// 模态框提交按钮响应方法,该方法已在模板中与按钮绑定完成
function modelSubmit(){
  // 获取要提交的数据
  var name = $("[name=webname]").val();
  var sort = $("[name=icp]").val();


  // 判断状态是什么操作
  if(status == 'add'){
    $.get("../controller.php",{"m":"admin",'a':"lbtAddItemData","name":name, "sort":sort,"url":selectImg},function(data){
      alert(data);
      $(".model").hide();
      getLbtData(cpn);
    });
  }else if(status == "change"){
    $.get("../controller.php",{"m":"admin",'a':"lbtChangeItemData","id":changeId, "name":name, "sort":sort,"url":selectImg},function(data){
      alert(data);
      $(".model").hide();
      getLbtData(cpn);
    });
  }
}

四. 其它三个页面的显示数据

  • 请求目标: 后台m=admin
  • 请求动作: a=getClassManagerData
  • 请求动作: a=getContentManagerData
  • 请求动作: a=getUserManagerData

controller.php

// 路由判断
... 
  else if($act == "getClassManagerData"){
    getClassManagerData();
  }else if($act == "getContentManagerData"){
    getContentManagerData();
  }else if($act == "getUserManagerData"){
    getUserManagerData();
  }
...


// ///////////////////////////////////////// classBack.html //////////////////////////////////////////////
function getClassManagerData(){
    $data = queryAll("select id,name,sort,type from class;");
    // 当前页总条数
    $pageNum = 8;
    // 获取当前页码
    $currentPage = $_GET["currentPage"];
    // 分页信息
    $allData = queryOne("select count(*) as allNum from class;");
    $allPage = ceil($allData["allNum"]/$pageNum);

    $page = ["currentPage"=>$currentPage, "allPage"=>$allPage];
    $tmp = ['content'=>$data, "page"=>$page];
    echo json_encode($tmp);
}




// ///////////////////////////////////////// contentBack.html /////////////////////////////////////////////
function getContentManagerData(){
    $data = queryAll("select id,title,classId,userId,date,click from content;");
    foreach($data as &$item){
        $item['classId'] = queryOne("select name from class where id = {$item['classId']}")['name'];
        $item['userId'] = queryOne("select userName from user where id = {$item['userId']}")['userName'];
    }

    // 当前页总条数
    $pageNum = 8;
    // 获取当前页码
    $currentPage = $_GET["currentPage"];
    // 分页信息
    $allData = queryOne("select count(*) as allNum from content;");
    $allPage = ceil($allData["allNum"]/$pageNum);

    $page = ["currentPage"=>$currentPage, "allPage"=>$allPage];
    $tmp = ['content'=>$data, "page"=>$page];
    echo json_encode($tmp);
}


// ///////////////////////////////////////// userback.html ////////////////////////////////////////////////
function getUserManagerData(){
    $data = queryAll("select id, userName, loginName, password, usertypeId from user;");
    foreach($data as &$item){
        $item['usertypeId'] = $item['usertypeId'] == 1?"管理员":"用户";
    }

    // 当前页总条数
    $pageNum = 8;
    // 获取当前页码
    $currentPage = $_GET["currentPage"];
    // 分页信息
    $allData = queryOne("select count(*) as allNum from user;");
    $allPage = ceil($allData["allNum"]/$pageNum);

    $page = ["currentPage"=>$currentPage, "allPage"=>$allPage];
    $tmp = ['content'=>$data, "page"=>$page];
    echo json_encode($tmp);
}