• REST架构网站改写:前端MVC Angular.js,Web框架 Express.js, 数据库 MongoDB


      Coenraets分享了自己开发的一个Single Page Restful网站(http://coenraets.org/blog/2012/10/nodecellar-sample-application-with-backbone-js-twitter-bootstrap-node-js-express-and-mongodb)。

      他利用多种不同的前后端技术改写了这个项目,大致有以下这些:

      CSS库 - Bootstrap;

      前端MVC - Backbone.js,Angular.js;

      Web框架 - Express.js(Node.js)、PHP、Java ;

      数据库 - MongoDB、MySQL。

      其中,我最感兴趣Angular + Express + MongoDB的组合,Coenraets恰好没有实现;再加之Angular新版本改进颇大,尤其是Coenraets的实现没有使用angular.modular,所以我做了些改写,核心代码如下。

      Express Server部分:监听和响应客户端HTTP请求。

    1 app.get('/wines', wine.findAll);
    2 app.get('/wines/:id', wine.findById); //retrieve
    3 app.post('/wines', wine.addWine);  //create
    4 app.put('/wines/:id', wine.updateWine);  //update
    5 app.delete('/wines/:id', wine.deleteWine);  //delete

      前端MVC架构:响应用户请求,完成大部分UI逻辑

      controller.js

     1 angular.module('controller', ['service']).
     2     config(function($routeProvider) {
     3         $routeProvider.when('/wines', {templateUrl:'tpl/welcome.html'}).
     4             when('/addWine',{templateUrl:'tpl/wine-details.html', controller:AddWineCtrl}).
     5             when('/wines/:wineId', {templateUrl:'tpl/wine-details.html', controller:WineDetailCtrl}).
     6             otherwise({redirectTo:'/wines'});
     7     });
     8 
     9 function WineListCtrl($scope, Wine) {
    10     Wine.query(function(wines) {
    11         $scope.wines = wines;
    12     });
    13 }
    14 
    15 function AddWineCtrl($scope, $location,  Wine) {
    16     // POST /wines
    17     $scope.saveWine = function() {
    18         Wine.save($scope.wine, function() {
    19             $location.path("/wines");
    20         });
    21     };
    22 }
    23 
    24 function WineDetailCtrl($scope, $location, $routeParams, Wine) {
    25      
    27     // GET /wines/id
    28     Wine.get({wineId: $routeParams.wineId}, function(wine){
    29         $scope.wine = wine;
    30     });
    31 
    32     // PUT /wines/id
    33     $scope.saveWine = function () {
    34         Wine.update({wineId: $routeParams.wineId},
    35             $scope.wine, function() {
    36             $location.path("/wines");
    37         });
    38     };
    39 
    40     //DELETE /wines/id
    41     $scope.deleteWine = function () {
    42         Wine.delete({wineId: $routeParams.wineId}, function() {
    43             $location.path("/wines");
    44          });
    45     };
    46 }

      service.js

    1 angular.module('service', ['ngResource']).
    2     factory('Wine', function($resource) {
    3        return $resource('/wines/:wineId', {}, {
    4            update: {method:'PUT'}
    5        });
    6     });

      整个项目前后端完全隔离,通过Restful协议通信;Express框架在Node.js中的地位类似于Django之于Python或Rails之于Ruby,新版Myspace是利用它开发的;Angular.js能大幅度减轻前端MVC工作量,直接进行DOM操纵而无需jQuery。

  • 相关阅读:
    python列表
    OSS对象存储的文件上传、解冻、下载与查看
    常用压缩命令
    SWAP
    K8S_第一课作业_20200407
    K8S--- yaml配置文件
    K8S 简介
    php-fpm进程数控制
    linux常用查询命令
    Docker Note1——架构和三要素
  • 原文地址:https://www.cnblogs.com/crazychris/p/2856117.html
Copyright © 2020-2023  润新知