• 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') (为资源指定urlexpressage.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'

      

  • 相关阅读:
    ZJOI 2019 划水记
    【博弈论】浅谈泛Nim游戏
    HZNU ACM一日游 2019.3.17 【2,4,6-三硝基甲苯(TNT)】
    BZOJ 1008 越狱 组合数学
    BZOJ 1036 树的统计Count 树链剖分模板题
    BZOJ 1012 最大数maxnumber 线段树
    BZOJ 1001 狼抓兔子 平面图的最小割
    SGU---107 水题
    欧拉回路模板
    hdu-3397 Sequence operation 线段树多种标记
  • 原文地址:https://www.cnblogs.com/BestMePeng/p/AngularJS_RESTful.html
Copyright © 2020-2023  润新知