1、从Github获取更新日志。2、分类页面条目显示时排序按钮UI更新

2017-06-20 16:18:46 +08:00 · 2017-06-20 16:18:46 +08:00 · 12cbfba6b4
parent 2f1276de98
commit 12cbfba6b4
9 changed files with 171 additions and 44 deletions
--- a/README.md
+++ b/README.md
@ -142,6 +142,7 @@ my-bookmark/
 ```
 "body-parser": bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理
 "connect-mongo": 用于将session存入MongoDB
+"cheerio": 用于后端的jQuery
 "cookie-parser": 处理每一个请求的cookie
 "crypto": 加密模块，主要用来加密用户的密码
 "debug": 这个好像没用到，看名字好像调试的。
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
  },
  "dependencies": {
    "body-parser": "~1.15.1",
+    "cheerio": "^1.0.0-rc.1",
    "connect-mongo": "^1.3.2",
    "cookie-parser": "~1.4.3",
    "crypto": "0.0.3",
--- a/public/css/style.css
+++ b/public/css/style.css
@ -144,7 +144,7 @@ img.operator {
 .urlSpan {
    word-wrap: break-word;
    word-break: break-all;
-    cursor:default;
+    cursor: default;
 }

 .ui.sortable.table thead th.forbid_sorted:hover {
@ -156,16 +156,24 @@ img.operator {
    border-radius: 0;
 }

-.js-p-info p{
-    margin-bottom:5px;
+.js-p-info p {
+    margin-bottom: 5px;
    font-size: 16px;
 }

-.note-content{
+.note-content {
    font: 15px "Lucida Grande", Helvetica, Arial, sans-serif;
-    white-space:pre-wrap;
-    white-space:-moz-pre-wrap;
-    white-space:-pre-wrap;
-    white-space:-o-pre-wrap;
-    word-wrap:break-word;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+.fontgreen {
+    color: RGB(33, 186, 69);
+}
+
+.fontred {
+    color: #F00;
 }
--- a/public/scripts/controllers/menus-controller.js
+++ b/public/scripts/controllers/menus-controller.js
@ -207,7 +207,7 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', '$window', '$time
                title: '操作提示',
                position: 'bottom center',
                variation: "very wide",
-                html: '<span>特别提示：如果功能不正常，请先尝试清除浏览器缓存！点击查看更新日志！<br/>1、在任意页面，按A键添加备忘录。<br/>2、在热门收藏页面，按R键随机查看热门收藏。<br/>3、在任意页面，按数字键切换菜单栏。<br/>4、在书签页面鼠标放在书签上，按C复制书签链接<br/>5、在书签页面鼠标放在书签上，按E编辑书签<br/>6、在书签页面鼠标放在书签上，按D删除书签<br/>7、在书签页面鼠标放在书签上，按I查看书签详情<br/>8、在任意页面，按INSERT做添加书签<br/>9、在任意页面，按ESC退出弹窗<br/></span>'
+                html: "<span><span class='fontred'>特别提示：对照更新日志，如果功能不正常，请先尝试清除浏览器缓存！<br/>点击该按钮即可查看更新日志！</span><br/>1、在任意页面，按A键添加备忘录。<br/>2、在热门收藏页面，按R键随机查看热门收藏。<br/>3、在任意页面，按数字键切换菜单栏。<br/>4、在书签页面鼠标放在书签上，按C复制书签链接<br/>5、在书签页面鼠标放在书签上，按E编辑书签<br/>6、在书签页面鼠标放在书签上，按D删除书签<br/>7、在书签页面鼠标放在书签上，按I查看书签详情<br/>8、在任意页面，按INSERT做添加书签<br/>9、在任意页面，按ESC退出弹窗<br/></span>"
            });
    }, 1000)

--- a/public/scripts/controllers/settings-controller.js
+++ b/public/scripts/controllers/settings-controller.js
@ -14,11 +14,30 @@ app.controller('settingsCtr', ['$scope', '$stateParams', '$filter', '$state', '$
    $scope.key = '';
    $scope.url = '';
    $scope.quickUrl = {};
+    $scope.updateLogs = [];
+    $scope.logsUrl = 'https://github.com/luchenqun/my-bookmark/commits/master';

+    $scope.getUpdateLog = function(url) {
+        console.log(url);
+        $scope.updateLogs = [];
+        bookmarkService.getUpdateLog({
+                url: url
+            })
+            .then((data) => {
+                $scope.updateLogs = data.updateLogs;
+                $scope.logsUrl = data.oldUrl;
+                console.log(data);
+            })
+            .catch((err) => {
+                toastr.error('获取更新日志失败。错误信息：' + JSON.stringify(err), "错误");
+            });
+    }
+    
    $scope.changeForm = function(index) {
        console.log("changeForm = ", index);
        $scope.form = $scope.form.map(() => false);
        $scope.form[index] = true;
+        $scope.updateLogs = [];

        if (index == 0 || index == 1 || index == 4) {
            $scope.loadShowStyle = true;
@ -53,6 +72,10 @@ app.controller('settingsCtr', ['$scope', '$stateParams', '$filter', '$state', '$
                    console.log('getTags err', err);
                });
        }
+
+        if (index == 5) {
+            $scope.getUpdateLog($scope.logsUrl);
+        }
    }

    $scope.changeForm($scope.form.indexOf(true)); // 马上调用一次
@ -170,6 +193,10 @@ app.controller('settingsCtr', ['$scope', '$stateParams', '$filter', '$state', '$
        saveQuickUrl();
    }

+    $scope.jumpCommit = function(url) {
+        $window.open(url, '_blank');
+    }
+
    function updateShowStyle(showStyle) {
        setTimeout(function() {
            if (showStyle) {
--- a/public/scripts/services/bookmark-service.js
+++ b/public/scripts/services/bookmark-service.js
@ -14,6 +14,19 @@ app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
                });
            return def.promise;
        },
+        getUpdateLog: function(params) {
+            var def = $q.defer();
+            $http.post('/api/getUpdateLog/', {
+                    params: params
+                })
+                .success(function(data) {
+                    def.resolve(data);
+                })
+                .error(function(data) {
+                    def.reject('getUpdateLog error');
+                });
+            return def.promise;
+        },
        login: function(params) {
            var def = $q.defer();
            $http.post('/api/login/', {
--- a/public/views/settings.html
+++ b/public/views/settings.html
@ -165,6 +165,22 @@
                    <span ng-repeat="(key, value) in forbidQuickKey">{{key}}：{{value}}<br/></span>
                </p>
                <div class="ui divider"></div>
+                <div class="ui form">
+                    <div class="inline fields">
+                        <div class="five wide field">
+                            <label style="min-width:55px;">快捷键：</label>
+                            <input type="text" placeholder="请按相应的快捷键" ng-model="key" ng-keypress="quickKey($event.key)">
+                        </div>
+                        <div class="nine wide field">
+                            <label style="min-width:66px;">网站地址：</label>
+                            <input type="text" placeholder="请输入你需要快捷打开的网站地址" ng-model="url">
+                        </div>
+                        <div class="two wide field">
+                            <div class="ui green button" ng-click="addQuickUrl()">确定</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ui divider"></div>
                <table class="ui selectable sortable celled table js-quick-url-table">
                    <thead>
                        <tr>
@ -183,38 +199,23 @@
                        </tr>
                    </tbody>
                </table>
-                <div class="ui divider"></div>
-                <div class="ui form">
-                    <div class="inline fields">
-                        <div class="five wide field">
-                            <label style="min-width:55px;">快捷键：</label>
-                            <input type="text" placeholder="请按相应的快捷键" ng-model="key" ng-keypress="quickKey($event.key)">
-                        </div>
-                        <div class="nine wide field">
-                            <label style="min-width:66px;">网站地址：</label>
-                            <input type="text" placeholder="请输入你需要快捷打开的网站地址" ng-model="url">
-                        </div>
-                        <div class="two wide field">
-                            <div class="ui green button" ng-click="addQuickUrl()">确定</div>
-                        </div>
-                    </div>
-                </div>
            </div>
            <div class="ui container js-p-info" ng-show="form[5]">
-                <h3 class="ui dividing header">更新日志</h3>
-                <div class="ui message">
-                  <div class="header">2017-06-16</div>
-                  <ul class="list">
-                    <li>修改书签操作页面选择分类的逻辑。由以前在下拉列表选分类，改为更直观地选标签。</li>
-                  </ul>
+                <!-- <h3 class="ui dividing header">更新日志</h3> -->
+                <div class="ui active inverted dimmer" ng-class="{active:updateLogs.length==0, disabled: updateLogs.length>0}">
+                    <div class="ui text loader">正在从Github获取提交日志(大概需要30s)。。。</div>
                </div>
-                <div class="ui message">
-                  <div class="header">2017-06-14</div>
-                  <ul class="list">
-                    <li>打开mybookmark.cn，默认跳转到分类页面。</li>
-                    <li>移除书签栏目的标签选项，将功能移到分类页面里面的分类定制。</li>
-                  </ul>
+                <div class="ui message" ng-repeat="updateLog in updateLogs">
+                    <div class="header">{{ updateLog.date }}</div>
+                    <ul class="list" style="cursor: default;">
+                        <li ng-repeat="log in updateLog.logs">
+                            <span title="点击可查看代码变化" ng-click="jumpCommit(log.href)">{{log.commit}}</span>
+                        </li>
+                    </ul>
                </div>
+                <button class="fluid ui button" ng-click='getUpdateLog(logsUrl)' ng-show="updateLogs.length>0">
+                    更早日志
+                </button>
            </div>
        </div>
    </div>
--- a/public/views/tags.html
+++ b/public/views/tags.html
@ -130,12 +130,23 @@
    </div>
    <div class="ui divider"></div>
    <div class="ui grid">
-        <div class="eight wide column" style="margin-top:10px;">
-            <i class="sort numeric descending large icon" ng-class="{green: order[0]}" ng-click="changeOrder(0)" title="按点击次数排序" style="margin-left:10px;"></i>
-            <i class="add to calendar large icon" ng-class="{green: order[1]}" ng-click="changeOrder(1)" title="按添加日期排序" style="margin-left:10px;"></i>
-            <i class="sort alphabet descending large icon" ng-class="{green: order[2]}" ng-click="changeOrder(2)" title="按最后点击时间排序" style="margin-left:10px;"></i>
+        <div class="five wide column" style="margin-top:10px;">
+            <div class="ui three column grid" style="cursor: default;">
+                <div class="column" ng-click="changeOrder(0)">
+                    <i class="sort numeric descending large icon" ng-class="{green: order[0]}" style="margin-bottom:4px;"></i>
+                    <span ng-class="{fontgreen: order[0]}" style="margin-left:-5px;">点击次数</span>
+                </div>
+                <div class="column" ng-click="changeOrder(1)">
+                    <i class="add to calendar large icon" ng-class="{green: order[1]}" style="margin-bottom:4px;"></i>
+                    <span ng-class="{fontgreen: order[1]}" style="margin-left:-5px;">添加日期</span>
+                </div>
+                <div class="column" ng-click="changeOrder(2)">
+                    <i class="sort alphabet descending large icon" ng-class="{green: order[2]}" style="margin-bottom:4px;"></i>
+                    <span ng-class="{fontgreen: order[2]}" style="margin-left:-5px;">最后点击</span>
+                </div>
+            </div>
        </div>
-        <div class="eight wide column">
+        <div class="eleven wide column">
            <pagination></pagination>
        </div>
    </div>
--- a/routes/api.js
+++ b/routes/api.js
@ -9,6 +9,7 @@ var multer = require('multer');
 var webshot = require('webshot');
 var fs = require('fs');
 var request = require('request');
+var cheerio = require('cheerio');

 var storage = multer.diskStorage({
    destination: function(req, file, cb) {
@ -1051,6 +1052,68 @@ api.post('/getArticle', function(req, res) {
    });
 })

+api.post('/getUpdateLog', function(req, res) {
+    console.log("getArticle username = ", req.session.username);
+    var params = req.body.params;
+    var defaultUrl = 'https://github.com/luchenqun/my-bookmark/commits/master'
+    var url = params.url || defaultUrl;
+
+    request(url, function(error, response, body) {
+        console.log("HotBookmarks request ", error, response && response.statusCode);
+        if (response && response.statusCode == 200) {
+            const $ = cheerio.load(body);
+            var data = [];
+            $('.commit-group-title').each(function() {
+                var updateLogs = {};
+
+                var dateMap = {
+                    'Jan': 1,
+                    'Feb': 2,
+                    'Mar': 3,
+                    'Apr': 4,
+                    'May': 5,
+                    'Jun': 6,
+                    'Jul': 7,
+                    'Aug': 8,
+                    'Sep': 9,
+                    'Oct': 10,
+                    'Nov': 11,
+                    'Dec': 12,
+                }
+                var date = $(this).text().replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, ' '); // 去除前后空格得到字符串 Commits on Jun 16, 2017;
+                var dateArray = date.replace(',', '').replace('Commits on ', '').split(' ');
+
+                updateLogs.date = dateArray[2] + '-' + (dateMap[dateArray[0]] || dateArray[0]) + '-' + dateArray[1];
+                updateLogs.logs = [];
+
+                $(this).next().children('li').each(function() {
+                    var $log = $(this).children('.table-list-cell').eq(1).children('p').children('a');
+                    var commit = $log.text()
+                    var href = 'https://github.com' + $log.attr('href');
+
+                    updateLogs.logs.push({
+                        commit: commit,
+                        href: href,
+                    })
+                })
+                data.push(updateLogs)
+            })
+
+            var oldUrl = $('.paginate-container .pagination a').attr('href');
+            if (oldUrl) {
+                oldUrl = 'https://github.com' + oldUrl;
+            }
+
+            res.json({
+                updateLogs: data,
+                oldUrl: oldUrl || defaultUrl
+            });
+        } else {
+            console.log("HotBookmarks request is error", error, response && response.statusCode);
+        }
+    });
+})
+
 api.checkSnapFaviconState = function() {
    db.getBookmarks()
        .then((bookmarks) => {
@ -1297,6 +1360,8 @@ api.getHotBookmarksByTimer = function() {
    }, timeout);
 }

+
+
 api.post('/addNote', function(req, res) {
    console.log("addNote username = ", req.session.username);
    if (!req.session.user) {
@ -1311,7 +1376,7 @@ api.post('/addNote', function(req, res) {
        .then((insertId) => {
            res.json({
                retCode: 0,
-                insertId:insertId,
+                insertId: insertId,
                msg: "添加备忘成功 ",
            })
            console.log('addNote insertId ', insertId)