菜鸟站长入门 手把手教你玩转数据调用

大鹏!

菜鸟站长入门 手把手教你玩转数据调用

pocketdragon 大鹏原创

数据调用很好很必要，但是数据调用有一点技术门槛。为了让大家对数据调用的基本方法有必要的了解，我从入门的角度说说数据调用，以方便站长运营UCHome网站；
另外，本文的目的是想用最偷懒的文字，尽量说明数据调用的一般规则，希望大家重视被我一带而过的部分！

其实从网站建设的角度来说，数据调用仍然遵循几个重要步骤：
1、效果图：
      Photoshop网页效果图设计
2、HTML页面：
      用CSS＋DIV实现HTML静态页面，板块中显示“静态假数据”
3、动态数据页面：
      通过PHP，MYSQL语言，JS语言等把数据从数据库调用到动态页面

当然，简单的数据调用，如果你胸有成竹，经验丰富一般不用这么麻烦。但是面对菜鸟站长，还是啰嗦几句的好。

我以www.discuz.net 官方论坛 discuz6.01版时的 右侧的竞价排名为例来一步一步讲解数据调用，当然，DZ7正式版数据调用方法其实更傻瓜。本文再次强调，这里说的是数据调用的一般规则和方法。

第一步：效果图
如果你的页面展示位置和官方一致，那么可以认为这就是你最终要的效果；
但是如果不一致，你可以先用PS工具做一个修改，包括调用位置的长宽，边距，内部小图之间的间距等等，不光让你对最终效果清楚，而且也能提前确认CSS样式定义时的数据。
如何用PS工具，这是互联网从业者的必备技能，起码要会用QQ抓图，图层，移动，剪切，拷贝，粘帖，对齐等等。
第二步：HTML页面
如果你能写CSS＋DIV文件，本篇文章一大半都不用看了；
我来说怎么“偷”，对！“偷”有点难听，不过这是公开偷点别人的思想，算“偷师”吧，也挺刺激!。

如图：用Firefox 或者 MYIE、遨游等浏览器都支持“查看选中部分源代码”的功能，好处是不用在整页源代码中辛苦寻找

以Firefox为例，我们可以轻松的把这一部分被动态程序转化好的当前算静态的数据“偷出来”。我全部贴出来了，但也不用细看，请直接拖动滚动条。

1. <div class="sidebox"><h4>竞价排行</h4><ul class="avt_list avt_uname"><li><a href="http://u.discuz.net/home/space.php?uid=941675" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=941675&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=941675" target="_blank">伍祥青</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=489787" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=489787&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=489787" target="_blank">双木田心</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=463858" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=463858&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=463858" target="_blank">63490794</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=992599" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=992599&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=992599" target="_blank">过往之间</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=1904" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=1904&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=1904" target="_blank">fengxue</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=687883" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=687883&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=687883" target="_blank">▍灵感╋━头目</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=295639" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=295639&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=295639" target="_blank">poplong</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=160538" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=160538&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=160538" target="_blank">kingfeng</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=884313" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=884313&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=884313" target="_blank">yongnao</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=850690" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=850690&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=850690" target="_blank">另一个世界</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=409476" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=409476&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=409476" target="_blank">aqxsj</a></p></li><li><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=858616&size=small"></a><p><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank">looon</a></p></li></ul></div>

复制代码

有了这部分静态代码，你甚至可以直接粘帖到你想调用的页面，实际检验一下效果。
如果是同样的Discuz!7，同样的位置，一般可以直接显示，因为，CSS文件都一样。
但是如果是你自己制作的页面或者其他系统平台下的页面。你还要把官方论坛调用的CSS文件再偷下来，看看class="sidebox"，class="avt_list avt_uname"这些是怎么定义的，可以根据这些做相应的修改。怎么偷？怎么改？建议你从头学习CSS＋DIV的基础知识，或者让美工朋友帮你完成，这部分仅仅是页面展示，还不涉及数据调用。（注：在偷学代码的时候也要有一些版权意识，但是说来话长，我就暂时不展开说了）

第三步：动态数据调用 （精彩部分）
研究一下我们“偷”来的代码，你会发现其中规律，有些东西在形式上是重复的
去掉多余的重复部分，精简之后的代码是这样：

1. <div class="sidebox">
   
2. <h4>竞价排行</h4>
   
3. <ul class="avt_list avt_uname">
   
4. <li><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=858616&size=small"></a>
   
