后台从数据库获取数据

2016-10-26 18:02:23 +08:00 · 2016-10-26 18:02:23 +08:00 · a6dfbc6d80
parent 2a6387761c
commit a6dfbc6d80
8 changed files with 204 additions and 104 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/scripts/controllers/bookmarks-controller.js
+++ b/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 = {
--- a/public/scripts/controllers/menus-controller.js
+++ b/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();
-        $('.ui.dropdown.js-bookmark-dropdown').dropdown({
-            maxSelections: 2,
+        setTimeout(() => {
+            $('.ui.dropdown').dropdown({
+                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);
    }
 }]);
--- a/public/views/bookmarks.html
+++ b/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>{{ bookmark.create_date }}</td>
-            <td>{{ bookmark.click_latest_date }}</td>
-            <td>{{ bookmark.click_count }}</td>
+            <td class="center aligned"><a href="{{ bookmark.url }}" target="_blank">{{ bookmark.title }}</a></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>
--- a/public/views/edit.html
+++ b/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">
--- a/public/views/menus.html
+++ b/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">
-        <a class="item" ng-class="{active:$index==selectLoginIndex}" ui-sref="{{ menu.uiSref }}" ng-click="selectMenu($index, login)" ng-repeat="menu in loginMenus">{{ menu.title }}
-            <div class="ui inline labeled dropdown js-bookmark-dropdown" ng-if="$index==0">&nbsp;
+    <div class="ui menu js-login-in" ng-if="login">
+        <a class="item" ng-class="{active:$index==selectLoginIndex}"  ui-sref="{{ menu.uiSref }}" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus">
+            <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="item">表格</div>
-                    <div class="item">卡片</div>
+                    <div class="field item">
+                        <div class="ui radio checkbox js-radio-navigate">
+                            <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="item">状态</div>
-                    <div class="item">取消</div>
+                    <div class="header">搜索选项</div>
+                    <div class="item">
+                        <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">
--- a/routes/api.js
+++ b/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 = [{
-        title: '谷歌',
-        description: '一个网站',
-        create_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        click_latest_date: '20161025',
-        url: 'https://www.google.com.hk/',
-        tags: ['搜索', '常用']
-    }, {
-        title: '百度',
-        description: '二个网站',
-        create_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        click_latest_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        url: 'https://www.baidu.com/',
-        tags: ['搜索', '常用']
-    }, {
-        title: '博客',
-        description: '三个网站',
-        create_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        click_latest_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        url: 'http://luchenqun.com/',
-        tags: ['博文', '常用']
-    }, {
-        title: '腾讯',
-        description: '四个网站',
-        create_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        click_latest_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        url: 'http://www.qq.com/',
-        tags: ['新闻', '常用']
-    }, {
-        title: '知乎',
-        description: '五个网站',
-        create_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        click_latest_date: '20161025',
-        click_count: parseInt(Math.random() * 100),
-        url: 'http://www.zhihu.com/',
-        tags: ['问题', '常用']
-    }]
+    client.query(sqlBookmarks, function(error, data1, fields) {
+        if (error) {
+            res.json({
+                error: "数据查询出错"
+            });
+        } else {
+            var bookmark_ids = ''
+            data1.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) {
+                // console.log(data2);
+                if (error) {
+                    res.json({
+                        error: "数据查询出错"
+                    });
+                } else {
+                    client.query(sqlTags, function(error, data3, fields) {
+                        // console.log(data3);
+                        if (error) {
+                            res.json({
+                                error: "数据查询出错"
+                            });
+                        } else {
+                            var data = [];
+                            data1.forEach(function(bookmark) {
+                                var tags = [];
+                                data2.forEach(function(bookmark_tag) {
+                                    if (bookmark_tag.bookmark_id == bookmark.id) {
+                                        data3.forEach(function(tag) {
+                                            if (bookmark_tag.tag_id == tag.id) {
+                                                tags.push(tag)
+                                            }
+                                        })
+                                    }
+                                });
+                                bookmark.tags = tags;
+                                data.push(bookmark);
+                            })
                            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;
--- a/schema.sql
+++ b/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');