AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录


Posted in Javascript onJanuary 02, 2015

一、闲扯

有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能。包括用户角色、发表微博、共享位置等等。这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案。当然,开发Node.js的体会越来越深刻。记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护。当时特别想把一个Node服务做的特别强大。现在看来leader的做法是对的,我更加倾向于把node服务功能单一化...

二、直接上干货

数据库服务部署在阿里云;静态文件服务器采用的是Github page。

Github项目地址:https://github.com/vczero/OurTimes

线上体验地址:http://vczero.github.io/tuban/main.html#/

没图说个球啊,上图给大家看看2张截图:

(1)首页

AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

(2)通讯录

AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

 ....更多去线上体验...

三、项目

总项目: https://github.com/vczero/OurTimes

开发了所需要的服务:https://github.com/vczero/OurTimes/tree/master/server

开了web pc client: https://github.com/vczero/OurTimes/tree/master/client-web

开发了简易的后台管理系统:https://github.com/vczero/OurTimes/tree/master/client-admin

欢迎大家fork ,follow和共享代码,一起构建前端而努力。

四、附上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 = '图班网';

    $rootScope.desc = '基于位置的通讯录';

    $rootScope.author = '鬼谣';

    $rootScope._email = 'wlhmyit@126.com';

}]);
//调用的服务列表

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("/");

    /*状态配置*/

    $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: ''

            }

        }

    });
}]);
Javascript 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript白色简洁计算器
May 04 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
javascript制作的cookie封装及使用指南
Jan 02 #Javascript
分享一则javascript 调试技巧
Jan 02 #Javascript
javascript实现无限级select联动菜单
Jan 02 #Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 #Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 #Javascript
javascript使用smipleChart实现简单图表
Jan 02 #Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 #Javascript
You might like
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
在Python中使用模块的教程
2015/04/27 Python
Python 异常处理的实例详解
2017/09/11 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python excel转换csv代码实例
2019/08/26 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
服务整改报告
2014/11/06 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js