javaeye博客的收藏管理页面

javaeye博客的收藏管理页面，收藏分类是通过下拉列表选择来录入已有分类标签的，这个功能非常方便实用，因为不用死记旧标签，还提高了标签的录入效率，于是决定自己模仿也搞一个。

 

在开始之前，先说明一下，以下的模仿过程全部处于FleaPHP框架之下，数据库为MySQL。

以下为功能实现的整个过程。

第一步：相关数据表准备 

先创建一个文章管理数据表articles，该表含有一个自增量字段art_id。
接着创建一个分类标签数据表tags，其表结构如下图所示：


 
再创建一个中间表articles_tags，其表结构如下图所示：


 
第二步：编写数据表对象代码 

1、编写文章数据表对象代码。如下所示：

Php代码  

1. <?php  
2.   
3. FLEA::loadClass('FLEA_Db_TableDataGateway');  
4.   
5. /** 
6.  * 文章数据表对象 
7.  */  
8. class Table_Articles extends FLEA_Db_TableDataGateway  
9. {  
10.     var $tableName = 'articles';  
11.     var $primaryKey = 'art_id';  
12.   
13.     /** 
14.      * 定义多对多关系 
15.      * 
16.      */  
17.     var $manyToMany = array(  
18.         array(  
19.             'tableClass'      => 'Table_Tags',  
20.             'joinTable'       => 'articles_tags',  
21.             'foreignKey'      => 'art_id',  
22.             'assocforeignKey' => 'tag_id',  
23.             'mappingName'     => 'tags',  
24.             'enabled'          => false  
25.         )  
26.     );  
27. }  
28. ?>  

 

2、编写分类标签数据表对象代码。如下所示：

Php代码  

1. <?php  
2.   
3. FLEA::loadClass('FLEA_Db_TableDataGateway');  
4.   
5. /** 
6.  * 分类标签数据表对象 
7.  */  
8. class Table_Tags extends FLEA_Db_TableDataGateway  
9. {  
10.     var $tableName = 'tags';  
11.     var $primaryKey = 'tag_id';  
12. }  
13. ?>  

 

第三步：编写模型对象类代码 

1、编写分类标签模型对象类代码。如下所示：

Php代码  

1. <?php  
2.   
3. /** 
4.  * 分类标签模型对象类 
5.  */  
6. class Model_Tags  
7. {  
8.     var $_tblTags;  
9.   
10.     /** 
11.      * 构造函数 
12.      * 
13.      */  
14.     function Model_Tags()  
15.     {  
16.         $this->_tblTags = & FLEA::getSingleton('Table_Tags');  
17.     }  
18.   
19.     /** 
20.      * 生成标签下拉列表HTML代码 
21.      */  
22.     function makeTagsDropdownlist()  
23.     {  
24.         $ui = & FLEA::initWebControls();  
25.         FLEA::loadFile('FLEA_Helper_Array.php');  
26.   
27.         $rows = $this->_tblTags->findAll();  
28.   
29.         // 增加一个下拉选择项在最前面  
30.         array_unshift($rows, array('tag_id' => 0, 'label' => '选择已有分类'));  
31.   
32.         $items = array_to_hashmap($rows, 'label', 'tag_id');  
33.   
34.         return $ui->control(  
35.             'dropdownlist',  
36.             'tagsel',  // 下拉列表ID  
37.             array(  
38.                 'items' => $items,  
39.                 //'selected' => null,  
40.             ),  
41.             true // 指示返回html代码，如果为false，则不返回  
42.         );  
43.     }  
44. }  
45. ?>  

 

2、编写文章模型对象代码。如下所示：

Php代码  

1. <?php  
2.   
3. /** 
4.  * 文章模型对象 
5.  */  
6. class Model_Articles  
7. {  
8.     var $_tblArt;  
9.      
10.     /** 
11.      * 构造函数 
12.      * 
13.      */  
14.     function Model_Articles()  
15.     {  
16.         $this->_tblArt = & FLEA::getSingleton('Table_Articles');  
17.     }  
18.      
19.     /** 
20.      * 完成对文章条目所关联的 tags 的处理 
21.      * 
22.      * @param array $row 
23.      */  
24.     function _processTags(& $row) {  
25.         // 读出数据库现有的所有 tags  
26.         $tblTags = & FLEA::getSingleton('Table_Tags');  
27.   
28.         $rows = $tblTags->findAll(null);  
29.          
30.         FLEA::loadFile('FLEA_Helper_Array.php');  
31.         $existsTags = array_to_hashmap($rows, 'label', 'tag_id');  
32.   
33.         // 处理用户输入的 tags  
34.         $labels = explode(',', $row['tags']);  
35.         //$labels = explode(',', $tags);  
36.         $tagsIdList = array();  
37.         foreach ($labels as $label) {  
38.             $label = strtolower(trim($label));  
39.             if ($label == '') {  
40.                 continue;  
41.             }  
42.             if (isset($existsTags[$label])) {  
43.                 // 将文档登记到现有 tag  
44.                 $tagsIdList[] = $existsTags[$label];  
45.             } else {  
46.                 // 创建新 tag，并登记文档  
47.                 $tag = array('label' => $label);  
48.                 $tagsIdList[] = $tblTags->create($tag);  
49.             }  
50.         }  
51.   
52.         $row['tags'] = $tagsIdList;  
53.         //return $tagsIdList;  
54.     }  
55.      
56.     /** 
57.      * 新增文章 
58.      * 
59.      * @param array $row 
60.      * @return int 
61.      */  
62.     function create(& $row) {  
63.         $this->_processTags($row);  
64.         $this->_tblArt->enableLink('tags');  
65.         return $this->_tblArt->create($row);  
66.     }  
67.      
68.     /** 
69.      * 更新文章 
70.      * 
71.      * @param array $row 
72.      * @return int 
73.      */  
74.     function update(& $row) {  
75.         $this->_processTags($row);  
76.         $this->_tblArt->enableLink('tags');  
77.         return $this->_tblArt->update($row);  
78.     }  
79. }  
80. ?>  

 

