liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前后端第一次打通，前端顺利拿到后端数据

This commit is contained in:
luchenqun 2016-10-18 16:04:15 +08:00
parent ad6a6525dc
commit 2136ecb870
14 changed files with 201 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -7,6 +7,7 @@ var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var api = require('./routes/api');
var app = express();
@ -22,6 +23,7 @@ app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', api);
app.use('/', routes);
app.use('/users', users);

7
package.json
View File

@ -3,8 +3,7 @@
"version": "0.0.0",
"private": true,
"scripts": {
"start": "supervisor ./bin/www",
"launch": "supervisor ./bin/www"
"start": "supervisor ./bin/www"
},
"dependencies": {
"body-parser": "~1.15.1",
@ -13,6 +12,8 @@
"ejs": "~2.4.1",
"express": "~4.13.4",
"morgan": "~1.7.0",
"serve-favicon": "~2.3.0"
"mysql": "^2.11.1",
"serve-favicon": "~2.3.0",
"supervisor": "^0.11.0"
}
}

106
public/index.html
View File

@ -1,59 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="bookmark">
<meta name="author" content="luchenqun">
<title>我的书签</title>
<link href="/css/externe/semantic.min.css " rel="stylesheet"/>
<link href="/css/style.css " rel="stylesheet"/>
<base href="/">
</head>
<body ng-app="bookmarkApp">
<div class="ui container ">
<div id="header">
<div class="wrap">
<div class="ui small menu js-logged-in">
<a class="item active" href="/mytags" id="btn-mytags">书签分类</a>
<a class="item" href="/" id="btn-addbookmark">增加书签</a>
<a class="item" href="/account" id="btn-account">设置</a>
<div class="right menu">
<div class="ui dropdown item">搜索选项
<i class="dropdown icon"></i>
<div class="menu">
<a class="item">自己</a>
<a class="item">全站</a>
</div>
</div>
<div class="ui category right search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="请输入书签的Url...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
<div class="item">
<div class="ui primary button">登出</div>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="bookmark">
<meta name="author" content="luchenqun">
<title>我的书签</title>
<link href="/css/externe/semantic.min.css " rel="stylesheet" />
<link href="/css/style.css " rel="stylesheet" />
<base href="/">
</head>
<body ng-app="bookmarkApp">
<div class="ui container ">
<div id="header">
<div class="wrap">
<div class="ui small menu js-logged-in">
<a class="item active" ui-sref="bookmarks">我的书签</a>
<a class="item" ui-sref="tags">书签分类</a>
<a class="item" ui-sref="advice">建议</a>
<a class="item" ui-sref="settings">设置</a>
<div class="right menu">
<div class="ui dropdown item">
<div class="text">搜索设置</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">自己书签</div>
<div class="item">全站书签</div>
</div>
</div>
<div class="ui category right search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="请输入书签的Url...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
<div class="item">
<div class="ui button">添加书签</div>
</div>
<div class="item">
<div class="ui button">退出</div>
</div>
</div>
<!-- <div class="ui horizontal list">
</div>
<!-- <div class="ui horizontal list">
<div class="item"><a href="/login" id="btn-login">登陆</a></div>
</div>
<a href="/" id="btn-home"><img src="/images/logo.png" alt="bookmarkly" /></a> -->
</div>
</div>
<div class="view-container">
<div ui-view></div>
</div>
<div class="foot"></div>
</div>
<script src="/scripts/externe/jquery-3.1.1.min.js"></script>
<script src="/scripts/externe/angular.min.js"></script>
<script src="/scripts/externe/angular-ui-router.min.js"></script>
<script src="/scripts/externe/semantic.min.js"></script>
<script src="/scripts/semantic-init.js"></script>
</body>
<div class="ui container" style="width:100%;height:20px"> </div>
<div class="ui container">
<div ui-view></div>
</div>
<div class="foot"></div>
</div>
<script src="/scripts/externe/jquery-3.1.1.min.js"></script>
<script src="/scripts/externe/angular.min.js"></script>
<script src="/scripts/externe/angular-ui-router.min.js"></script>
<script src="/scripts/app-angular.js"></script>
<script src="/scripts/services/bookmark-services.js"></script>
<script src="/scripts/controllers/bookmarks-controller.js"></script>
<script src="/scripts/externe/semantic.min.js"></script>
<script src="/scripts/semantic-init.js"></script>
</body>
</html>

