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

一、闲扯

有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能。包括用户角色、发表微博、共享位置等等。这次也是有点私心的,为了锻炼最近看的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)首页

(2)通讯录

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

三、项目

总项目: 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: ''
            }
        }
    });

}]);

时间: 2024-08-24 17:37:48

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

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

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

node.js回调函数之阻塞调用与非阻塞调用_node.js

首先,node.js作为javascript运行平台,它采用了事件驱动和异步编程的方式,通过事件注册和异步函数,开发人员可以提高资源利用率,服务器的性能也能得到改善.其次,对于前端人来说,node.js作为js的运行平台,我们可以通过编写系统级或者服务器端的javascript代码交给node.js来执行,让我们前端人也能作用于后台,相比之下,浏览器端的javascript代码在运行时会受到各种安全性的限制,对客户系统的操作有限,而node.js则是一个全面的后台运行时,为javascript提

Node.js包管理器Yarn的入门介绍与安装_node.js

前言 这两天大家有没有都被Yarn悄悄刷了屏,最近Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .为了跟上 Javascript 这股潮 流的脚步,大概的浅尝了一下这个自称是又快又可信赖又安全的包管理,所以写的内容不会很详细,更多的可能只是针对这个全新的包管理与 npm 的不同之处来对比.也可能有些地方写得不对,如果有的话,欢迎指正. 一.安装 首先当然是安装啦.跟 npm 这种被钦点而随 nodejs 一起被安装的包管理器不同, Yarn 需要自行手动安装

Node.js实用代码段之获取Buffer对象字节长度_node.js

我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.byteLength()方法,下面我们借助一个官方文档提供的例程向读者演示一下该方法的使用过程. 本例ch04.buffer-byteLength.js主要代码如下: /** * ch04.buffer-byteLength.js */ console.info("------Buffer.byteLe

Node.js中使用socket创建私聊和公聊聊天室_node.js

先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git

Node.js抓取中文网页乱码问题和解决方法_node.js

Node.js 抓取非 utf-8 的中文网页时会出现乱码问题,比如网易的首页编码是 gb2312,抓取时会出现乱码 复制代码 代码如下: var request = require('request')  var url = 'http://www.163.com' request(url, function (err, res, body) {      console.log(body) }) 可以使用 iconv-lite 来解决 安装 复制代码 代码如下: npm install ic

Node.js的Web模板引擎ejs的入门使用教程_node.js

Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用JS 调用的方法主要有两个: ejs.compile(str, options); // =

Node.js与PHP、Python的字符处理性能对比_node.js

测试用例分为用函数和类来进行一个大字符串的字符逐一读取. 测试代码 Node.js 函数 var fs = require("fs"); var content = fs.readFileSync("page.html", { encoding: "utf-8" }); function chars(content){ var length = content.length; var pos = 0; while(pos ++ < leng

使用node.js中的Buffer类处理二进制数据的方法_node.js

前言 在Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区.这篇文章就详细介绍了node.js中的Buffer类处理二进制数据的方法,下面话不多说,来看看详细的介绍. 创建Buffer对象 第一种:直接使用一个数组来初始化缓存区 var arr = [0,1,2] var buf = new Buffer(arr) console.log(buf) 执行效果: 第二种:直接使用一个字符串来初始化缓存区 var str = 'hello' var buf = n