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

一、闲扯

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

}]);

(0)

相关推荐

  • 了不起的node.js读书笔记之mongodb数据库交互

    这周的学习主要是nodejs的数据库交互上,并使用jade模板一起做了一个用户验证的网站.主要是遇到了一下几个问题. 1.mongodb版本过低 npm ERR! Not compatible with your operating system or architecture: mongodb@0.9.9 0.9.9只支持linux,darwin,freebsd这几个系统,最新版本已支持wins. 2.nodejs进行insert操作后:无法读取结果 复制代码 代码如下: app.post('

  • Node.js中使用mongoskin操作mongoDB实例

    一.废话 从13年1月份接触mongodb进行开发,开发了旅游标签服务.微博标签检索系统.地图服务.web APP服务...使用MongoDB的场景从.NET.JAVA环境转到了node.js平台.越发觉Node.js和mongodb结合感觉的很好.感觉mongodb和node.js是天生的一对.的确,mongodb的客户端是JS的解析引擎.因此,选择mongodb和node.js做产品原型也是很nice的选择.网上,遇到网友询问mongodb的开发,选择哪个driver最好,以前一直是使用原生

  • node.js操作mongoDB数据库示例分享

    连接数据库 复制代码 代码如下: var mongo=require("mongodb");  var host="localhost";  var port=mongo.Connection.DEFAULT_PORT;  var server=new mongo.Server(host,port,{auto_reconnect:true});//创建数据库所在的服务器服务器  var db=new mongo.Db("node-mongo-example

  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Express, Jade, Mongodb服务器>,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更确切说应该是更符合PHP.ASP程序员的使用习惯.好了,废话不多说,直接开始教程. 第1部分 – 15分钟安装 如果你真的是从零开始学,那就花点时间先把环境搭建起来吧.这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的. 第

  • node.js操作mongodb简单示例分享

    前两篇文章我们介绍了nodejs操作redis和MySQL,下面简要测试一下nodejs操作mongodb: 首先安装nodejs mongodb npm install mongodb 代码 var mongodb = require('mongodb'); var server = new mongodb.Server('localhost', 27017, {auto_reconnect:true}); var db = new mongodb.Db('mydb', server, {sa

  • node.js连接mongoDB数据库 快速搭建自己的web服务

    一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二.安装node.js 接触过后端开发的人都知道,首先要安装服务.作为新手,肯定是选择最简单的可视化安装了(傻瓜式下一步,其它的方式等熟悉相关操作后自然就会了的),通过官网http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下载电脑适配的安装包(这个是windo

  • Node.js和MongoDB实现简单日志分析系统

    在最近的项目中,为了便于分析把项目的日志都存成了JSON格式.之前日志直接存在了文件中,而MongoDB适时闯入了我的视线,于是就把log存进了MongoDB中.log只存起来是没有意义的,最关键的是要从日志中发现业务的趋势.系统的性能漏洞等.之前有一个用Java写的分析模块,运行在Tomcat下.实现相当的重量级,添加一个新指标的流程也比较繁琐,而且由于NFS的原因还导致分析失败.一直想改写,最初想用Ruby On Rails,可是一直没有时间学习和开发(在找借口啊!).在杭州QCon 201

  • 安装使用Mongoose配合Node.js操作MongoDB的基础教程

    安装mongoose 使用express准备一个TestMongoDB项目,命令序列如下: express TestMongoDB cd TestMongoDB npm install 执行完上面的命令后,使用下面的命令安装mongoose: npm install mongoose --save 这个命令会安装mongoose并将其作为项目的依赖,而mongoose依赖的MongoDB driver以及regexp等等模块也会被自动安装. 实例 使用mongoose可以新建数据库.新建集合.对

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

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

  • Linux虚拟机中node.js之开发环境搭建

    先说下nodejs这个哦,有人以为它是一种语言,其实不是,它是一个平台.下面来说下本次的话题:Vmware虚拟机node.js之开发环境搭建 一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这里使用Vmware. 安装好Vmware后,点击新建虚拟机,选择稍后安装操作系统,然后进行配置.虚拟机设置如下: { 客户机操作系统:其他: 版本:其他64位

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • Node.js Mongodb 密码特殊字符 @的解决方法

    在去年的 DB 勒索事件之后, 不少的同学开始加强 Mongodb 的安全性, 其中一种办法就是设置复杂的密码. 那么问题来了, 如果设置的密码里包含一些如 "@", ":" 一样的特殊字符怎么办? mongodb://username:password@host:port/db 这种情况可能使得你的 Mongodb 连接串不能被正常解析, 并且完全有可能出现. 烦人的地方在于: 1.使用 "" 双引号将 password 包起来没有用 2,使用

  • 微信小程序基于高德地图API实现天气组件(动态效果)

    ​在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主

  • Android基于高德地图完全自定义Marker的实现方法

    前言 相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多说,先来看看最终效果: 实现思路: 先来看看高德官方提供的设置Marker图标的方法: 我们可以看到setIcon()方法,里面的参数BitmapDescriptor就是我们最终需要的东西.那么到底该如何得到这个BitmapDescriptor对象呢,其实很简单,该对象可以通过BitmapDescr

  • 微信小程序基于高德地图查找位置并显示文字

    这篇文章主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.根据经纬度在 地图上查找定位 var key = app.globalData.amapKey; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../assets/marker_checked.png"

  • Android基于高德地图poi的仿微信获取位置功能实例代码

    1.打开页面自动定位,同时搜索周边所有poi 2.点击搜索按钮,输入关键子,获取关键字搜索结果 3.选取listview中的一项即可定位到该位置,或者获取任何消息 4.文件类 1.MapActivity public class MapActivity extends Activity implements PoiSearch.OnPoiSearchListener { private MapView mMapView = null; private AMap aMap; private MyL

  • Android开发Compose集成高德地图实例

    目录 正文 高德地图官网开发者建议 初始化MapView并添加到AndroidView里面 MapView增加一个管理地图生命周期的扩展 给MapView添加生命周期观察者 添加MapView的生命周期控制 正文 Compose中我们应该怎么使用地图呢?像之前我们在xml里面创建MapView,都是在Activity里面,管理MapView生命周期,和其他的监听器,Compose里面怎么搞? 下面我们以高德地图为例,在Compose中创建地图MapView,然后用AndroidView添加Map

  • 利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

随机推荐