AngularJS + Node.js + MongoDB開發(fā)的基于高德地圖位置的通訊錄
一、閑扯
有一天班長說了，同學(xué)們希望我開發(fā)一個可以共享位置的通訊錄，于是自己簡單設(shè)計了下功能。包括用戶角色、發(fā)表微博、共享位置等等。這次也是有點私心的，為了鍛煉最近看的angularjs，于是果斷選擇Node.js + MongoDB + angular.js的方案。當(dāng)然，開發(fā)Node.js的體會越來越深刻。記得，去年leader告訴我說盡量讓node的每一個服務(wù)只支撐一個業(yè)務(wù)功能，這樣才能更方便的維護。當(dāng)時特別想把一個Node服務(wù)做的特別強大?，F(xiàn)在看來leader的做法是對的，我更加傾向于把node服務(wù)功能單一化...
二、直接上干貨
數(shù)據(jù)庫服務(wù)部署在阿里云；靜態(tài)文件服務(wù)器采用的是Github page。
Github項目地址：https://github.com/vczero/OurTimes
線上體驗地址：http://vczero.github.io/tuban/main.html#/
沒圖說個球啊，上圖給大家看看2張截圖：
（1）首頁
（2）通訊錄
....更多去線上體驗...
三、項目
總項目： https://github.com/vczero/OurTimes
開發(fā)了所需要的服務(wù)：https://github.com/vczero/OurTimes/tree/master/server
開了web pc client: https://github.com/vczero/OurTimes/tree/master/client-web
開發(fā)了簡易的后臺管理系統(tǒng)：https://github.com/vczero/OurTimes/tree/master/client-admin
歡迎大家fork ，follow和共享代碼，一起構(gòu)建前端而努力。
四、附上web-pc端Angular的入口文件代碼
var app = angular.module('app', ['ui.router', 'ngCookies']);
var SERVER_BASE_URL = 'http://127.0.0.1:3000/';
//初始化配置
app.run(['$rootScope', function($rootScope) {
$rootScope.appName = '圖班網(wǎng)';
$rootScope.desc = '基于位置的通訊錄';
$rootScope.author = '鬼謠';
$rootScope._email = 'wlhmyit@126.com';
}]);
//調(diào)用的服務(wù)列表
app.constant('ServiceConfig', {
wei_content: SERVER_BASE_URL + 'wei/get',
wei_zan: SERVER_BASE_URL + 'wei/zan',
wei_comment: SERVER_BASE_URL + 'wei/comment',
wei_create: SERVER_BASE_URL + 'wei/create',
user_get: SERVER_BASE_URL + 'user/get',
user_login: SERVER_BASE_URL + 'user/login',
user_register: SERVER_BASE_URL + 'user/register',
user_common: SERVER_BASE_URL + 'user/getCommon',
user_ben: SERVER_BASE_URL + 'user/getBen',
user_self: SERVER_BASE_URL + 'user/getSelf',
user_common_update: SERVER_BASE_URL + 'user/updateCommon',
user_ben_update: SERVER_BASE_URL + 'user/updateBen',
user_ben_get_name: SERVER_BASE_URL + 'user/singleBen/name',
user_common_get_nickname: SERVER_BASE_URL + 'user/getCommon/name',
user_ben_get_realname: SERVER_BASE_URL + 'user/singleBen/name',
wei_get_token_page: SERVER_BASE_URL + 'wei/getByToken',
wei_delete: SERVER_BASE_URL + 'wei/delete',
user_update_password: SERVER_BASE_URL + 'user/updatePassword',
article_get: SERVER_BASE_URL + 'article/get',
article_detail: SERVER_BASE_URL + 'article/get/id',
amap_url: 'http://webapi.amap.com/maps?v=1.3&key=ad925c5003760094713775d64748d872&callback=init'
});
//JSON parse
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.transformRequest = [function(data) {
var obj = [];
for (var key in data) {
obj.push(key + '=' + data[key]);
}
return obj.join('&');
}];
}]);
//路由配置
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
/*URL路由*/
$urlRouterProvider.otherwise("/");
/*狀態(tài)配置*/
$stateProvider
//首頁
.state('index', {
url: '/',
views: {
'': {
templateUrl: 'views/index/index.html',
},
'header@index': {
templateUrl: 'views/header.html',
controller: 'HeaderController'
},
'footer@index': {
templateUrl: 'views/footer.html',
controller: ''
},
'weibo@index': {
templateUrl: 'views/index/weibo.html',
controller: 'WeiboController'
},
'article@index': {
templateUrl: 'views/index/article.html',
controller: 'ArticleController'
},
'post@index': {
templateUrl: 'views/index/post.html',
controller: 'PostWeiboController'
}
}
})
.state('login', {
url: '/login',
views: {
'': {
templateUrl: 'views/login/login.html',
controller: 'LoginController'
}
}
})
.state('register', {
url: '/register',
views: {
'': {
templateUrl: 'views/register/register.html',
controller: 'RegisterController'
}
}
})
.state('contacts', {
url: '/contacts',
views: {
'': {
templateUrl: 'views/contacts/contacts.html',
controller: ''
},
'header@contacts': {
templateUrl: 'views/header.html',
controller: 'HeaderController'
},
'userinfo@contacts': {
templateUrl: 'views/contacts/userinfo.html',
controller: 'UserInfoController'
},
'map@contacts': {
templateUrl: 'views/contacts/map.html',
controller: 'MapController'
},
'search@contacts': {
templateUrl: 'views/contacts/search.html',
controller: 'SearchUserController'
}
}
})
.state('ucenter', {
url: '/ucenter',
views: {
'': {
templateUrl: 'views/ucenter/ucenter.html',
controller: ''
},
'header@ucenter': {
templateUrl: 'views/header.html',
controller: 'HeaderController'
},
'userWeibo@ucenter': {
templateUrl: 'views/ucenter/weibo.html',
controller: 'UcWeiboController'
},
'userDetailInfo@ucenter': {
templateUrl: 'views/ucenter/user.html',
controller: 'UcUserController'
},
'footer@ucenter': {
templateUrl: 'views/footer.html',
controller: ''
}
}
})
.state('article', {
url: '/article/:id',
views: {
'': {
templateUrl: 'views/article/article.html',
controller: ''
},
'header@article': {
templateUrl: 'views/header.html',
controller: 'HeaderController'
},
'article_content@article': {
templateUrl: 'views/article/article_content.html',
controller: 'ArticleDetailController'
},
'footer@article': {
templateUrl: 'views/footer.html',
controller: ''
}
}
})
.state('article_index', {
url: '/article',
views: {
'': {
templateUrl: 'views/article/article.html',
controller: ''
},
'header@article_index': {
templateUrl: 'views/header.html',
controller: 'HeaderController'
},
'article_content@article_index': {
templateUrl: 'views/article/article_content.html',
controller: 'ArticleDetailController'
},
'footer@article_index': {
templateUrl: 'views/footer.html',
controller: ''
}
}
});
}]);
相關(guān)文章
這篇文章主要介紹了什么是Node.js,Node.js能做什么,Node.js的優(yōu)缺點,Node.js的例子等,需要的朋友可以參考下2014-06-06
Node.js實現(xiàn)mysql連接池使用事務(wù)自動回收連接的方法示例
這篇文章主要介紹了Node.js實現(xiàn)mysql連接池使用事務(wù)自動回收連接的方法,結(jié)合實例形式分析了node.js操作mysql連接池實現(xiàn)基于事務(wù)的連接回收操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
最近在寫nodejs項目，沒有發(fā)現(xiàn)合適或者特別好用的分頁插件，今天晚上自己寫了一個，分享給大家，也希望大家能夠拍磚!2014-06-06
這篇文章主要介紹了node解析修改nginx配置文件操作,結(jié)合實例形式分析了node.js使用nginx-conf解析修改nginx配置文件的相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
window10下node使用管理神器NVM安裝配置超詳細步驟
nvm全稱Node Version Manager是 Nodejs 版本管理器，它讓我們能方便的對 Nodejs 的版本進行切換，nvm 的官方版本只支持 Linux 和 Mac， Windows 用戶，可以用 nvm-windows，這篇文章主要介紹了window10下node使用管理神器NVM安裝配置超詳細步驟,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了Node.js使用對話框ngDialog的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本文主要介紹了NodeJs 包管理工具,主要包括npm,cnpm及yarn,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了VSCode如何調(diào)試Nodejs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
node.js 基于cheerio的爬蟲工具的實現(xiàn)（需要登錄權(quán)限的爬蟲工具）
這篇文章主要介紹了node.js 基于cheerio的爬蟲工具的實現(xiàn)（需要登錄權(quán)限的爬蟲工具） ,需要的朋友可以參考下2019-04-04
Node.js如何使用Diffie-Hellman密鑰交換算法詳解
Deffie-Hellman(簡稱 DH) 密鑰交換是最早的密鑰交換算法之一，它使得通信的雙方能在非安全的信道中安全的交換密鑰，用于加密后續(xù)的通信消息。下面這篇文章主要給大家介紹了關(guān)于Node.js如何使用DiffieHellman密鑰交換算法的相關(guān)資料，需要的朋友可以參考下。2017-09-09