5. <p><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank">looon</a></p>
   
6. </li>
   
7. </ul>
   
8. </div>

复制代码

对比一下我们最终要的效果

1. <div class="sidebox">
   
2. <h4>竞价排行</h4>
   
3. <ul class="avt_list avt_uname">
   
4. <script language="javascript" type="text/javascript" src="http://u.discuz.net/home/js.php?id=1"></script>
   
5. </li>
   
6. </ul>
   
7. </div>

复制代码

你肯定会问，中间的javascript 如何实现？

答案是在UChome后台＝》数据调用
要让程序完成最终数据调用，我们需要告诉程序数据从哪里来，如何显示内容

用MYSQL语言 告诉程序数据从哪里来
SELECT * FROM uchome_show ORDER BY credit DESC
看不懂？没关系！
1、学习MYSQL语言
     这句话的意思是：选择调出（SELECT） 所有字段数据（*）从 uchome_show 表（FROM uchome_show）排序（ORDER）按照 积分（credit）递减（DESC）
      更多的看教科书或者网上资料
2、怎么才能知道UCHOME中的表和字段定义，从http://faq.comsenz.com/viewnews-463下载UCHOME数据字典，UCHOME安装包里面也有，文件名叫  database.htm

仍然在数据调用后台，我们用变量替换掉静态数据之后就变成了这样

1. <!--{loop $_SBLOCK['block1'] $value}-->
   
2. <li><a href="http://u.discuz.net/home/space.php?uid=$value[uid]" target="_blank"><img src=" <!--{avatar($value[uid],small)}-->"><a href="http://u.discuz.net/home/space.php?uid=$value[uid]" target="_blank">$value[username]
   
3. </li>
   
4. <!--{/loop}-->

复制代码

上下两个 loop 部分是说，这是一个循环！循环的条数，还有起点需要在UCH后台设置

对比一下

1. 
   
2. <li><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank"><img src="http://www.discuz.net/uc_server/avatar.php?uid=858616&size=small"></a>
   
3. <p><a href="http://u.discuz.net/home/space.php?uid=858616" target="_blank">looon</a></p>

复制代码

变量的意义：$value[uid]＝用户UID，$value[username]＝用户名，<!--{avatar($value[uid],small)}-->用户头像（最小的那种）

命名都有规律，UCHOME变量有编写规则，这个需要不断积累

在生成的JS代码前后加上不重复的部分

1. <div class="sidebox">
   
2. <h4>竞价排行</h4>
   
3. <ul class="avt_list avt_uname">
   
4. 
   
5. <script language="javascript" type="text/javascript" src="http://u.discuz.net/home/js.php?id=1"></script>
   
6. 
   
7. </li>
   
8. </ul>
   
9. </div>

复制代码

block1也修改成你实际创建的调用编号，和调用页面上方的变量名一致，另外确定缓存时间如600秒，确定调用的数量，数据调用基本上成形了。

如果能够更多的学习PS,PHP,MYSQL,CSS+DIV, 简单的JS，成为UCHOME高手日子也不远了，不用“偷”自己也能写写模板，改改程序，爽吧！

本文试图用最基本的方法讲解数据调用，目的是希望站长能够举一反三，找到数据调用乃至深入学习利用UCH和Discuz的方法。幸福其实就掌握在你自己的手里，好好学习，天天向上吧！

最后还要说明的是，本人主要精力在于运营研究并非在技术或者美工上，所以技术方面不专业的地方还要大家海涵，以上代码仅为说明道理，并不一定适合直接拷贝，请需要的同学先学会方法再模仿实施。

楼主热贴：

菜鸟站长入门 手把手教你玩转数据调用
SNS网站的一些推广方式（转）
“潮汕人”运营经验：人气究竟从何而来？
Uchome运营经验谈 数据调用的技巧
经验之谈：如何用团队运营UCHome网站

aq10

这个不错~~
  顶一下~~~

yangjiangh

不错!不错！我顶！

sz201

不错不错~~

esncy

好东西.
楼主的帖.今天都在仔细看.顶个够.

abcnic

留个记号 慢慢看

xnnwq

谢谢分享。
楼主好同志，加油！～

cnopus

很不错,,,,,,,,,,,,,,,,!!

lf1023

我想问楼主，静态首页，能否用这个方法调用论坛数据？

大鹏!

discuz7本身也有数据调用机制，静态首页可以调用论坛数据