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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现Adapter模式实例代码
2018/02/09 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
对Django url的几种使用方式详解
2019/08/06 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
django修改models重建数据库的操作
2020/03/31 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python中的With语句的使用及原理
2020/07/29 Python
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
运动会演讲稿50字
2014/08/25 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
民事答辩状范本
2015/05/21 职场文书
python编写五子棋游戏
2021/05/25 Python