AngularJS+Node的RESTful之基本实现

欢迎大家指导与讨论 : )

一、前言

  本文主要讲述RESTful在node端与AngularJS两端配合的基本实现方法,为了尽量做到大家易看易懂,因此文章也没有深入探讨(其实是小鹏我只学到目前这些 - -),只是谈到增删查改RESTFUL基本实现和相关知识点。如果文章中有什么错误或者不足,希望大家能够指出,共同进步。O(∩_∩)O

二、RESTful  

  二 . 1 概念

  那究竟什么是RESTful?它和传统的$http(Ajax)的传输方式有什么不同?以小鹏的愚见,我认为就是传输动作"主语"有所不同而已在传统的传输方式中,工具($http、Ajax)是传输动作执行者:" hey!哥们($http)!你那么有空,能不能帮我从对面楼的七楼(指定Url)拿(method: get)个快递(expressage)?"上面这句话用代码来"翻译"便是 $http({method:‘GET‘, url:‘http://localhost/seven‘})... 让我们以语文的角度来分析这段代码。主语是$http工具(功能的具体执行者),动作GET宾语是url里面指定的资源(也就是GET这个动作的接受者)。如果是以RESTful风格的传输动作呢?那么上面的这段代码会变成 var expressage = $resource(‘http://localhost/seven‘) (为资源指定url) expressage.query(function(){//callback}) 可以明显的看出,代码中的主语变成了"快递expressage"(资源本身),动词是query(相当于GET)。上面两种不同风格的代码有一样的效果,但是RESTful呢,是把动作的执行者变成了资源本身,以资源的角度执行不同的动作资源!资源!资源!

  二 . 2 动作类型

  以上面为例,具体动作有:expressage.query(资源查询),expressage.get(资源查询),expressage.save(资源保存),expressage.update(资源更新),expressage.remove(资源删除)。通过以资源(uri)为接口分别对应着后端的get、post、put、delete四种动作。简单来说就是(以$resource服务为基础,后文会谈到到这个服务),前端发出query或者get,后端就收到get请求;前端发出save,后端就收到post请求;前端发出update,后端就收到put请求;前端发出remove,后端就收到delete请求。

三、实验环境与项目dependecies

  本次实验使用的前端环境与插件有: AngularJS.js,ngResource.js。其中ngResource用于与支持RESTful后端的数据源进行交互,并创建我们所需要的资源($ bower install --save angular-resource)。数据库使用mongodb。后端环境与插件有:NodeJS,express(3.21.2),mongodb(0.9.9),mongoose(4.4.6),nconf(0.8.4)。其中mongoose是连接node中mongodb的神器,实验中的后端具体实现功能是由它来实现的

四、CRUD

  三 . 0 mongoose

  Note: 在这里过一过下文会用到的mongose的基本API,有不懂的大家最好再查一查mongoose的使用方法和相关知识点,特别是Model,Entity和Schema之间的关系。Model.find({})全部查询,Model.find({name:‘小鹏‘})条件查询,Model.save()保存,Model.update()更新,Model.remove()删除。

  同时,下面的操作均已事先连接好数据库,连接的方式、mongoose使用方法和相关知识点这里就不多说了。

  三 . 1 CRUD之查

    三 . 1 . 1 查——无参数类 

//---不带参数的查询---前端------------
var Users = $resource(‘/api/users‘);
Users.query(function(data){
    console.log(data)
}, function(err){
    console.log(err)}
)
//---不带参数的查询---后端------------
app.get(‘/api/users‘, function(req, res){
    return UserModel.find({}, function(err, users){
        if(!err){
            return res.send(users);
        }else{
            res.statusCode = 500;
            console.log(‘Get Error...‘)
            return res.send({error: ‘Server error‘})
        }
    })
});

    三 . 1 . 2 查——带参数类 

//---带参数的查询---前端------------
var User = $resource(‘/api/users/:Username‘, {
    Username: ‘@Username‘
});
User.get({
    Username: ‘hzp‘
    }, function(data){
        console.log(data)
    }, function(err){
        console.log(err)
})
//---带参数的查询---后端------------
app.get(‘/api/users/:Username‘, function(req, res){
    return UserModel.findByName(req.params.Username, function(err, user){
        if(!user){
            return res.send(‘找不到该用户‘)
        }else{
            return res.send({status: ‘OK‘, user: user})
        }
    })
});

  三 . 2 CRUD之增

//---增操作---前端------------
var User = $resource(‘api/users‘);
User.save({}, {
        name: ‘Ari‘,
        password: ‘123123‘
    }, function(data){
        console.log(data)
    }, function(err){
        console.log(err)
})
//---增操作---后端------------
app.post(‘/api/users‘, function(req, res){
    var newUser = new UserModel({
        name: req.body[‘name‘],
        password: req.body[‘password‘]
    })
    newUser.save(function(err){
            if(err){
                console.log("err " + err)
            }else if(err === null || err === undefined){
                console.log(‘Save!‘);
                return res.send(‘成功注册!‘)
            }
    })
});

  三 . 1 CRUD之改

//---更新操作---前端------------
var User = $resource(‘/api/users/:Username‘, {
           Username: ‘@name‘
    },{
        update:{
            method: ‘PUT‘
        }
})
User.update({}, {
        name: ‘hzp‘,
        password: ‘hhhhhh‘
    }, function(data){
        console.log(data)
    }, function(err){
        console.log(err)
})
//---更新操作---后端------------
app.put(‘/api/users/:name‘, function(req, res){
    UserModel.findByName(req.body[‘name‘], function(err, data){
        if(!data){
            res.statusCode = 404;
            return res.send({err: ‘Not Found‘})
        }else{
            var condition = {name: req.body[‘name‘]};
            var update = {$set: {password: req.body[‘password‘]}};
            var options = {upsert: true};
            UserModel.update(condition, update, options, function(err){
                if(err){
                    console.log(err)
                }else{
                    return res.send(‘更新成功!‘)
                }
            })
        }
    })
});

  三 . 1 CRUD之删

//---更新操作---前端------------
var User = $resource(‘/api/users/:name‘,{
    name: ‘@name‘
});
User.remove({}, {
    name: ‘HZP‘
    }, function(data){
            console.log(data)
    }, function(err){
        console.log(err)
})
//---更新操作---后端------------
app.delete(‘/api/users/:name‘, function(req, res){
    UserModel.findByName(req.body[‘name‘], function(err, data){
        if(data.length <= 0){
            res.statusCode = 404;
            return res.send({err: ‘Not Found‘})
        }else{
            var condition = {name: req.body[‘name‘]};
            UserModel.remove(condition, function(err){
                if(err){
                    console.log(err)
                }else{
                    return res.send(‘删除成功‘)
                }
            })
        }
    })
}); 

五、其它细节

  1 .  在使用mongoose编译出来的Model和数据库的表明之间有区别:表名多了一个‘s‘。 var UserModel = mongoose.model(‘usermessage‘, UserSchema); 此处编译过程用的是‘usermessage‘但是数据库中的名字是‘usermessages‘——多了一个‘s‘

  

时间: 2024-09-26 14:56:46

AngularJS+Node的RESTful之基本实现的相关文章

Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定点的定位以及附加信息的展示.这样我们的项目就更加完善了,从宏观上看到每个点,从微观上分析每个点的不同.这种方法往往在大数据可视化方面很有效果. Angularjs+node+Mysql实现地图上的多点标注原文地址:http://www.cnblogs.com/DonaHero/p/5815595.h

AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero)

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

[Express + Webstrom] Debug Node.js RESTful application

Using WebStrom can easily debug the Node applcation. For example, we have an Node+Express application. server.js: /** * Created by Answer1215 on 12/9/2014. */ 'use strict'; var expres = require('express'); var app = expres(); app.get('/', function(re

Angularjs+node+Mysql实现地图上的多点标注

注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github.com/zhangxy1035/Gould 一.项目介绍 近几年,在大数据的驱动下,数据可视化变的越来越重要,其中现在比较火的就是地理位置可视化,在这篇文章中,将使用node作为服务器,angularjs作为前台显示,mysql作为数据库,实现地图上的多点标注.系统架构建设简单,可复用性高. 在这里

AngularJS ——ngResource、RESTful APIs 使用

这篇文章里,用以下两个情景用例来解释: 保存/持久化 新的数据对象 更新存在的数据对象 代码片段包含了AngularJs代码和Spring MVC代码,以能够让你简单快速的上手. 想要$resource 服务工作,需要添加一段实际代码: 应用angular-resource.js文件,你可以使用Google Hosted Libraries来实现. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-r

[21]Web前端视频教程 从入门到精通 视频源码全 HTML JavaScript CSS Canvas AngularJS Node[56G]

视频试看链接:https://pan.baidu.com/s/1pLR02xl 淘宝链接:https://item.taobao.com/item.htm?spm=0.7095261.0.0.f0e8ec6vfxIDA&id=562022641289 总目录: 子文件目录1: 子文件目录2: 视频:

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

002.AngularJs调用Restful实现CRUD

本节我们主要给大家介绍AngularJs如何调用Restful,实现数据的CRUD. 主要用到的技术: 后端:ASP.NET WebApi + SQLServer2008 前端:AngularJs,Bootstrap3 主要用到的开发工具 后端:VisualStudio2013 + SQLServer2008 前端:WebStorm8 1.创建后端项目AngularJs_WebApi 1.1建立空解决方案名称AngularJs_WebApi 1.2 创建AngularJs_WebApi_Serv

Node.js开发入门—使用AngularJS内置服务

在上一篇,"AngularJS简单示例"中演示了一个非常简单的使用Angular的小demo,那篇已经太长,原本要介绍的一些内容只好单另开篇了.这些内容,就是如何使用Angular服务. 我们还是基于"AngularJS简单示例"中的示例来改造一下.新的示例,能从Node.js+Express构造的服务器上获取管理菜单.为了实现这个,需要做几部分改造: 服务器提供adminMenu的下载功能,需要修改app.js,处理路由 修改Angular实现的控制器x-cont