简单的CI+PHPstudy+bootstrap-table的分页和查询

 幼稚园水平的我终于用标题的这些东西整出了分页和查询,虽然在大神眼里,这都不算啥,我也只是想记录一下这过程以及我自己的理解。

1、概念:

CI框架:这。。。百度可能讲得更好些。我自己的感觉就是,这个框架不难,然后是轻量级的框架,主要是依靠控制器和视图,在这里面反复横跳。很像MVC框架,但是没有模型(model)。

    然后这个框架只有一个入口,过程大概就是:客户端——>入口文件——>指定控制器里面的方法——>跳转到视图(页面)——>其他操作。

    这个框架,很多文章都会提到一个叫路由(routes)的东西,以及五个钩子(hooks),钩子我不知道怎么用,但是这里面的路由,在用的时候其实就是指定一个入口控制器,也就是指定唯一的入口。所以这个路由,我自以为这就是一个记录入口控制器的文件。

bootstrap-table:这是一个前端用的很多的一个框架。em…就是一个样式很丰富,功能比较齐全的框架,这里面的参数挺多的,开始用的时候都是看着手册照着打的。然后里面的功能,就比如说分页这种,功能是封装好的,我们用的时候就在后台返回它需要的参数就可以。

    然后这个框架毕竟是前端,所以和数据库交互的一些代码还要自己再琢磨一下。反正我开始不知道那些功能封装好,然后给它自定义了参数。然而并没什么用。就传参就好啦。不用写太多功能和定义之类的。简单粗暴吧。

phpstudy就没什么好说了,一键安装。O啦。

P.S.:这些是我下载的一些地址,有需要看看也行。

CI框架:手册:https://codeigniter.org.cn    下载:https://codeigniter.org.cn/download   (我下载啦红色的第一个)

bootstrap:https://v3.bootcss.com/          (这里面下载的和下面的不一样,都要下载)

bootstrap-table:https://bootstrap-table.com/    (这里面的Examples就是很多参数的例子!)

 

2、实操:

(1)环境:phpstudy没什么好配置的,确保端口之类的没错就行。然后就是CI,把下载的文件解压之后放在WWW下面就好了。

简单的CI+PHPstudy+bootstrap-table的分页和查询简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 在浏览器中尝试打开:localhost/ci2——————>这个ci2是我的ci框架文件名。成功打开的图片如下:

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 

 

 (2)CI里面的设置:主要设置是ci2/application/databse.php (就是配置连接数据库的登录名和密码) 以及ci2/application/routes.php (配置入口文件)

   (还有一个database一定要记得写,就是你的数据库!)

简单的CI+PHPstudy+bootstrap-table的分页和查询简单的CI+PHPstudy+bootstrap-table的分页和查询

 

(3)新建控制器。(这里有个很重要的知识点!!!这个控制器的创建一定要首字母大写,然后类!一定也要大写!类一定要继承CI_Controller,但是上面的那个图,入口文件里面写的控制器是小写的!)对啦。这个控制器里面的视图访问:$this->load->views('视图名字')。这里也有个重点!就是视图名字不加后缀的!

还有就是,控制器一般都有一个默认函数——>index(),这个函数就指向一个默认的视图或者别的东西(当然都是自己写的。。。框架没有自动生成这些)

简单的CI+PHPstudy+bootstrap-table的分页和查询

(4)然后是视图,视图就是HTML,就前端代码随便写写,但是要写一点东西。因为需要打开网页去看是否成功。

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

(5)准备得差不多就浏览器试试:localhost/ci2—————>因为前面的入口文件已经设置过了是自己建的控制器了。所以要试试看成不成。没有报错404就行。(这几个问号是我自己写来测试而已。。。)

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

(6)可以访问的话,我们就可以在视图里面(也就是页面)结合bootstrap-table整个分页。

①前端分页:虽然说是前端分页,但是数据还是需要从后端传出来的。区别后面说。

还有一点要准备得东西

a.把上面下载的样式的放在一个新建的文件夹里,然后页面里记得引入,还有一个jq的。(jq的那个我用了网址:https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js)jq网址访问会慢一点。

b.新建一个控制器,用来记录方法的,我这边新建了一个叫做function.php的控制器。等等上图。

(c.在视图里面加一行 <?php  $this->load->helper('url');?>   ————>这个是因为页面需要跳转,我用了比较low的方法,所以要用到这个。

  如果不想麻烦的话,可以在原来的shouye.php的页面里做一个构造函数,把这个写里面。。。或者大神们有别的方法可以评论告诉我。。。。)

  【补充:菜鸡的我表达错了,这个load->view()实际上是加载而不是跳转,跳转的话是使用redirect('跳转链接')】