第四步、编写HTML模板代码 

因为要利用到jQuery，所以模板文件要引入jQuery库文件。如下所示：

Html代码  

1. <!-- // 引入 jQuery 库文件 -->  
2. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>  

 

模板文件中与标签相关的HTML代码：

Html代码  

1. <tr>  
2.    <td>分类标签：</td>  
3.    <td><input name="tags" type="text" id="tags" size="30" />  
4. {{ $art.taglist }}*多个标签之间用半角逗号分隔</td>  
5. </tr>  

 

编写选择录入已有标签的JavaScript代码：

Js代码  

1. <script type="text/javascript">  
2.     $(function() {  
3.         $("#tagsel").change(function(){  
4.             var txt = $("option:selected", this).text();  
5.             if (txt == '选择已有分类') {  
6.                 txt = '';  
7.             } else {  
8.                 var label = $("#tags").val();  
9.                 if (label) {  
10.                     txt = label +  ', ' + txt;  
11.                 }  
12.             }  
13.             $("#tags").val(txt);  
14.         });  
15.     });  
16. </script>  

 

第五步：编写后台文章控制器类代码

Php代码  

1. <?php  
2. /** 
3.  * 办公网站后台管理——文章管理控制器类 
4.  * 
5.  * 文 件 名：Admin/Controller/Article.php 
6.  * 作    者：hegz 
7.  * 更新时间：2010/05/07 
8.  * 
9.  */  
10.   
11. /** 
12.  * 装入后台管理控制器基类 
13.  */  
14.   
15. //{{  
16. FLEA::loadClass('Controller_AdminBase');  
17. //}}  
18.   
19. class Controller_Article extends Controller_AdminBase  
20. {  
21.     var $_modelArt;  
22.   
23.     /** 
24.      * 构造函数 
25.      * 
26.      */  
27.     function Controller_Article()  
28.     {  
29.         parent::Controller_AdminBase();  
30.         $this->_modelArt = & FLEA::getSingleton('Model_Articles');  
31.     }  
32.   
33.    /** 
34.     * 显示新增文档界面操作 
35.     * 
36.     */  
37.     function actionAdd()  
38.     {  
39.         ......  
40.          
41.         $tags = & FLEA::getSingleton('Model_Tags');  
42.         $data = array(  
43.             'header' => '攒写文档',  
44.             'action' => $this->_url('Save'),  
45.             'taglist' => $tags->makeTagsDropdownlist()  // 注意此句代码，生成下拉列表HTML代码  
46.         );  
47.   
48.         ......  
49.   
50.         $this->tpl->assign('art', $data);   // Smarty模板引擎变量替换  
51.   
52.         ......  
53.     }  
54.   
55.     /** 
56.      * 保存文档操作 
57.      * 
58.      */  
59.     function actionSave()  
60.     {  
61.         $data = $_POST;  
62.   
63.         ......  
64.          
65.         if ($data['art_id']) {  
66.             $this->_modelArt->update($data);  
67.             $art_id = $data['art_id'];  
68.         } else {  
69.             $art_id = $this->_modelArt->create($data);  
70.         }  
71.          
72.         ......  
73.     }  
74. }  

 

 

结束语

 

上面的实现过程由于要考虑新标签的保存及旧标签的处理，以及文章表与标签表的多对多关联，所以看上去有些复杂。如果不考虑这些实现，就只是下面几行处理标签录入的JavaScript代码的事。

Js代码  

1. <script type="text/javascript">  
2.     $(function() {  
3.         $("#tagsel").change(function(){  
4.             var txt = $("option:selected", this).text();  
5.             if (txt == '选择已有分类') {  
6.                 txt = '';  
7.             } else {  
8.                 var label = $("#tags").val();  
9.                 if (label) {  
10.                     txt = label +  ', ' + txt;  
11.                 }  
12.             }  
13.             $("#tags").val(txt);  
14.         });  
15.     });  
16. </script>  

 

最后，实现的效果如下图所示：