幼稚园水平的我终于用标题的这些东西整出了分页和查询,虽然在大神眼里,这都不算啥,我也只是想记录一下这过程以及我自己的理解。
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下面就好了。
在浏览器中尝试打开:localhost/ci2——————>这个ci2是我的ci框架文件名。成功打开的图片如下:
(2)CI里面的设置:主要设置是ci2/application/databse.php (就是配置连接数据库的登录名和密码) 以及ci2/application/routes.php (配置入口文件)
(还有一个database一定要记得写,就是你的数据库!)
(3)新建控制器。(这里有个很重要的知识点!!!这个控制器的创建一定要首字母大写,然后类!一定也要大写!类一定要继承CI_Controller,但是上面的那个图,入口文件里面写的控制器是小写的!)对啦。这个控制器里面的视图访问:$this->load->views('视图名字')。这里也有个重点!就是视图名字不加后缀的!
还有就是,控制器一般都有一个默认函数——>index(),这个函数就指向一个默认的视图或者别的东西(当然都是自己写的。。。框架没有自动生成这些)
(4)然后是视图,视图就是HTML,就前端代码随便写写,但是要写一点东西。因为需要打开网页去看是否成功。
(5)准备得差不多就浏览器试试:localhost/ci2—————>因为前面的入口文件已经设置过了是自己建的控制器了。所以要试试看成不成。没有报错404就行。(这几个问号是我自己写来测试而已。。。)
(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('跳转链接')】
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然后看网络里面有实例的返回内容,里面有参数的名称。如下图:
在浏览器的响应里面可以看到它需要的数据是json数据格式。里面就是后端查询到的全部数据,然后返回给前端。它自己会给你编排好的。
有没有小伙伴好奇这为什么没有返回total,因为这个例子没有写。。。。
(如果不知道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); } } ?>
上面就是前段分页的啦。如果有什么问题,评论留言。效果如图:
②后端分页。
……这个没有什么技术含量。只要修改data-side-pagination="server"这个参数,就把它修改成由服务器分页啦。效果图如下:
是不是觉得啥区别都没有……就页面来看,是这样的。但是输出的数组个数是不同的。
总结一下前端分页和后端分页的区别:(。。肯定不止这两点区别,小菜鸡给大家磕头啦)
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的时候,其实有两种不用的页面
蓝色的404很大可能就是访问路径出现问题,要通过F12来看它到底是访问了哪个。
白色的那个404就代码问题和路径问题都有可能。
(2)样式的引入,这个其实也是路径问题……
2、CORS问题,这个问题很好解决的,$config['base_url'] 这个参数不用留空就行,就是补一个斜杆,也不会报错
其他:PHP的后端处理代码和以前的会有点不一样,因为在CI框架里面有个叫做AR模型的东西,能简化一些代码,但是如果不熟……debug整到癫疯。
bootstrap-table的功能很强大,如果是做一些表格数据多的页面,直接整一个这个前端框架,属性记着常用的,就坐起来快很多。
菜鸡哔哔:json格式是一种数据格式,json是一种对象,可以包括数组和再嵌套对象。里面基本上是以键值对的形式存在。然后用的话也不是很需要技术,就按照数组返回就可以了。其他详细的,我立个flag,后面补。。。。
小菜鸡的实践over。谢谢观看。