简单的CI+PHPstudy+bootstrap-table的分页和查询

data-toggle="table"                          //bootstrap-table里的样式
data-url="<?php echo base_url('function.php/index');?>"          //调用数据库数据
data-pagination="true"                          //分页必备
data-side-pagination="client                      //client是前端分页,server是后端分页

这些是前端必备的参数,完整的代码如下:

(data-field的参数是你数据库里面对应的字段名) 

(如果直接使用这一堆!你要记得修改:data-url的链接,这个是链接到后端进行查找数据用的,记得是'文件名/方法名'

                  data-field的值,这个是你数据库中,这个数据的字段名)

(里面存放样式的文件夹,是我自己在application下面建的。路径记得写对啊。)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="style/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="style/css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="style/css/bootstrap.css">
    <script type="text/javascript" src="style/js/bootstrap-table.min.js"></script>
    <?php  $this->load->helper('url');?>
    <!-- 记得引入这一堆东西 -->
</head>
<body>
    <table id="table" 
        data-toggle="table"
        data-url="<?php echo base_url('function.php/index');?>"
        data-pagination="true"
        data-side-pagination="client">
    <thead>
    <tr>
      <th data-field="u_id">ID</th>
      <th data-field="u_name">用户名</th>
      <th data-field="u_tel">电话</th>
    </tr>
     </thead>    

    </table>
</body>
</html>

 

  我补充一点分页的原理啊,就是分页这东西,你使用bootstrap-table这个框架之后,它能自动帮你分页!就很方便!但是你需要给它点数据。

  同时它也会告诉你分页是怎样分,就是要每页几条数据(limit),第一条数据开始的下标(offset)这种。这是前段会传给后端的数据。

  然后后端需要接受这两个数据,用来查询并输出结果,要返回两个参数,一个是总共有几条数据(total),另一个是数据(row)。

  这个变量名不是自己定的哈。在那个官方手册里面,F12然后看网络里面有实例的返回内容,里面有参数的名称。如下图:

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

在浏览器的响应里面可以看到它需要的数据是json数据格式。里面就是后端查询到的全部数据,然后返回给前端。它自己会给你编排好的。

有没有小伙伴好奇这为什么没有返回total,因为这个例子没有写。。。。

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 (如果不知道json格式的。拖到文末。看我瞎逼逼一下。)

 

控制器:主要是把数据从数据库中取出来,然后筛选再传回去给前端页面。

   首先需要获取前端传过来的offset和limit的值,然后查询,最后返回。

   因为是json数据,所以最后是以json_encond返回的。

     这个语法。。。有太多写法了,小菜鸡有小菜鸡的写法!

  (如果你要直接用我这堆东西,你要记得修改:count_all('表名'),get('表名'))

<?php
    class function extends CI_Controller{
        public function index(){
            $this->load->database();
            // $arr = $this->db->get('user')->result();                            //获取数据库表信息
            
            $limit = $this->input->get('limit');                                //前端传的数据
            $offset = $this->input->get('offset');                                //这个是已经封装好的!一定要记住!

            $count = $this->db->count_all('user');                                //统计数量(total输出)            
            $limit1 = $this->db->limit($limit,$offset)->get('user')->result();    //根据limit和offset输出每页数据
    
            $arr = array(
                'total'=>$count,
                'rows'    => $limit1,
            );
            echo json_encode($arr);
            
        }

    }
?>

 

 

上面就是前段分页的啦。如果有什么问题,评论留言。效果如图:

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 

 

 

②后端分页。

……这个没有什么技术含量。只要修改data-side-pagination="server"这个参数,就把它修改成由服务器分页啦。效果图如下:

 简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 

 是不是觉得啥区别都没有……就页面来看,是这样的。但是输出的数组个数是不同的。

 

总结一下前端分页和后端分页的区别:(。。肯定不止这两点区别,小菜鸡给大家磕头啦)

1、前端分页就是把所有的数据一次性输出来,然后在前端进行分页。后端分页是只传出当前页需要的limit条数据。看效果图里面的rows。

2、前端分页一般是处理一些数据少的。后端分页是处理数据多的。假设啊,你的数据有一万条,那你前端就需要一次性输出一万条。数据越多就越影响页面的加载速度。

还有,后端分页不是指在数据库里处理这些数据,是指数据从数据库传到后台,就是传到这个框架里面处理。

 

查询功能:

这个功能也不是大家想的这么复杂的。需要的是一个查询框,然后需要把查询变量传到后台,然后查找后返回结果就好了。

在后台要多查找框的内容进行一个判断,如果里面没有内容就是输出这一页的结果,如果有内容,就把这个内容模糊查找出来。

a.前端参数:只要添加一个data-search="true"就可以了,这个参数一样是通过get方式传到后端

