极客观点
项目管理
HarmonyOS
在练习做cms管理系统有感而发.
请看下面两种新闻列表页的实现方式:
方式一
<?php foreach ($newsArr as $v) {?>
<tr>
<td>#<?php echo $v['id']?></td>
<td><?php echo $v['title']?></td>
<td>
<a href="javascript:void(0);" class="alterBtn" id="alterBtn<?php echo $v['id']?>">修改</a> |
<a href="javascript:void(0);" class="delBtn" id="delBtn<?php echo $v['id']?>">删除</a>
</td>
<td><?php echo $v['addtime']?></td>
</tr>
<?php }>方式二
<!--HTML代码-->
<tr v-for="item in list">
<td>#{{ item.id }}</td>
<td>{{ item.title }}</td>
<td>
<a href="javascript:void(0);" v-on:click="alt(item)" class="alterBtn">修改</a> |
<a href="javascript:void(0);" v-on:click="del(item)" class="delBtn">删除</a>
</td>
<td>{{ item.addtime }}</td>
</tr>//js代码
//渲染列表项
$.get("news/listC.php","",function(response){
var obj = JSON.parse(response);
//绑定
var newsTable = new Vue({
el: '#newsTable',
data: {
list: obj,
},
methods: {
alt:function(item){
layer.confirm(item.id);
console.log(item.id);
},
del:function(item){
var msg = "确认删除"+item.title+"吗?"
layer.confirm(msg,function(){
$.get("news/delC.php","id="+item.id,function(response){
if(response == "1"){
layer.msg("删除成功",{icon:1});
//重新渲染
console.log(newsTable.list[1].title);
$.get("news/listC.php","",function(response){
newsTable.list = JSON.parse(response);
});
//前端渲染
/* newsTable.list = newsTable.list.filter(function(node){
if(node.id != item.id){
return node;
}
}); */
}else{
layer.msg("删除失败",{icon:2});
}
})
},function(){
layer.msg("用户取消",{icon:5});
});
console.log(item.id);
}
}
})
});
上述两种方式都可以展示新闻列表页:
第一种方式需要服务器去解析,会增加服务器端运算开销
第二种方式只需要从服务器获得JSON串就可以在前端完成渲染
显然第二种实现方式优势很大,那么还有必要在后台完成视图层渲染吗?
或者说MVC框架里的V层能不能完全交给前端来处理呢?
以前的时候，是传统的前端写了模板，然后后端再去套。
现在可以让前后端进行分离了，服务器端可以重点去研究怎么去优化系统了。正好也省了模板解析这一块的优化。
像是Laravel里面有vue.js框架，就是前端模板解析。
这种对于前端的要求，也是变得高了，现在前端的js框架变化很快，对于前端的要求也很高。
前端也不用坐到后台的电脑旁进行调试前端页面了。
所以，我个人是非常提倡这种的，我看到了，比如我朋友的公司，和信贷，好像就有做这一部分的优化。另外我观察起点中文网也有将模板放到前台来解析。
所以，这是未来的趋势！！！