大概完成了标签导航的页面

public/css/style.css

@@ -3,6 +3,23 @@ body {
     font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
-a {
+.div-hover {
-  color: #00B7FF;
+    background:#F5F5F5;
+    cursor:pointer;
+}
+
+.img-fixed-size{
+    width:16px;
+    height:16px;
+}
+
+.js-navigate-bookmark{
+    white-space:nowrap;
+    text-overflow:ellipsis;
+    -o-text-overflow:ellipsis;
+    overflow: hidden;
+    color:#212121;
+}
+.js-navigate-bookmark a{
+    color:#212121;
 }

public/scripts/controllers/bookmarks-controller.js

@@ -1,54 +1,27 @@
-app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkService', 'pubSubService', function($scope, $stateParams, $filter, bookmarkService, pubSubService) {
+app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', '$window', 'bookmarkService', 'pubSubService', function($scope, $stateParams, $filter, $window, bookmarkService, pubSubService) {
     console.log("Hello bookmarksCtr...", $stateParams);
     $scope.bookmarks = []; // 书签数据
     $scope.showSearch = false; // 书签数据
-    $scope.showStyle = 'table'; // 显示风格'navigate', 'card', 'table'
+    $scope.showStyle = 'navigate'; // 显示风格'navigate', 'card', 'table'
-    $scope.test = [{
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }, {
-        a: 1
-    }];
-
     semanticInit();
 
     var params = {
-        s: 111,
+        show: $scope.showStyle,
-        b: 222,
-        i: 'lcq'
     }
     getBookmarks(params);
+    $scope.jumpToUrl = function(url) {
+        console.log(url);
+        $window.open(url, '_blank');
+    }
 
-    pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) {
+    pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, params) {
-        console.log('subscribe MenuCtr.bookmarks', data);
+        console.log('subscribe MenuCtr.bookmarks', params);
-        // $scope.showSearch = (Math.random() >= 0.5);
+        getBookmarks(params);
-        // if ($scope.showSearch) {
-        //     setTimeout(() => {
-        //         semanticInit();
-        //     }, 100);
-        //
-        // }
-        getBookmarks(data);
     });
 
-    pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, data) {
+    pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, params) {
-        console.log('subscribe MenuCtr.searchBookmarks', data);
+        console.log('subscribe MenuCtr.searchBookmarks', params);
-        getBookmarks(data);
+        getBookmarks(params);
     });
 
     function getBookmarks(params) {
@@ -64,6 +37,7 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkSe
     }
 
     function semanticInit() {
+        setTimeout(() => {
             $('.ui.dropdown').dropdown();
             $('.ui.calendar.js-date-begin').calendar({
                 type: 'date',
@@ -91,5 +65,13 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkSe
                 },
                 startCalendar: $('.ui.calendar.js-date-begin')
             });
+
+            $('.js-navigate-bookmark').hover(function() {
+                $(this).addClass('div-hover');
+            }, function() {
+                //鼠标离开时移除divOver样式
+                $(this).removeClass('div-hover');
+            });
+        }, 100);
     }
 }]);

public/views/bookmarks.html

@@ -1,22 +1,37 @@
-<div class="ui segment">
+<div class="ui segment" ng-if="showStyle === 'navigate'">
-    <div class="ui grid">
+    <div class="ui internally grid">
-        <div class="row" ng-repeat="ss in test">
+        <div class="row" ng-repeat="tag in bookmarks">
             <div class="one wide column">
-                ssssss
+                <span style="color:#0aa770;">{{ tag.name }}</span>
             </div>
-            <div class="fifteen wide column">
+            <div class="fourteen wide column">
-                <div class="ui cards">
+                <div class="ui grid container">
-                    <div class="card" ng-repeat="ss in test">
+                    <div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
-                        <div class="content">
+                        <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
-                            <div class="header">Elliot Fu</div>
+                        <span>{{ bookmark.title}}</span>
-                            <div class="meta">Friend</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+<div class="ui segment" ng-if="false">
+    <div class="ui raised" ng-repeat="tag in bookmarks">
+        <!-- <a class="ui orange ribbon label" style="margin-bottom:20px">{{ tag.name }}</a> <span></span> -->
+        <div class="ui grid container">
+            <div class="two wide column">
+                <i class="bookmark icon"></i><span>{{ tag.name }}</span>
             </div>
+
+            <div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
+                <img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
+                <span>{{ bookmark.title}}</span>
+            </div>
+        </div>
+        <div class="ui divider"></div>
+    </div>
+</div>
+
 <div class="ui small menu js-search-detail" ng-if="showSearch">
     <div class="ui dropdown item">
         <div class="text">搜索范围</div>
@@ -113,16 +128,3 @@
         </tr>
     </tfoot>
 </table>
