完成卡片模式的部分内容

.gitignore

@@ -38,3 +38,4 @@ jspm_packages
 
 # Upload File
 uploads
+/public/images/shot/

database/db.js

@@ -52,15 +52,15 @@ Date.prototype.format = function(fmt) { //author: meizz
 // update delete 返回影响的行数
 var db = {
 
-    }
+}
-    // var sql = "SELECT * FROM `users` WHERE `username` = 'luchenqun'";
+// var sql = "SELECT * FROM `users` WHERE `username` = 'luchenqun'";
-    // client.query(sql, (err, result) => {
+// client.query(sql, (err, result) => {
-    //     if (err) {
+//     if (err) {
-    //         console.log(err);
+//         console.log(err);
-    //     } else {
+//     } else {
-    //         console.log(result);
+//         console.log(result);
-    //     }
+//     }
-    // });
+// });
 
 db.addBookmark = function(user_id, bookmark) {
     var insertSql = "INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `public`, `click_count`) VALUES ('" + user_id + "', '" + bookmark.title + "', '" + bookmark.description + "', '" + bookmark.url + "', '" + bookmark.public + "', '1')";
@@ -413,9 +413,14 @@ 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 1=1";
     if (user_id) {
-        sql += " AND `user_id` = '" + user_id + "' ORDER BY click_count DESC"
+        sql += " AND `user_id` = '" + user_id + "'";
+        if (params.showStyle == 'card') {
+            sql += " ORDER BY created_at DESC";
+        } else {
+            sql += " ORDER BY click_count DESC";
         }
-
+    }
+    console.log(sql);
     return new Promise(function(resolve, reject) {
         client.query(sql, (err, result) => {
             if (err) {

package.json

@@ -20,6 +20,7 @@
     "mysql": "^2.11.1",
     "node-readability": "^2.2.0",
     "serve-favicon": "~2.3.0",
-    "supervisor": "^0.11.0"
+    "supervisor": "^0.11.0",
+    "webshot": "^0.18.0"
   }
 }

public/css/style.css

@@ -10,7 +10,7 @@ code {
     background-color: rgba(0, 0, 0, 0.08);
     border-radius: 3px;
     display: inline-block;
-    font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
     font-size: 0.875em;
     font-weight: bold;
     padding: 1px 6px;
@@ -24,6 +24,13 @@ code {
     color: #212121;
     border: 1px solid transparent;
 }
+.bookmarkTitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 40px;
+}
 .bookmarkNormalHover {
     white-space: nowrap;
     text-overflow: ellipsis;

public/scripts/controllers/bookmarks-controller.js

@@ -4,7 +4,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.showSearch = false; // 搜索对话框
     $scope.bookmarkNormalHover = false;
     $scope.bookmarkEditHover = false;
-    $scope.showStyle = ($stateParams && $stateParams.showStyle) || 'navigate'; // 显示风格'navigate', 'card', 'table'
+    $scope.showStyle = 'card' //($stateParams && $stateParams.showStyle) || 'card'; // 显示风格'navigate', 'card', 'table'
     $('.js-radio-' + $scope.showStyle).checkbox('set checked');
     $scope.edit = false;
     const perPageItems = 20;
@@ -102,7 +102,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     function getBookmarks(params) {
         if (params.showStyle != 'navigate') {
             params.currentPage = $scope.currentPage;
-            params.perPageItems = perPageItems;
+            params.perPageItems = params.showStyle == 'table' ? perPageItems : perPageItems * 3;
         }
         bookmarkService.getBookmarks(params)
             .then((data) => {

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

@@ -162,3 +162,15 @@ app.directive('jsMenuInit', function($compile) {
         },
     };
 });
+
+app.directive('errSrc', function() {
+    return {
+        link: function(scope, element, attrs) {
+            element.bind('error', function() {
+                if (attrs.src != attrs.errSrc) {
+                    attrs.$set('src', attrs.errSrc);
+                }
+            });
+        }
+    }
+});

public/views/bookmarks.html

@@ -30,7 +30,7 @@
                             id="{{bookmark.id}}">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
-                            <img class="ui ui middle aligned tiny image" ng-src=" http://www.google.com/s2/favicons?domain={{ bookmark.url }}" style="width:16px;height:16px" ng-if="!edit">
+                            <img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px" ng-if="!edit">
                             <span>{{ bookmark.title}}</span>
                         </div>
                         <div class="two wide column js-more-bookmark" ng-class="" ng-mouseover="" ng-mouseleave="" title="查看更多" ng-if="tag.bookmarks.length >= 31" ng-click="jumpToTags(tag.id)">
@@ -59,7 +59,7 @@
     <tbody>
         <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
             <td>
-                <img class="ui ui middle aligned tiny image" src=" http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
+                <img class="ui ui middle aligned tiny image" src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px">
                 <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
                     {{ bookmark.title }}
                 </span>
@@ -91,4 +91,20 @@
         </tr>
     </tfoot>
 </table>
-<div class="ui segment" ng-if="showStyle === 'card'">正在开发中，尽请期待。。。。。。</div>
+<div class="ui segment" ng-if="showStyle === 'card'">
+    <div class="ui five stackable cards">
+        <div class="card link raised" ng-repeat="bookmark in bookmarks">
+            <div class="image">
+                <img ng-src="./images/shot/{{bookmark.id}}.png" err-src="./images/shot/264.png"/>
+            </div>
+            <div class="content" href="{{ bookmark.url }}">
+                <div class="description bookmarkTitle">
+                    {{bookmark.title}}
+                </div>
+                <div class="meta">
+                    <span class="date">{{ bookmark.created_at }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

public/views/search.html

@@ -128,7 +128,7 @@
     <tbody>
         <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
             <td>
-                <img class="ui ui middle aligned tiny image" src=" http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
+                <img class="ui ui middle aligned tiny image" src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px">
                 <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
                     {{ bookmark.title }}
                 </span>

public/views/tags.html

@@ -28,7 +28,7 @@
     <tbody>
         <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
             <td>
-                <img class="ui ui middle aligned tiny image" src=" http://www.google.com/s2/favicons?domain={{bookmark.url}}" style="width:16px;height:16px">
+                <img class="ui ui middle aligned tiny image" src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px">
                 <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}">
                     {{ bookmark.title }}
                 </span>

routes/api.js

@@ -5,6 +5,15 @@ var read = require('node-readability');
 var db = require('../database/db.js');
 var parseHtml = require('../common/parse_html.js');
 var multer = require('multer');
+var webshot = require('webshot');
+var fs = require('fs');
+
+var webshotOptions = {
+    shotSize: {
+        width: 320,
+        height: 320
+    },
+};
 
 var storage = multer.diskStorage({
     destination: function(req, file, cb) {
@@ -285,6 +294,7 @@ api.get('/bookmarks', function(req, res) {
                 var data = [];
                 // 获取每个书签的所有分类标签
                 bookmarks.forEach(function(bookmark) {
+                    getWebshot(bookmark.id, bookmark.url);
                     var bookmarkTags = [];
                     tagsBookmarks.forEach(function(tb) {
                         if (tb.bookmark_id == bookmark.id) {
@@ -566,7 +576,10 @@ api.post('/addBookmark', function(req, res) {
             db.delBookmarkTags(bookmark_id); // 不管3721，先删掉旧的分类
             return bookmark_id;
         }) // 将之前所有的书签分类信息删掉
-        .then((bookmark_id) => db.addTagsBookmarks(tags, bookmark_id)) // 插入分类
+        .then((bookmark_id) => {
+            getWebshot(bookmark_id, bookmark.url);
+            return db.addTagsBookmarks(tags, bookmark_id)
+        }) // 插入分类
         .then(() => db.updateLastUseTags(userId, tags)) // 更新最新使用的分类
         .then(() => res.json({})) // 运气不错
         .catch((err) => console.log('addBookmark err', err)); // oops!
@@ -620,4 +633,17 @@ function md5(str) {
         .digest('hex');
 };
 
+function getWebshot(id, url) {
+    var finePath = './public/images/shot/' + id + '.png'
+    fs.exists(finePath, function(exists) {
+        if (!exists) {
+            webshot(url, finePath, webshotOptions, function(err) {
+                if (err) {
+                    console.log(id + " webshot fail", err);
+                }
+            });
+        }
+    });
+}
+
 module.exports = api;