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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
在Python中处理XML的教程
2015/04/29 Python
Python 中的 else详解
2016/04/23 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
浅谈django channels 路由误导
2020/05/28 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
可靠的数据流传输TCP
2016/03/15 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
爱的承诺书
2015/01/20 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
小学校园广播稿
2015/08/18 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