30
public/scripts/app-angular.js Normal file
View File

@ -0,0 +1,30 @@
var app = angular.module('bookmarkApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('bookmarks', {
url:'/bookmarks',
templateUrl: '/views/bookmarks.html',
// controllerAs: 'bookmarksCtrl',
controller: 'bookmarksController'
})
.state('tags', {
url:'/tags',
templateUrl: '/views/tags.html',
})
.state('advice', {
url:'/advice',
templateUrl: '/views/advice.html',
})
.state('settings', {
url:'/settings',
templateUrl: '/views/settings.html',
})
.state('/', {
url:'/',
templateUrl: '/views/intro.html'
});
});

18
public/scripts/controllers/bookmarks-controller.js Normal file
View File

@ -0,0 +1,18 @@
app.controller('bookmarksController', ['$scope', '$filter', 'bookmarkService', function($scope, $filter, bookmarkService) {
'use strict';
// var todoList = this;
//
// // Retrieve data from mongodb, by angular service.
// var todos = todoList.todos = [];
$scope.bookmarks = []
bookmarkService.getBookmarks()
.then(function(data) {
console.log(data);
$scope.bookmarks = data;
},
function(errorMsg) {
console.log(errorMsg);
});
}]);

2
public/scripts/semantic-init.js
View File

@ -1 +1,3 @@
// 下拉菜单初始化
$('.ui.dropdown').dropdown();

31
public/scripts/services/bookmark-services.js Normal file
View File

@ -0,0 +1,31 @@
app.factory('bookmarkService', ['$http', '$q', function($http, $q){
'use strict';
// service interface
var service = {
getBookmarks: getBookmarks,
// addBookmark: addBookmark,
// delBookmark: delBookmark,
// editBookmark: editBookmark,
// register: register
};
// Return a promise object.
function getBookmarks(){
var def = $q.defer();
$http.get('/api/bookmarks')
.success(function(data){
def.resolve(data);
})
.error(function(data){
console.log('Error: ' + data);
def.reject('Failed to get todos');
});
return def.promise;
}
return service;
}]);

0
public/view/tag.html
View File

1
public/views/advice.html Normal file
View File

@ -0,0 +1 @@
<p> 这是建议界面 </p>

36
public/views/bookmarks.html Normal file
View File

@ -0,0 +1,36 @@
<table class="ui celled table">
<thead>
<tr>
<th>标题</th>
<th>描述</th>
<th>链接</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks">
<td>{{ bookmark.title }}</td>
<td>{{ bookmark.description }}</td>
<td>{{ bookmark.url }}</td>
<td>{{ bookmark.tags }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>

1
public/views/intro.html Normal file
View File

@ -0,0 +1 @@
<p> 这是书签的介绍 </p>

1
public/views/settings.html Normal file
View File

@ -0,0 +1 @@
<p> 账号设置页面 </p>

1
public/views/tags.html Normal file
View File

@ -0,0 +1 @@
<p> 书签分类页面 </p>

15
routes/api.js Normal file
View File

@ -0,0 +1,15 @@
var api = require('express').Router();
api.get('/bookmarks', function (req, res) {
var data = [
{title:'谷歌', description:'一个网站', url:'https://www.google.com.hk/', tags:['搜索','常用']},
{title:'百度', description:'二个网站', url:'https://www.baidu.com/', tags:['搜索','常用']},
{title:'博客', description:'三个网站', url:'http://luchenqun.com/', tags:['博文','常用']},
{title:'腾讯', description:'四个网站', url:'http://www.qq.com/', tags:['新闻','常用']},
{title:'知乎', description:'五个网站', url:'http://www.zhihu.com/', tags:['问题','常用']}
]
res.json(data);
});
module.exports = api;