-ght chevron icon"></i>
-</a>
-</div>
-</th>
-</tr>
-</tfoot>
-</table>
-/a>
-</div>
-</th>
-</tr>
-</tfoot>
-</table>

routes/api.js

@@ -1,61 +1,89 @@
 var api = require('express').Router();
 var mysql = require('mysql');
-// var client = mysql.createConnection({
-//     host: '172.24.13.5',
-//     user: 'root',
-//     password: 'root123',
-//     database: 'mybookmarks',
-//     multipleStatements: true,
-//     port: 3306
-// });
 var client = mysql.createConnection({
-    host: '127.0.0.1',
+    host: '172.24.13.5',
-    user: 'lcq',
+    user: 'root',
-    password: '123456',
+    password: 'root123',
     database: 'mybookmarks',
     multipleStatements: true,
     port: 3306
 });
+// var client = mysql.createConnection({
+//     host: '127.0.0.1',
+//     user: 'lcq',
+//     password: '123456',
+//     database: 'mybookmarks',
+//     multipleStatements: true,
+//     port: 3306
+// });
 client.connect();
 
 api.get('/bookmarks', function(req, res) {
     console.log('hello bookmarks', JSON.stringify(req.query));
+    if (req.query.show === 'navigate') {
+        var sql = "SELECT t.id as tag_id, t.name as tag_name, b.* FROM `tags` as t LEFT OUTER JOIN tags_bookmarks as tb ON t.id = tb.tag_id LEFT OUTER JOIN bookmarks as b ON tb.bookmark_id = b.id ORDER BY t.id ASC, b.click_count DESC";
+        client.query(sql, function(error, result, fields) {
+            var data = [];
+            var tag = {
+                id: result && result[0] && result[0].tag_id,
+                name: result && result[0] && result[0].tag_name,
+                bookmarks: []
+            };
+            result.forEach(function(bookmark) {
+                if (tag.id !== bookmark.tag_id) {
+                    data.push({
+                        id: tag.id,
+                        name: tag.name,
+                        bookmarks: tag.bookmarks
+                    });
+                    tag.id = bookmark.tag_id;
+                    tag.name = bookmark.tag_name;
+                    tag.bookmarks = [];
+                }
+                tag.bookmarks.push(bookmark);
+            });
+            if (result && result.length > 0) {
+                data.push(tag);
+            }
+            res.json(data);
+        })
+    } else {
         var sqlBookmarks = "SELECT id, user_id, title, description, url, public, click_count, DATE_FORMAT(created_at, '%Y-%m-%d') as created_at,  DATE_FORMAT(last_click, '%Y-%m-%d') as last_click FROM `bookmarks` WHERE user_id='1' ORDER BY click_count DESC, created_at DESC LIMIT 0, 50";
         var sqlTags = "SELECT id, name FROM `tags` WHERE user_id='1'";
 
-    client.query(sqlBookmarks, function(error, data1, fields) {
+        client.query(sqlBookmarks, function(error, result1, fields) {
             if (error) {
                 res.json({
                     error: "数据查询出错"
                 });
             } else {
                 var bookmark_ids = ''
-            data1.forEach(function(bookmark) {
+                result1.forEach(function(bookmark) {
                     bookmark_ids += "'" + bookmark.id + "',";
                 })
                 bookmark_ids = bookmark_ids.slice(0, bookmark_ids.length - 1);
 
                 var sqlTagIdBookmarkId = "SELECT * FROM `tags_bookmarks` WHERE bookmark_id in(" + bookmark_ids + ")";
-            client.query(sqlTagIdBookmarkId, function(error, data2, fields) {
+                client.query(sqlTagIdBookmarkId, function(error, result2, fields) {
-                // console.log(data2);
+                    // console.log(result2);
                     if (error) {
                         res.json({
                             error: "数据查询出错"
                         });
                     } else {
-                    client.query(sqlTags, function(error, data3, fields) {
+                        client.query(sqlTags, function(error, result3, fields) {
-                        // console.log(data3);
+                            // console.log(result3);
                             if (error) {
                                 res.json({
                                     error: "数据查询出错"
                                 });
                             } else {
                                 var data = [];
-                            data1.forEach(function(bookmark) {
+                                result1.forEach(function(bookmark) {
                                     var tags = [];
-                                data2.forEach(function(bookmark_tag) {
+                                    result2.forEach(function(bookmark_tag) {
                                         if (bookmark_tag.bookmark_id == bookmark.id) {
-                                        data3.forEach(function(tag) {
+                                            result3.forEach(function(tag) {
                                                 if (bookmark_tag.tag_id == tag.id) {
                                                     tags.push(tag)
                                                 }
@@ -72,6 +100,7 @@ api.get('/bookmarks', function(req, res) {
                 });
             }
         });
+    }
 });
 
 api.get('/tags', function(req, res) {