b.后端代码:先接受了get来的查询内容,然后模糊查找就可以啦。

前端代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <?php  $this->load->helper('url');?>
 5     <meta charset="utf-8">
 6     <title>首页</title>
 7     <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
 8     <script type="text/javascript" src="style/js/bootstrap.js"></script>
 9     <link rel="stylesheet" type="text/css" href="style/css/bootstrap-table.min.css">
10     <link rel="stylesheet" type="text/css" href="style/css/bootstrap.css">
11     <script type="text/javascript" src="style/js/bootstrap-table.min.js"></script>    
12     <!-- 记得引入这一堆东西 -->
13 </head>
14 <body>
15     <table id="table" 
16         data-toggle="table"
17         data-url="<?php echo base_url('index.php/work/index');?>"
18         data-pagination="true"
19         data-side-pagination="server"
20         data-search="true">
21     <thead>
22     <tr>
23       <th data-field="u_id">ID</th>
24       <th data-field="u_name">用户名</th>
25       <th data-field="u_tel">电话</th>
26     </tr>
27      </thead>    
28          
29     </table>
30 </body>
31 </html>

后端代码如下:

 1 <?php 
 2     class Work extends CI_Controller{
 3         public function index(){
 4             $this->load->database();
 5             // $arr = $this->db->get('user')->result();                            //获取数据库表信息
 6             
 7             $limit = $this->input->get('limit');                                //前端传的数据
 8             $offset = $this->input->get('offset');                                //这个是已经封装好的!一定要记住!
 9 
10             $search = $this->input->get('search');        //获取前端传进来的查找内容
11 
12             //判断查找框内是否有内容
13             if($search != ''){
14                 //模糊查询并记录条数
15                 $limit1 = $this->db->like('u_name',$search)
16                                    ->limit($limit,$offset)
17                                    ->get('user')                                   
18                                    ->result_array();
19                 //模糊查询并记录总数(这里注意一下,最后的count_all_results这个是最后有一个s的!!!)                       
20                 $count = $this->db->like('u_name',$search)->count_all_results('user');
21             }else{
22                 $count = $this->db->count_all('user');                                //统计数量(total输出)            
23                 $limit1 = $this->db->limit($limit,$offset)->get('user')->result();    
24             }
25 
26 
27             //根据limit和offset输出每页数据
28     
29             $arr = array(
30                 'total'=>$count,
31                 'rows'    => $limit1,
32             );
33             echo json_encode($arr);
34         } 
35     }
36 ?>

 

em……其实做这个东西我的路径经常报错,所以我补充一下我的config文件的路径(这两个参数在config文件夹的config.php文件里面)

$config['base_url'] = '/ci2/'; 

$config['index_page'] = 'index.php';

解释一下:一般我们都会直接输入localhost/项目文件夹/控制器名/文件名,其实正确的访问时是:localhost/项目文件夹/index.php/控制器名/文件名

这里面的index.php就是我们在配置文件里面设置的这个东西,所以如果出现路径问题,就多试试改这两个,然后对比多几次就能知道了。

em,我在实现功能的时候都是用的url而不是用redirect,用url就代表着在路径会出现问题。所以。。。就是小菜鸡啊 T_T

 

 

 总结一下:

1、我做这个的错误:

(1)最多的就是路径问题,当你访问失败返回404的时候,其实有两种不用的页面

简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 简单的CI+PHPstudy+bootstrap-table的分页和查询

 

 

 蓝色的404很大可能就是访问路径出现问题,要通过F12来看它到底是访问了哪个。

白色的那个404就代码问题和路径问题都有可能。

 

(2)样式的引入,这个其实也是路径问题……

2、CORS问题,这个问题很好解决的,$config['base_url'] 这个参数不用留空就行,就是补一个斜杆,也不会报错

 

 

其他:PHP的后端处理代码和以前的会有点不一样,因为在CI框架里面有个叫做AR模型的东西,能简化一些代码,但是如果不熟……debug整到癫疯。

bootstrap-table的功能很强大,如果是做一些表格数据多的页面,直接整一个这个前端框架,属性记着常用的,就坐起来快很多。

 

 

菜鸡哔哔:json格式是一种数据格式,json是一种对象,可以包括数组和再嵌套对象。里面基本上是以键值对的形式存在。然后用的话也不是很需要技术,就按照数组返回就可以了。其他详细的,我立个flag,后面补。。。。

 

 小菜鸡的实践over。谢谢观看。

 

 

上一篇:phpstudy 配置域名访问无效


下一篇:[网络安全提高篇] 一〇四.网络渗透靶场Oracle+phpStudy本地搭建万字详解(SQL注入、XSS攻击、文件上传漏洞)