大概完成了标签导航的页面
This commit is contained in:
luchenqun
parent
91f4fef92f
commit
38d80e3a38
|
|
@ -1,8 +1,25 @@
|
|||
body {
|
||||
padding: 50px;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
padding: 50px;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00B7FF;
|
||||
.div-hover {
|
||||
background:#F5F5F5;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.img-fixed-size{
|
||||
width:16px;
|
||||
height:16px;
|
||||
}
|
||||
|
||||
.js-navigate-bookmark{
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
-o-text-overflow:ellipsis;
|
||||
overflow: hidden;
|
||||
color:#212121;
|
||||
}
|
||||
.js-navigate-bookmark a{
|
||||
color:#212121;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,27 @@
|
|||
app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkService', 'pubSubService', function($scope, $stateParams, $filter, bookmarkService, pubSubService) {
|
||||
app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', '$window', 'bookmarkService', 'pubSubService', function($scope, $stateParams, $filter, $window, bookmarkService, pubSubService) {
|
||||
console.log("Hello bookmarksCtr...", $stateParams);
|
||||
$scope.bookmarks = []; // 书签数据
|
||||
$scope.showSearch = false; // 书签数据
|
||||
$scope.showStyle = 'table'; // 显示风格'navigate', 'card', 'table'
|
||||
$scope.test = [{
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}, {
|
||||
a: 1
|
||||
}];
|
||||
|
||||
$scope.showStyle = 'navigate'; // 显示风格'navigate', 'card', 'table'
|
||||
semanticInit();
|
||||
|
||||
var params = {
|
||||
s: 111,
|
||||
b: 222,
|
||||
i: 'lcq'
|
||||
show: $scope.showStyle,
|
||||
}
|
||||
getBookmarks(params);
|
||||
$scope.jumpToUrl = function(url) {
|
||||
console.log(url);
|
||||
$window.open(url, '_blank');
|
||||
}
|
||||
|
||||
pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, data) {
|
||||
console.log('subscribe MenuCtr.bookmarks', data);
|
||||
// $scope.showSearch = (Math.random() >= 0.5);
|
||||
// if ($scope.showSearch) {
|
||||
// setTimeout(() => {
|
||||
// semanticInit();
|
||||
// }, 100);
|
||||
//
|
||||
// }
|
||||
getBookmarks(data);
|
||||
pubSubService.subscribe('MenuCtr.bookmarks', $scope, function(event, params) {
|
||||
console.log('subscribe MenuCtr.bookmarks', params);
|
||||
getBookmarks(params);
|
||||
});
|
||||
|
||||
pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, data) {
|
||||
console.log('subscribe MenuCtr.searchBookmarks', data);
|
||||
getBookmarks(data);
|
||||
pubSubService.subscribe('MenuCtr.searchBookmarks', $scope, function(event, params) {
|
||||
console.log('subscribe MenuCtr.searchBookmarks', params);
|
||||
getBookmarks(params);
|
||||
});
|
||||
|
||||
function getBookmarks(params) {
|
||||
|
|
@ -64,32 +37,41 @@ app.controller('bookmarksCtr', ['$scope', '$stateParams', '$filter', 'bookmarkSe
|
|||
}
|
||||
|
||||
function semanticInit() {
|
||||
$('.ui.dropdown').dropdown();
|
||||
$('.ui.calendar.js-date-begin').calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth() + 1;
|
||||
var year = date.getFullYear();
|
||||
return year + '/' + month + '/' + day;
|
||||
}
|
||||
},
|
||||
endCalendar: $('.ui.calendar.js-date-end')
|
||||
});
|
||||
$('.ui.calendar.js-date-end').calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth() + 1;
|
||||
var year = date.getFullYear();
|
||||
return year + '/' + month + '/' + day;
|
||||
}
|
||||
},
|
||||
startCalendar: $('.ui.calendar.js-date-begin')
|
||||
});
|
||||
setTimeout(() => {
|
||||
$('.ui.dropdown').dropdown();
|
||||
$('.ui.calendar.js-date-begin').calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth() + 1;
|
||||
var year = date.getFullYear();
|
||||
return year + '/' + month + '/' + day;
|
||||
}
|
||||
},
|
||||
endCalendar: $('.ui.calendar.js-date-end')
|
||||
});
|
||||
$('.ui.calendar.js-date-end').calendar({
|
||||
type: 'date',
|
||||
formatter: {
|
||||
date: function(date, settings) {
|
||||
if (!date) return '';
|
||||
var day = date.getDate();
|
||||
var month = date.getMonth() + 1;
|
||||
var year = date.getFullYear();
|
||||
return year + '/' + month + '/' + day;
|
||||
}
|
||||
},
|
||||
startCalendar: $('.ui.calendar.js-date-begin')
|
||||
});
|
||||
|
||||
$('.js-navigate-bookmark').hover(function() {
|
||||
$(this).addClass('div-hover');
|
||||
}, function() {
|
||||
//鼠标离开时移除divOver样式
|
||||
$(this).removeClass('div-hover');
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,22 +1,37 @@
|
|||
<div class="ui segment">
|
||||
<div class="ui grid">
|
||||
<div class="row" ng-repeat="ss in test">
|
||||
<div class="ui segment" ng-if="showStyle === 'navigate'">
|
||||
<div class="ui internally grid">
|
||||
<div class="row" ng-repeat="tag in bookmarks">
|
||||
<div class="one wide column">
|
||||
ssssss
|
||||
<span style="color:#0aa770;">{{ tag.name }}</span>
|
||||
</div>
|
||||
<div class="fifteen wide column">
|
||||
<div class="ui cards">
|
||||
<div class="card" ng-repeat="ss in test">
|
||||
<div class="content">
|
||||
<div class="header">Elliot Fu</div>
|
||||
<div class="meta">Friend</div>
|
||||
</div>
|
||||
<div class="fourteen wide column">
|
||||
<div class="ui grid container">
|
||||
<div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
|
||||
<img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
|
||||
<span>{{ bookmark.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui segment" ng-if="false">
|
||||
<div class="ui raised" ng-repeat="tag in bookmarks">
|
||||
<!-- <a class="ui orange ribbon label" style="margin-bottom:20px">{{ tag.name }}</a> <span></span> -->
|
||||
<div class="ui grid container">
|
||||
<div class="two wide column">
|
||||
<i class="bookmark icon"></i><span>{{ tag.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="two wide column js-navigate-bookmark" ng-repeat="bookmark in tag.bookmarks" ng-click="jumpToUrl(bookmark.url)">
|
||||
<img class="ui ui middle aligned tiny image" src="http://api.byi.pw/favicon/?url={{ bookmark.url }}" style="width:16px;height:16px">
|
||||
<span>{{ bookmark.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui small menu js-search-detail" ng-if="showSearch">
|
||||
<div class="ui dropdown item">
|
||||
<div class="text">搜索范围</div>
|
||||
|
|
@ -113,16 +128,3 @@
|
|||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
ght chevron icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
/a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
|
|
|||
149
routes/api.js
149
routes/api.js
|
|
@ -1,77 +1,106 @@
|
|||
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
|
||||
// });
|
||||
var client = mysql.createConnection({
|
||||
host: '127.0.0.1',
|
||||
user: 'lcq',
|
||||
password: '123456',
|
||||
host: '172.24.13.5',
|
||||
user: 'root',
|
||||
password: 'root123',
|
||||
database: 'mybookmarks',
|
||||
multipleStatements: true,
|
||||
port: 3306
|
||||
});
|
||||
// var client = mysql.createConnection({
|
||||
// host: '127.0.0.1',
|
||||
// user: 'lcq',
|
||||
// password: '123456',
|
||||
// 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'";
|
||||
|
||||
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);
|
||||
}
|
||||
if (req.query.show === 'navigate') {
|
||||
var sql = "SELECT t.id as tag_id, t.name as tag_name, b.* FROM `tags` as t LEFT OUTER JOIN tags_bookmarks as tb ON t.id = tb.tag_id LEFT OUTER JOIN bookmarks as b ON tb.bookmark_id = b.id ORDER BY t.id ASC, b.click_count DESC";
|
||||
client.query(sql, function(error, result, fields) {
|
||||
var data = [];
|
||||
var tag = {
|
||||
id: result && result[0] && result[0].tag_id,
|
||||
name: result && result[0] && result[0].tag_name,
|
||||
bookmarks: []
|
||||
};
|
||||
result.forEach(function(bookmark) {
|
||||
if (tag.id !== bookmark.tag_id) {
|
||||
data.push({
|
||||
id: tag.id,
|
||||
name: tag.name,
|
||||
bookmarks: tag.bookmarks
|
||||
});
|
||||
tag.id = bookmark.tag_id;
|
||||
tag.name = bookmark.tag_name;
|
||||
tag.bookmarks = [];
|
||||
}
|
||||
tag.bookmarks.push(bookmark);
|
||||
});
|
||||
}
|
||||
});
|
||||
if (result && result.length > 0) {
|
||||
data.push(tag);
|
||||
}
|
||||
res.json(data);
|
||||
})
|
||||
} else {
|
||||
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'";
|
||||
|
||||
client.query(sqlBookmarks, function(error, result1, fields) {
|
||||
if (error) {
|
||||
res.json({
|
||||
error: "数据查询出错"
|
||||
});
|
||||
} else {
|
||||
var bookmark_ids = ''
|
||||
result1.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, result2, fields) {
|
||||
// console.log(result2);
|
||||
if (error) {
|
||||
res.json({
|
||||
error: "数据查询出错"
|
||||
});
|
||||
} else {
|
||||
client.query(sqlTags, function(error, result3, fields) {
|
||||
// console.log(result3);
|
||||
if (error) {
|
||||
res.json({
|
||||
error: "数据查询出错"
|
||||
});
|
||||
} else {
|
||||
var data = [];
|
||||
result1.forEach(function(bookmark) {
|
||||
var tags = [];
|
||||
result2.forEach(function(bookmark_tag) {
|
||||
if (bookmark_tag.bookmark_id == bookmark.id) {
|
||||
result3.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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue