完成表格页面的页面跳转

database/db.js

@@ -255,20 +255,42 @@ db.getBookmarksNavigate = function(user_id) {
     });
 };
 
-db.getBookmarksTable = function(user_id) {
+db.getBookmarksTable = function(params) {
-    var sql = "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='" + user_id + "' ORDER BY click_count DESC, created_at DESC LIMIT 0, 50";
+    var user_id = params.user_id;
+    params.currentPage = params.currentPage || 1;
+    params.perPageItems = params.perPageItems || 20;
+
+    var sql = "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 1=1";
+    if (user_id) {
+        sql += " AND `user_id` = '" + user_id + "'"
+    }
+
     return new Promise(function(resolve, reject) {
         client.query(sql, (err, result) => {
             if (err) {
                 reject(err);
             } else {
-                resolve(result);
+                sql += " LIMIT " + (params.currentPage - 1) * params.perPageItems + ", " + params.perPageItems;
+                var totalItems = result.length;
+                client.query(sql, (err, result) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        var bookmarksData = {
+                            totalItems: totalItems,
+                            bookmarks: result,
+                        }
+                        resolve(bookmarksData);
+                    }
+                });
             }
         });
-    });
+    })
 }
 
 db.getBookmarksSearch = function(params) {
+    params.currentPage = params.currentPage || 1;
+    params.perPageItems = params.perPageItems || 20;
     var sql = "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 1=1";
 
     if (params.dateCreate) {
@@ -305,7 +327,7 @@ db.getBookmarksSearch = function(params) {
     }
 
     params.currentPage = params.currentPage || 1;
-    params.currentPageItems = params.currentPageItems || 20;
+    params.perPageItems = params.perPageItems || 20;
     sql += " ORDER BY click_count DESC, created_at DESC";
     console.log(sql);
     return new Promise(function(resolve, reject) {
@@ -314,7 +336,7 @@ db.getBookmarksSearch = function(params) {
                 reject(err);
             } else {
 
-                sql += " LIMIT " + (params.currentPage - 1) * params.currentPageItems + ", " + params.currentPageItems;
+                sql += " LIMIT " + (params.currentPage - 1) * params.perPageItems + ", " + params.perPageItems;
                 var totalItems = result.length;
                 client.query(sql, (err, result) => {
                     if (err) {

public/scripts/controllers/bookmarks-controller.js

@@ -4,8 +4,10 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.showSearch = false; // 搜索对话框
     $scope.bookmarkNormalHover = false;
     $scope.bookmarkEditHover = false;
-    $scope.showStyle = 'navigate'; // 显示风格'navigate', 'card', 'table'
+    $scope.showStyle = ($stateParams && $stateParams.showStyle) || 'navigate'; // 显示风格'navigate', 'card', 'table'
+    $('.js-radio-' + $scope.showStyle).checkbox('set checked');
     $scope.edit = false;
+    const perPageItems = 20;
     $scope.totalPages = 0;
     $scope.currentPage = 1;
     $scope.inputPage = '';
@@ -15,6 +17,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
         if (currentPage <= $scope.totalPages && currentPage >= 1) {
             $scope.currentPage = currentPage;
             $scope.inputPage = '';
+            getBookmarks(params);
         }
     }
 
@@ -55,20 +58,6 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
 
     }
 
-    pubSubService.subscribe('MenuCtr.searchDetail', $scope, function(event, params) {
-        $scope.showSearch = (params && params.showSearch)
-    });
-    pubSubService.subscribe('MenuCtr.updateShowStyle', $scope, function(event, params) {
-        $scope.showStyle = (params && params.showStyle);
-        getBookmarks(params);
-    });
-
-
-    pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, params) {
-        console.log('subscribe MenuCtr.searchBookmarks', params);
-        getBookmarks(params);
-    });
-
     pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, params) {
         params.showStyle = $scope.showStyle;
         console.log('subscribe EditCtr.inserBookmarsSuccess', params);
@@ -76,11 +65,18 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     });
 
     function getBookmarks(params) {
+        if (params.showStyle != 'navigate') {
+            params.currentPage = $scope.currentPage;
+            params.perPageItems = perPageItems;
+        }
         bookmarkService.getBookmarks(params)
             .then((data) => {
-                $scope.bookmarks = data;
+                if (params.showStyle != 'navigate') {
-                $scope.totalPages = parseInt(Math.random() * 1000);
+                    $scope.bookmarks = data.bookmarks;
-                $scope.currentPage = (parseInt(Math.random() * 1000) % $scope.totalPages) + 1;
+                    $scope.totalPages = Math.ceil(data.totalItems / perPageItems);
+                } else {
+                    $scope.bookmarks = data;
+                }
                 pubSubService.publish('Common.menuActive', {
                     login: true,
                     index: 0
@@ -92,5 +88,4 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.$on('viewContentLoaded', function(elementRenderFinishedEvent) {
         $('.ui.dropdown').dropdown();
     });
-
 }]);

public/scripts/controllers/menus-controller.js

@@ -50,9 +50,9 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
     $scope.updateShowStyle = function(showStyle) {
         console.log('updateShowStyle', showStyle)
         $('.js-radio-' + showStyle).checkbox('set checked');
-        pubSubService.publish('MenuCtr.updateShowStyle', {
+        $state.go('bookmarks', {
-            'showStyle': showStyle,
+            showStyle: showStyle,
-        });
+        })
     }
 
     $scope.showAddBookmarkMoadl = function() {
@@ -76,41 +76,6 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService',
             .catch((err) => console.log('logout err', err));
     }
 
-    // 元素构造完成之后，开始使用jquery初始化
-
-    $scope.$on('viewContentLoaded', function(elementRenderFinishedEvent) {
-        console.log('menus viewContentLoaded')
-        $('.js-bookmark-dropdown').dropdown({
-            action: 'hide',
-        });
-        $('.ui.dropdown').dropdown({
-            on: 'hover',
-        });
-
-        $('.ui.checkbox').checkbox();
-        $('.ui.checkbox.js-radio-navigate').checkbox('check');
-        $('.ui.menu a.item').on('click', function() {
-            $(this).addClass('selected').siblings().removeClass('selected');
-        });
-
-        $(".ui.menu a.item:first").hover(
-            function() {
-                $('.js-bookmark-dropdown').dropdown('show');
-            },
-            function() {
-                setTimeout(() => {
-                    if ($('.js-menu-option:hover').length === 0) {
-                        $('.js-bookmark-dropdown').dropdown('hide');
-                    }
-                }, 100)
-            }
-        );
-
-        $('.ui.menu a.item').on('click', function() {
-            $(this).addClass('selected').siblings().removeClass('selected');
-        });
-    });
-
     function updateMenuActive(index) {
         $('.ui.menu a.item').removeClass('selected');
         $('.ui.menu a.item:eq(' + index + ')').addClass('selected');

public/scripts/controllers/search-controller.js

@@ -1,6 +1,6 @@
 app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) {
     console.log("Hello searchCtr...", $stateParams);
-    const currentPageItems = 20;
+    const perPageItems = 20;
     $scope.bookmarks = []; // 书签数据
     $scope.showSearch = false; //
     $scope.showTags = false; //
@@ -38,7 +38,7 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
     var searchParams = {
         searchWord: $scope.searchWord,
         currentPage: 1,
-        currentPageItems: currentPageItems,
+        perPageItems: perPageItems,
     }
     if ($scope.searchWord) {
         searchBookmarks(searchParams);
@@ -102,7 +102,7 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
             params.dateClickEnd = $scope.dateClickEnd;
         }
         params.currentPage = $scope.currentPage;
-        params.currentPageItems = currentPageItems;
+        params.perPageItems = perPageItems;
         searchBookmarks(params)
         console.log('search..', params)
     }
@@ -135,7 +135,7 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
             .then((data) => {
                 $scope.bookmarks = data.bookmarks;
                 $scope.bookmarkCount = data.totalItems;
-                $scope.totalPages = Math.ceil($scope.bookmarkCount / currentPageItems);
+                $scope.totalPages = Math.ceil($scope.bookmarkCount / perPageItems);
 
                 pubSubService.publish('Common.menuActive', {
                     login: true,

public/scripts/directives/js-init-directive.js

@@ -124,3 +124,41 @@ app.directive('jsEditTagsInit', function($compile) {
         },
     };
 });
+
+app.directive('jsMenuInit', function($compile) {
+    return {
+        restrict: 'A',
+        link: function($scope, $element, $attrs) {
+            if ($scope.$last === true) {
+                console.log('jsMenuInit......')
+                $('.js-bookmark-dropdown').dropdown({
+                    action: 'hide',
+                    on: 'hover',
+                });
+
+                $('.js-bookmark-dropdown .ui.checkbox').checkbox();
+                $('.ui.checkbox.js-radio-navigate').checkbox('check');
+                $('.ui.menu a.item').on('click', function() {
+                    $(this).addClass('selected').siblings().removeClass('selected');
+                });
+
+                $(".ui.menu a.item:first").hover(
+                    function() {
+                        $('.js-bookmark-dropdown').dropdown('show');
+                    },
+                    function() {
+                        setTimeout(() => {
+                            if ($('.js-menu-option:hover').length === 0) {
+                                $('.js-bookmark-dropdown').dropdown('hide');
+                            }
+                        }, 100)
+                    }
+                );
+
+                $('.ui.menu a.item').on('click', function() {
+                    $(this).addClass('selected').siblings().removeClass('selected');
+                });
+            }
+        },
+    };
+});

public/views/menus.html

@@ -1,6 +1,6 @@
 <div class="js-menu" ng-controller="menuCtr">
     <div class="ui huge menu js-login-in" ng-if="login">
-        <a class="item" ng-class="{selected:$index===selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus">
+        <a class="item" ng-class="{selected:$index===selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus" js-menu-init>
             <div>{{ menu.title }}</div>
             <div class="ui floating simple dropdown icon js-bookmark-dropdown" ng-if="$index==0" ng-click="$event.stopPropagation();">
                 <i class="dropdown icon"></i>

routes/api.js

@@ -137,8 +137,9 @@ api.get('/bookmarks', function(req, res) {
         res.send(401);
         return;
     }
-    var userId = '1';
+    var userId = req.session.userId;
-    if (req.query.showStyle === 'navigate') {
+    var params = req.query;
+    if (params.showStyle === 'navigate') {
         db.getBookmarksNavigate(userId)
             .then((result) => {
                 var data = [];
@@ -175,10 +176,17 @@ api.get('/bookmarks', function(req, res) {
     } else {
         var bookmarks = [];
         var tagsBookmarks = [];
-
+        var totalItems = 0;
-        db.getBookmarksTable(userId)
+        var totalItems = 0;
-            .then((bms) => {
+        var sendData = {
-                bookmarks = bms;
+            totalItems: totalItems,
+            bookmarks: []
+        }
+        params.user_id = req.session.userId;
+        db.getBookmarksTable(params)
+            .then((bookmarksData) => {
+                bookmarks = bookmarksData.bookmarks;
+                totalItems = bookmarksData.totalItems;
                 var bookmarkIds = bookmarks.map((bookmark) => bookmark.id);
                 return db.getTagsBookmarks(bookmarkIds);
             })
@@ -203,7 +211,9 @@ api.get('/bookmarks', function(req, res) {
                     bookmark.tags = bookmarkTags;
                     data.push(bookmark);
                 })
-                res.json(data);
+                sendData.totalItems = totalItems;
+                sendData.bookmarks = data;
+                res.json(sendData);
             })
             .catch((err) => console.log('bookmarks table or card err', err))
     }
@@ -221,6 +231,10 @@ api.get('/searchBookmarks', function(req, res) {
     var tagsBookmarks = [];
     var userId = '1';
     var totalItems = 0;
+    var sendData = {
+        totalItems: totalItems,
+        bookmarks: []
+    }
     db.getBookmarksSearch(params)
         .then((searchData) => {
             totalItems = searchData.totalItems;
@@ -229,7 +243,7 @@ api.get('/searchBookmarks', function(req, res) {
                 var bookmarkIds = bookmarks.map((bookmark) => bookmark.id);
                 return db.getTagsBookmarks(bookmarkIds);
             } else {
-                res.json([]);
+                res.json(sendData);
                 return Promise.reject('没有搜到到任何书签');
             }
         })
@@ -238,10 +252,6 @@ api.get('/searchBookmarks', function(req, res) {
             return db.getTags(userId);
         })
         .then((tags) => {
-            var sendData = {
-                totalItems: totalItems,
-                bookmarks: []
-            }
             var data = [];
             // 获取每个书签的所有分类标签
             bookmarks.forEach(function(bookmark) {
@@ -258,6 +268,7 @@ api.get('/searchBookmarks', function(req, res) {
                 bookmark.tags = bookmarkTags;
                 data.push(bookmark);
             })
+            sendData.totalItems = totalItems;
             sendData.bookmarks = data;
             res.json(sendData);
         })