学习文章列表之前先学习一下文章编辑的一点注意，可能会出错的地方。
添加文章和编辑文章使用一个模板，如果添加文章的时候没有对news_name赋值显示到模板，而模板内value直接使用{$newsinfo.news_name}这种情况下会出错。
2个办法处理：
1）添加的时候赋空值
$newsinfo['news_name']='';
View::assign('$newsinfo',$newsinfo);2）模板内使用php7的写法，使用“??”具体如下：
<input type='text' value='{$newsinfo.news_name??""}'>3）保存到数据库的时候checkbox如果是没有选中，是不会传递name的，获取的时候我们应该加上判断
$xuanzhong=isset(input('post.tuiian'))?1:0;文章列表常见的功能操作
1、全选或者取消
这里的全选我没有使用监听，而是继续使用了jquery
html代码
<td align="center" class='a'><input type="checkbox" name="checkbox[]" value="11" lay-skin="primary" /></td>选择框放到了class='a'的td里边
<div class="layui-input-inline selectall" ><input type="checkbox" value='check' name='chkall' title='全选' > 全选放到了div 加入了自己的classs，electall
判断全选框是否选中，选中的话文章列表的选择框也要选中，反之不选
$(document).ready(function() {
$(".action").click(function(){
$('.a').find('input[name="checkbox[]"]').prop('checked',$(this).find('input').is(':checked')?true:false);
layui.use('form', function(){
var form = layui.form;
form.render('checkbox');
});
});
});
使用了layui的样式，选中或者取消以后要再次刷新，或者叫渲染吧
layui.use('form', function(){
var form = layui.form;
form.render('checkbox');
});这里可以看到只刷新了checkbox。
2、ajax显示文章列表
html代码：
<table width="100%" border="0" cellpadding="10" cellspacing="0" class="layui-table ">
<tr>
<th width="40" align="center">选择</th>
<th align="center">排序</th>
</tr>
</table>
<table width="100%" border="0" cellpadding="10" cellspacing="0" class="layui-table tba">
</table>后边显示字段都是一个性质，这里就只写了2个
js代码
$(document).ready(function() {
var pager={$p};
getajax(pager);
$(document).delegate(".pager li a", 'click', function() {
var pager=$(this).attr('datapage');
getajax(pager);
});
});
function getajax(pager){
$.ajax({
url: "/admin.php/cmmodule/list.html",
data: {"p":pager},
type: 'post',
dataType: 'json',
success: function(result) {
if (result.error == "0000") {
console.log(result.msg);
var text="";
for (x in result.msg) {
text+=" <tr>";
text+=" <td align=\"center\" class='a' width='40'><input type=\"checkbox\" name=\"checkbox[]\" value=\""+result.msg[x].id+"\" lay-skin=\"primary\" /></td>";
text+=" <td align=\"center\"><input type=\"text\" name=\"modulesort["+result.msg[x].id+"]\" size='4' class=\"layui-input sortinput inpMain\" value=\""+result.msg[x].module_sort+"\"/></td>";
text+="</tr>";
}
$('.tba').html(text);
$(".pager").html(result.pagels);
layui.use('form', function(){
var form = layui.form;
form.render();
});
}
}
});
1）；因为打开页面要用ajax 读取数据，点击分页也要ajax读取数据，这里自定义了一个方法：getajax，封装了ajax，比较偷懒了在getajax直接赋值到table里边了，这样封装不适合所有的。可以是ajax(url,参数)；然后根据返回值操作，具体要看自己的习惯；
2）返回数据我设置的json格式，msg存放的是正确返回的数据，error是错误编码，0000是正确的，这个可以自己按照习惯来；这里我使用了for in在js循环了，也可以php后台执行读取的时候直接foreach循环把这些html加入以后再返回；
3）ajax显示列表，就不能再使用tp6提供的分页了，需要我们自己写。前边我们说了自己新建了cm类，这个分页我们可以写到cm类里边，因为是ajax读取分页的页数，也就不需要再有链接；
4）如果ajax返回的是字符串，里边写的是json格式，可以使用js里边的JSON.parse(ressu);转成json格式;
字符串ressu转json：
var ressuobj=JSON.parse(ressu);分页代码;
public function pager($pagecount,$ipage){
//ipage是当前页 $pagecount 总页码
$pagstr='<ul class="pagination">';
$totalpagt=10;
if($ipage==1){
$pagstr.="<li class=\"disabled\"><span><</span></li>";
}else{
$pagstr.="<li ><a datapage=1><</a></li>";
}
if($ipage<=5){
$startsp=1;
if($pagecount<=$totalpagt){
$endsp=$pagecount;
}else{
$endsp=$totalpagt;
}
}else{
if($pagecount<=$totalpagt){
$endsp=$pagecount;
$startsp=1;
}else{
$endsp=$ipage+5;
$startsp=$ipage-4;
if($ipage>$pagecount-5){
$endsp=$pagecount;
$startsp=$ipage-($totalpagt-($pagecount-$ipage))+1;
}
}
}
for($is=$startsp;$is<=$endsp;$is++){
if((int)$ipage==(int)$is){
$pagstr.="<li class=\"active\" ><a datapage=".$is.">".$is."</a></li>";
}else{
$pagstr.="<li ><a datapage=".$is.">".$is."</a></li>";
}
}
if($ipage==$pagecount){
$pagstr.="<li class=\"disabled\"><span>></span></li>";
}else{
$pagstr.="<li><a datapage=".$pagecount.">></a></li>";
}
$pagstr.="</ul>";
return $pagstr;
}仅供参考，比较简单，判断起始，截止的页码，然后for循环；
4）后端读取文章列表
public function list(){
$pagesize="1";
$page=(int)input('post.p');
$newslist=Db::name('web_news')->page($page,$pagesize)->order("id desc")->select();
$newscount=Db::name('web_news')->field('id')->count();
$pagecount=ceil($newscount/$pagesize);
echo json_encode(array('error'=>'0000','msg'=>$newslist,'pagels'=>$this->pager($pagecount,$page)));
exit;
}5）要再次渲染，因为以前表格是没有数据的，新加进来的没有layui的样式，多加几次就习惯了，会知道不断渲染；
流程：
（1）打开页面在控制器向模板赋值参数（分页或者其他的，分页默认开始是第一页，也就是1）；
（2）渲染模板执行模板内的ajax，再次请求页面返回文章列表信息；
（3）返回的列表for in循环重组格式（也可以php页面写好返回格式）通过.html(text)显示到网页；
（4）layui重新渲染；
3、删除，更新排序
都是放到了一个form里边，所以处理程序也会是一个，所以我们需要对按钮name的value进行判断。
<input name="mysub" class="layui-btn" type="submit" value="更新排序"/>php代码
if(input('post.mysub')=='更新排序'){
排序操作
exit;
}
删除操作排序操作以后一定要加exit，不然也会执行删除操作，也可以使用if else 就是必须加exit了。
if(){
排序
}else{
删除
}4、推荐到首页显示
使用的是layui中的开关事件，获取到的是true，false我是转成了1,0，获取文章的编号（开关的value存放的是文章编号），然后ajax操作，通知php页面推荐字段转成推荐，或者是取消推荐。
html代码
<input type="checkbox" value='91' lay-filter="switch" lay-skin="switch" lay-text="是|否">获取文章编号 data.value；
使用layui监听switch，括号中的switch和html内的lay-filter="switch"，这2个名称是switch是对应的，一样就好可以按照自己的习惯命名；
layer.msg提示返回的信息，成功推荐到首页，或者是已经取消推荐；
layui.use('form', function(){
var form = layui.form;
form.on('switch(switch)', function(data){
console.log(this.checked);
var artid= data.value;
var czcode=0;
if(this.checked){
czcode=1;
}
//详细的ajax代码上边有这里就不多余重复了
$.ajax({
data: {"czcode":czcode,"artid":artid},
success: function(result) {
layer.msg(result.msg, {time: 2000});
}
})
})
});总结，讲完文章列表，一个网站大体的功能就全部完成了，至于实现产品，或者成功案例等等，只是叫法的不同，本质还是添加表单，选择分类，上传图片等，无非就是换了个名称，新闻标题换成产品名称，如果看完这十几章，相信即使是初学的也该能搭建网站。
要想快速掌握开发一个网站的能力，我们应该是逆向思维，弄清楚开发一个网站需要哪些知识，而不是学了所有的，然后需要哪些，再从知识库里挑选。