后台从数据库获取数据

public/scripts/controllers/bookmarks-controller.js

@@ -2,6 +2,8 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkSe
     console.log("Hello bookmarksCtr...", $stateParams);
     $scope.bookmarks = []; // 书签数据
     $scope.showSearch = false; // 书签数据
+    $scope.showStyle = 'table'; // 显示风格'navigate', 'card', 'table'
+
     semanticInit();
 
     var params = {

public/scripts/controllers/menus-controller.js

@@ -44,25 +44,6 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
         title: '注册'
     }];
 
-    /**
-     * @func
-     * @desc 根据点击的菜单，更新选择的索引
-     * @param {number} index - 点击的索引
-     * @param {bool} login - 登陆标志
-     */
-    $scope.selectMenu = function(index, login) {
-        var msg = 'MenuCtr.';
-        if (login) {
-            $scope.selectLoginIndex = index;
-            msg += $scope.loginMenus[index].uiSref;
-        } else {
-            $scope.selectNotLoginIndex = index;
-            msg += $scope.notLoginMenus[index].uiSref;
-        }
-        console.log(msg);
-        pubSubService.publish(msg);
-    }
-
     /**
      * @func
      * @desc 点击搜索按钮搜索书签
@@ -89,9 +70,18 @@ app.controller('menuCtr', ['$scope', '$state', 'pubSubService', function($scope,
     }
 
     function semanticInit() {
-        // $('.ui.dropdown').dropdown();
+        setTimeout(() => {
-        $('.ui.dropdown.js-bookmark-dropdown').dropdown({
+            $('.ui.dropdown').dropdown({
-            maxSelections: 2,
+                action: 'nothing',
-        });
+            });
+            $('.ui.checkbox').checkbox();
+            $('.ui.checkbox.js-radio-navigate').checkbox('check');
+            $('.ui.menu a.item').on('click', function() {
+                $(this)
+                    .addClass('active')
+                    .siblings()
+                    .removeClass('active');
+            });
+        }, 100);
     }
 }]);

public/views/bookmarks.html

@@ -44,25 +44,30 @@
         <div class="ui button">搜索</div>
     </div>
 </div>
-<table class="ui celled table" ng-show="bookmarks.length > 0">
+
+<table class="ui celled table" ng-if="showStyle === 'table'">
     <thead>
         <tr>
-            <th>标题</th>
+            <th class="center aligned">标题</th>
+            <th>链接</th>
+            <th>点击次数</th>
             <th>创建日期</th>
             <th>最后点击日期</th>
-            <th>点击次数</th>
+            <th>分类</th>
-            <th>链接</th>
-            <th>标签</th>
         </tr>
     </thead>
     <tbody>
         <tr ng-repeat="bookmark in bookmarks">
-            <td>{{ bookmark.title }}</td>
+            <td class="center aligned"><a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a></td>
-            <td>{{ bookmark.create_date }}</td>
-            <td>{{ bookmark.click_latest_date }}</td>
-            <td>{{ bookmark.click_count }}</td>
             <td>{{ bookmark.url }}</td>
-            <td>{{ bookmark.tags }}</td>
+            <td>{{ bookmark.click_count }}</td>
+            <td>{{ bookmark.created_at }}</td>
+            <td>{{ bookmark.last_click }}</td>
+            <td>
+                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}">
+                    {{ tag.name }}
+                </div>
+            </td>
         </tr>
     </tbody>
     <tfoot>

public/views/edit.html

@@ -38,7 +38,7 @@
                 </div>
             </div>
             <div class="field">
-                <label>备忘</label>
+                <label>描述</label>
                 <textarea rows="2" placeholder="可以是网站的说明，也可以备忘一下账号密码什么的，就算公开你的链接，这个也只有自己能在详情里面看到"></textarea>
             </div>
             <div class="ui segment">

public/views/menus.html

@@ -1,33 +1,41 @@
 <div class="js-menu" ng-controller="menuCtr">
-    <div class="ui small menu js-login-in" ng-show="login">
+    <div class="ui menu js-login-in" ng-if="login">
-        <a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title }}
+        <a class="item" ng-class="{active:$index==selectLoginIndex}"  ui-sref="{{ menu.uiSref }}" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus">
-            <div class="ui inline labeled dropdown js-bookmark-dropdown" ng-if="$index==0">&nbsp;
+            <div>{{ menu.title }}</div>
+            <div class="ui floating dropdown icon js-bookmark-dropdown" ng-if="$index==0">
                 <i class="dropdown icon"></i>
                 <div class="menu">
                     <div class="header">显示方式</div>
                     <div class="divider"></div>
-                    <div class="item">导航</div>
+                    <div class="field item">
-                    <div class="item">表格</div>
+                        <div class="ui radio checkbox js-radio-navigate">
-                    <div class="item">卡片</div>
+                            <input type="radio" name="fruit">
+                            <label>导航</label>
+                        </div>
+                    </div>
+                    <div class="field item">
+                        <div class="ui radio checkbox js-radio-table">
+                            <input type="radio" name="fruit">
+                            <label>表格</label>
+                        </div>
+                    </div>
+                    <div class="field item">
+                        <div class="ui radio checkbox js-radio-card">
+                            <input type="radio" name="fruit">
+                            <label>卡片</label>
+                        </div>
+                    </div>
                     <div class="divider"></div>
-                    <div class="header">搜索方式</div>
+                    <div class="header">搜索选项</div>
-                    <div class="item">状态</div>
+                    <div class="item">
-                    <div class="item">取消</div>
+                        <div class="ui checkbox" ng-click="searchDetail()">
+                            <input type="checkbox" name="fun">
+                            <label>显示详细搜索</label>
+                        </div>
+                    </div>
                 </div>
             </div>
         </a>
-        <div class="ui buttons menu">
-            <div class="ui button">切换</div>
-            <div class="ui floating dropdown icon button">
-                <i class="dropdown icon"></i>
-                <div class="menu">
-                    <div class="item" data-value="drop">下拉</div>
-                    <div class="item" data-value="horizontal flip">水平翻转</div>
-                    <div class="item" data-value="fade up">渐隐</div>
-                    <div class="item" data-value="scale">规模</div>
-                </div>
-            </div>
-        </div>
         <div class="right menu">
             <div class="ui category right search item">
                 <div class="ui transparent icon input">
@@ -36,9 +44,9 @@
                 </div>
                 <div class="results"></div>
             </div>
-            <div class="item">
+            <!-- <div class="item">
                 <div class="ui button" ng-click="searchDetail()" ui-sref="bookmarks">详情搜索</div>
-            </div>
+            </div> -->
             <div class="item">
                 <div class="ui button" ng-click="showAddBookmarkMoadl()" ui-sref="bookmarks">添加书签</div>
             </div>
@@ -47,7 +55,7 @@
             </div>
         </div>
     </div>
-    <div class="ui small menu js-not-login-in" ng-hide="login">
+    <div class="ui small menu js-not-login-in" ng-if="!login">
         <a class="item" ng-class="{active:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-click="selectMenu($index, login)" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
         <div class="right menu">
             <div class="item">

routes/api.js

@@ -1,54 +1,69 @@
 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
+});
+client.connect();
 
 api.get('/bookmarks', function(req, res) {
     console.log('hello bookmarks', JSON.stringify(req.query));
+    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'";
 
-    var data = [{
+    client.query(sqlBookmarks, function(error, data1, fields) {
-        title: '谷歌',
+        if (error) {
-        description: '一个网站',
+            res.json({
-        create_date: '20161025',
+                error: "数据查询出错"
-        click_count: parseInt(Math.random() * 100),
+            });
-        click_latest_date: '20161025',
+        } else {
-        url: 'https://www.google.com.hk/',
+            var bookmark_ids = ''
-        tags: ['搜索', '常用']
+            data1.forEach(function(bookmark) {
-    }, {
+                bookmark_ids += "'" + bookmark.id + "',";
-        title: '百度',
+            })
-        description: '二个网站',
+            bookmark_ids = bookmark_ids.slice(0, bookmark_ids.length - 1);
-        create_date: '20161025',
+
-        click_count: parseInt(Math.random() * 100),
+            var sqlTagIdBookmarkId = "SELECT * FROM `tags_bookmarks` WHERE bookmark_id in(" + bookmark_ids + ")";
-        click_latest_date: '20161025',
+            client.query(sqlTagIdBookmarkId, function(error, data2, fields) {
-        click_count: parseInt(Math.random() * 100),
+                // console.log(data2);
-        url: 'https://www.baidu.com/',
+                if (error) {
-        tags: ['搜索', '常用']
+                    res.json({
-    }, {
+                        error: "数据查询出错"
-        title: '博客',
+                    });
-        description: '三个网站',
+                } else {
-        create_date: '20161025',
+                    client.query(sqlTags, function(error, data3, fields) {
-        click_count: parseInt(Math.random() * 100),
+                        // console.log(data3);
-        click_latest_date: '20161025',
+                        if (error) {
-        click_count: parseInt(Math.random() * 100),
+                            res.json({
-        url: 'http://luchenqun.com/',
+                                error: "数据查询出错"
-        tags: ['博文', '常用']
+                            });
-    }, {
+                        } else {
-        title: '腾讯',
+                            var data = [];
-        description: '四个网站',
+                            data1.forEach(function(bookmark) {
-        create_date: '20161025',
+                                var tags = [];
-        click_count: parseInt(Math.random() * 100),
+                                data2.forEach(function(bookmark_tag) {
-        click_latest_date: '20161025',
+                                    if (bookmark_tag.bookmark_id == bookmark.id) {
-        click_count: parseInt(Math.random() * 100),
+                                        data3.forEach(function(tag) {
-        url: 'http://www.qq.com/',
+                                            if (bookmark_tag.tag_id == tag.id) {
-        tags: ['新闻', '常用']
+                                                tags.push(tag)
-    }, {
+                                            }
-        title: '知乎',
+                                        })
-        description: '五个网站',
+                                    }
-        create_date: '20161025',
+                                });
-        click_count: parseInt(Math.random() * 100),
+                                bookmark.tags = tags;
-        click_latest_date: '20161025',
+                                data.push(bookmark);
-        click_count: parseInt(Math.random() * 100),
+                            })
-        url: 'http://www.zhihu.com/',
+                            res.json(data);
-        tags: ['问题', '常用']
+                        }
-    }]
+                    });
-    res.json(data);
+                }
+            });
+        }
+    });
 });
 
 api.get('/tags', function(req, res) {
@@ -56,5 +71,6 @@ api.get('/tags', function(req, res) {
     var data = ['搜索', '常用', '新闻', '博文', 'JavaScript']
     res.json(data);
 });
+// client.end();
 
 module.exports = api;

schema.sql

@@ -0,0 +1,79 @@
+-- 用户信息表
+drop table if exists users;
+CREATE TABLE `users` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,     -- id
+  `username` varchar(255) DEFAULT NULL,     -- 用户名
+  `password` varchar(255) DEFAULT NULL,     -- 密码
+  `email` varchar(255) DEFAULT NULL,        -- 邮箱
+  `created_at` datetime DEFAULT now(),      -- 创建时间
+  `last_login` datetime DEFAULT NULL,       -- 最后一次登录时间
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `username` (`username`),
+  UNIQUE KEY `email` (`email`)
+);
+
+-- 书签表
+drop table if exists bookmarks;
+CREATE TABLE `bookmarks` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,     -- id
+  `user_id` int(11) DEFAULT NULL,           -- 用户id
+  `title` varchar(255) DEFAULT NULL,        -- 标题
+  `description` varchar(255) DEFAULT NULL,  -- 描述
+  `url` text,                               -- 链接
+  `public` tinyint(4) DEFAULT '1',          -- 是否公开 1 公开，0 不公开
+  `click_count` smallint DEFAULT 1,         -- 总共点击次数
+  `created_at` datetime DEFAULT now(),      -- 创建时间
+  `last_click` datetime DEFAULT now(),      -- 最后一次点击时间
+  PRIMARY KEY (`id`),
+  KEY `userIdIdx` (`user_id`)
+);
+
+-- 书签分类表
+drop table if exists tags;
+CREATE TABLE `tags` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,     -- id
+  `user_id` int(11) NOT NULL,               -- 用户id
+  `name` varchar(32) NOT NULL,              -- 标签
+  PRIMARY KEY (`id`),
+  KEY `userIdIdx` (`user_id`)
+);
+
+-- 书签与分类关联表
+drop table if exists tags_bookmarks;
+CREATE TABLE `tags_bookmarks` (
+  `tag_id` int(11) NOT NULL,                -- 分类id
+  `bookmark_id` int(11) NOT NULL,           -- 书签id
+  PRIMARY KEY (`tag_id`, `bookmark_id`)
+);
+
+INSERT INTO `users` (`id`, `username`, `password`, `email`) VALUES ('1', 'luchenqun', '123456', 'luchenqun@qq.com');
+
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '常用');   -- 每一个注册用户，默认有个常用分类
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '搜索');
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '购物');
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '音乐');
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '问答');
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '博客');
+INSERT INTO `tags` (`user_id`, `name`) VALUES ('1', '招聘');
+
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '博客', '个人描述测试', 'http://luchenqun.com/', '888', '2016-01-26 14:52:00', '2016-02-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '谷歌', '谷歌描述测试', 'https://www.google.com.hk/', '111', '2016-02-26 14:52:00', '2016-03-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '百度', '百度描述测试', 'https://www.baidu.com/', '22', '2016-03-26 14:52:00', '2016-04-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '拉勾', '拉勾描述测试', 'http://www.lagou.com/', '33', '2016-05-26 14:52:00', '2016-05-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '喜马拉雅', '喜马拉雅描述测试', 'http://www.ximalaya.com/', '4', '2016-06-26 14:52:00', '2016-06-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', 'CSDN', 'CSDN描述测试', 'http://www.csdn.net/', '52', '2016-07-26 14:52:00', '2016-08-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '知乎', '知乎描述测试', 'http://www.zhihu.com/', '42', '2016-08-26 14:52:00', '2016-09-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '京东', '京东描述测试', 'http://www.jd.com/', '2', '2016-09-26 14:52:00', '2016-10-26 14:52:00');
+INSERT INTO `bookmarks` (`user_id`, `title`, `description`, `url`, `click_count`, `created_at`, `last_click`) VALUES ('1', '天猫', '天猫描述测试', 'http://www.tmall.com/', '534', '2016-10-26 14:52:00', '2016-11-26 14:52:00');
+
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('1', '1');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('1', '2');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('1', '3');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('2', '2');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('2', '3');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('3', '8');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('3', '9');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('4', '5');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('5', '7');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('6', '1');
+INSERT INTO `tags_bookmarks` (`tag_id`, `bookmark_id`) VALUES ('7', '4');