锁定老帖子 主题:我使用前台模板+AJAX的样例站
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-05-13
ps: 很遗憾,由于人事变动,我不再参与www.xxx.xxx这个项目了,项目负责人又回到了古老的编程方法,这个网站已经不采用我的技术了,回头有新的站我再给出新的地址吧。 ===========================
第一个站的方案紧紧是实验品,所以不提了. 这个可以称之为尝试了. 采用前台模板后的结果就是后台超级的简单.由于javascript语法的强大方便,前台处理表现效率更高. 下面就是您看到的内容的全部后台数据输出代码,当然入口程序,数据库操作的封装类,JSON输出类等属于库级别的就不发了. 代码是php写的,可惜JE不支持php的高亮语法. 补充:关于搜索引擎支持的问题,见后面的帖子,xxx已经实施了我提出的方案.效果如何等等看吧! $json=array();//输出JSON变量 switch ($Q['Q']){//$Q就是前台传递过来的所有参数合并 case 'loadbody': $gif='/style/imgs/logo.gif';//这个是logo的替换,是我们的业务逻辑要求的 $json['URL']=$SITE['webroot'].'/index.html';//告诉前台取哪一个模板,$SITE是全局的站点目录对应变量 $json['uinfo']=false; $json['logo']=$gif; $json['gonggao']='内部测试中.......FireFox下将获得最佳浏览效果.'; //下面是取一些热点信息 $sql="SELECT id,n_name,fenlei FROM flash ORDER BY mouse DESC limit 5"; $DB->query($sql,$json['gx']); $sql="SELECT id,n_name,fenlei FROM news ORDER BY mouse DESC limit 5"; $DB->query($sql,$json['gx']); //用户信息,从SESSION中取 $json['uinfo']=$SESSION['uinfo']; $json['rd']=$json['gx']; $json['tb']=$json['gx']; $json['gg'][0]=array('title'=>'44','url'=>'#','image'=>'/style/imgs/loading.gif'); $json['yq'][0]=array('title'=>'44','url'=>'#','image'=>'/style/imgs/loading.gif'); break; case 'xwnr'://新闻具体内容,根据变量的不同取不同的表里的数据,其实新闻这个词不合适,因为我们合并了新闻,文章,帖子等 $fenlei=$F['fenlei']; $table=array(1=>'news',14=>'data_is',32=>'flash'); $fields=array( '1'=>'id,n_name,laiyuan,nicheng,n_time,neirong', '14'=>'id,d_id,file,z_num,z_name,fenlei', '32'=>'id,n_name,fenlei,nicheng,uptime,u_id,jieshao,fileurl' ); if($FENLEI[$fenlei]['toup']) $toup=$FENLEI[$fenlei]['toup']; else $toup=$fenlei; $table=$table[$toup]; $fields=$fields[$toup]; $id=$Q['id']+0; $where="WHERE id=$id"; $sql="SELECT $fields FROM $table $where limit 1"; if($DB->query($sql,$json,true)){ $DB->click($table,$where);//计数器 if ($table=='news'){//新闻分页,有些新闻是由分页信息的,好多站都有这个功能,可惜JE没有这个功能 $json['page']=$DB->count('news_data',"WHERE news_id=$id"); } } break; case 'newspage'://提取分页新闻分页 $news_id=$Q['id']+0; $page=$Q['PAGE']+0; $sql="SELECT neirong FROM news_data WHERE news_id=$news_id order by id limit $page,1"; $DB->query($sql,$json,true); break; case 'ftfs'://漫画浏览,由于我们的漫画是打过包(ftfs包,自己定义的格式,所以要特殊处理) $id=$F['id']; $sql="SELECT id,d_id,z_name,z_num,fenlei,file FROM data_is WHERE id=$id"; $DB->query($sql,$json,true); break; case 'mhxx'://漫画信息 $id=$F['id']+0; $json['d_id']=$id; $json['fenlei']=$F['fenlei']+0; $sql="SELECT id,n_name,fenlei,uptime,gengxin,zuozhe,dir,jieshao,zt FROM data WHERE id=$id limit 1"; $DB->query($sql,$json['data'],true); $sql="SELECT id,d_id,z_name,fenlei,file FROM data_is WHERE d_id=$id order by id desc"; if($DB->query($sql,$json['liebiao'])) $DB->click('data',"WHERE id=$id"); break; case 'dmxw'://新闻列表,根据变量的不同取不同的表里的数据,其实新闻这个词不合适,因为我们合并了新闻,文章,帖子等 $Q['Page']=$Q['Page']+0; $fenlei=$F['fenlei']+0; if($FENLEI[$fenlei]['toup']) $toup=$FENLEI[$fenlei]['toup']; else $toup=$fenlei; $table=array(1=>'news',14=>'data',32=>'flash'); $fields=array( 1=>'id,n_name,fenlei,nicheng,n_time,u_id', 14=>'id,n_name,fenlei,uptime,gengxin,dir,zt', 32=>'id,n_name,fenlei,nicheng,uptime,u_id,fileurl' ); $table=$table[$toup]; $fields=$fields[$toup]; if($FENLEI[$fenlei]['toup']) $where="WHERE fenlei=$fenlei"; else $where=''; if ($table=='data' and $F['abc']){//漫画字母索引搜索的特殊处理 $abc=$DB->escape($F['abc']); if($where) $where+=" and abc=$abc"; else $where="WHERE abc=$abc"; } if (!$Q['CNT']) { $Q['CNT']=$DB->count($table,$where); } $json['lbpage']=array();//列表分页信息处理 $json['lbpage']['rows']=10; $json['lbpage']['urlpar']="Q=$Q[Q]&fenlei=$fenlei"; $json['lbpage']['cnt']=$Q['CNT']; $json['lbpage']['pages']=9; $json['lbpage']['no'] = $Q['Page']; $limit = pagelimit($json['lbpage']['rows'],$Q['CNT'],$Q['Page']); $sql="SELECT $fields FROM $table $where ORDER BY id DESC $limit"; $json['title']=$FENLEI[$fenlei]['f_name']; $DB->query($sql,$json['liebiao']); break; } $E->pushJSON($json);//用共用库输出JSON数据 后话. 这个站我们是从零开始建设的,3个人用了30个工作日.分工是: 1个策划:规划站点的业务逻辑和内容,建立数据库,小偷 1个页面:css,html.还有这个同事不是全职的,这1个月她工作的时间满算也就只有10天 我:负责其他工作,因为是我们原发的技术方案,所以很多东西要重头写, 可笑的是我有10天都完全被所见即所得的问题缠绕, 其中2天的选型,选择了wymeditor,化了4天改造他符合我们的技术逻辑. 就发现了nicEditor,发现nE更适合,就有化了4天学习扩充(这个谈不上改造,因为她的技术和我们的可以完美结合)符合我们的技术逻辑.到现在基本完成.
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-05-13
我以前在公司的内部系统中用过TrimPath的JavaScript Template,开发效率和维护性都比普通的MVC要高一点,用户体验也不错,可以做到一个页面就是一个完整的应用。
但是前台模板用在公开的网站上做不到对搜索引擎友好,这就很大程度限制了它的用途。 |
|
返回顶楼 | |
发表时间:2008-05-13
Quake Wang 写道
我以前在公司的内部系统中用过TrimPath的JavaScript Template,开发效率和维护性都比普通的MVC要高一点,用户体验也不错,可以做到一个页面就是一个完整的应用。
但是前台模板用在公开的网站上做不到对搜索引擎友好,这就很大程度限制了它的用途。
|
|
返回顶楼 | |
发表时间:2008-05-13
使用前台模板后,后台输出只有数据,而没有HTML标签,要想做到搜索引擎友好,后台需要针对xmlhttp请求和普通的html请求写不同的输出结果(纯数据和数据+HTML Tag),我认为这样代价太高,失去了开发效率的优势。
如果不采用前台模板,只是简单的Ajax应用,倒是很容易做到搜索引擎友好,只要根据不同类型请求加上统一的layout即可。 |
|
返回顶楼 | |
发表时间:2008-05-13
Quake Wang 写道 使用前台模板后,后台输出只有数据,而没有HTML标签,要想做到搜索引擎友好,后台需要针对xmlhttp请求和普通的html请求写不同的输出结果(纯数据和数据+HTML Tag),我认为这样代价太高,失去了开发效率的优势。
如果不采用前台模板,只是简单的Ajax应用,倒是很容易做到搜索引擎友好,只要根据不同类型请求加上统一的layout即可。 支持搜索引擎的方案我描述的不够详细, 我的描述中只是提到了方法,没有说细节. 如果细说的话: 1.后台判断是否是搜索引擎 这个分两步,首先默认就是搜索引擎,如果前台提交的参数中有一个特殊的参数(比如"_")的话就不是搜索引擎. 因为默认就是搜索引擎,所以默认是后台直接输出给搜索引擎的数据的. 由于前台如果是浏览器的话,就会执行js,这样表现就落入js之手,特殊的参数就可以实施了.进入 AJAX了. 关于给搜索引擎的数据不同的输出结果:(肯定是包在body里了) 这个应该很简单吧,简单的用html标签随便选几个,把数据包起来,然后把相应的<A>嵌进去,当然<A>的目的就是让搜索引擎爬取的.里面的参数自然是不包含特殊的参数,这样方便搜索引擎爬取.当然具体方法,静态呀什么的就是细节了. 因为提取数据这一步无论什么情况是必须有的,输出加上html标签,是让搜索引擎看的,又不需要样式的设计,只关心数据就行了.不需要样式的设计的输出说简单点用RSS工具改造一下就OK了. 为什么用特殊的参数? 索然xmlhttp请求的头可以判断,但是有时候通过iframe提交的就没有xmlhttp请求的头 我怎么看这个方法也不觉得成本高多少呀!都是必须的内容,只不过是组合了一下. 2.如果用户通过搜索引擎过来,如何友好的显示数据. 首先,这个还是会重复第一步,给搜索引擎的数据还是会输出.只是前台的JS执行的时候先empty body,然后按业务设计去请求后台,当然特殊的参数就挂上去了.如何把搜索引擎给的参数再反映出来是个问题,这个问题牵涉的方面太多,只有到具体的应用需求上才知道如何做. 很明显我这个方法不是针对简单的Ajax应用的而是针对纯AJAX无刷新的设计的. 如果只是把Ajax作为点缀式的使用这个方案自然就用不着了. |
|
返回顶楼 | |
发表时间:2008-05-13
achun 写道 关于给搜索引擎的数据不同的输出结果:(肯定是包在body里了) 这个应该很简单吧,简单的用html标签随便选几个,把数据包起来,然后把相应的<A>嵌进去,当然<A>的目的就是让搜索引擎爬取的.里面的参数自然是不包含特殊的参数,这样方便搜索引擎爬取.当然具体方法,静态呀什么的就是细节了. 因为提取数据这一步无论什么情况是必须有的,输出加上html标签,是让搜索引擎看的,又不需要样式的设计,只关心数据就行了.不需要样式的设计的输出说简单点用RSS工具改造一下就OK了. 搜索引擎友好不仅仅是一个<a>的问题,整个页面的title,meta tag的description, keyword内容,不同的tag包含数据:h1~h6/strong/ul/li对搜索引擎来说都是不一样的。考虑到这些SEO的细节,和ajax输出一个HTML片断已经没有什么区别了。 |
|
返回顶楼 | |
发表时间:2008-05-13
Quake Wang 写道 achun 写道 关于给搜索引擎的数据不同的输出结果:(肯定是包在body里了) 这个应该很简单吧,简单的用html标签随便选几个,把数据包起来,然后把相应的<A>嵌进去,当然<A>的目的就是让搜索引擎爬取的.里面的参数自然是不包含特殊的参数,这样方便搜索引擎爬取.当然具体方法,静态呀什么的就是细节了. 因为提取数据这一步无论什么情况是必须有的,输出加上html标签,是让搜索引擎看的,又不需要样式的设计,只关心数据就行了.不需要样式的设计的输出说简单点用RSS工具改造一下就OK了. 搜索引擎友好不仅仅是一个<a>的问题,整个页面的title,meta tag的description, keyword内容,不同的tag包含数据:h1~h6/strong/ul/li对搜索引擎来说都是不一样的。考虑到这些SEO的细节,和ajax输出一个HTML片断已经没有什么区别了。 咳: 和ajax输出一个HTML片断已经没有什么区别,这话也对,但是不够严谨. 后台对AJAX支持的输出,只有数据,没有任何样式的,就是JSON(XML)格式的纯数据输出, 只有对搜索引擎的输出才有HTML标签,但是仍然是没有任何样式的输出,没有任何样式输出的附加成本不高吧! 关键是没有任何样式,没有任何样式这个区别恐怕就是最大最关键的区别吧. Quake Wang 写道 整个页面的title,meta tag的description, keyword内容 你说的都对, 我只是提出一个方法,这个方法当然可以采用你说的所有细节和技巧.并不冲突呀. |
|
返回顶楼 | |
发表时间:2008-05-13
achun 写道 关键是没有任何样式,没有任何样式这个区别恐怕就是最大最关键的区别吧. 你说的样式是指什么?是指如下代码中使用id的div进行排版的这些tag吗? <div id="content"> ... </div> <div id="menu"> ... </div> |
|
返回顶楼 | |
发表时间:2008-05-13
对.
对后台数据输出来说 真对SE的没有样式,有标签 真对AJAX的只有数据,无标签自然没有样式.标签样式由前台模板完成. 目的就是前后台彻底的分离. 后台代码空前简单.原来传统的后台做了太多前台的工作 复杂的都在前台运行.统一的平台javascript,和后台彻底无关. 这样下去,后台的工作就少了,用什么平台完全无关,我们可以用自己喜欢的任何平台.本地exe化完全可能. 前台的技术水平就要求高了.但是在统一的平台javascript的前提下,你所有的学习和技术可以说是长期保值的. 呵呵,开发流程上再也不是做后台的决定一切了.前台人员的话语权,收入都会不同的.因为写后台太容易了. |
|
返回顶楼 | |
发表时间:2008-05-13
可是这个工作只不过是从原先后台的template里面移到前台的javascript template
为了搜索引擎还得多做一个混合了数据和少量html tag的工作,我认为代价太高就是指这部分。 |
|
返回顶楼 | |