700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > REST架构网站改写:前端MVC - Angular.js Web框架 - Express.js 数据库 - MongoDB

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

时间:2021-08-16 00:49:13

相关推荐

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

Coenraets分享了自己开发的一个Single Page Restful网站(/blog//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); //retrieve3 app.post('/wines', wine.addWine); //create4 app.put('/wines/:id', wine.updateWine); //update5 app.delete('/wines/:id', wine.deleteWine); //delete

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

controller.js

1 angular.module('controller', ['service']). 2config(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) {10Wine.query(function(wines) {11 $scope.wines = wines;12});13 }14 15 function AddWineCtrl($scope, $location, Wine) {16// POST /wines17$scope.saveWine = function() {18 Wine.save($scope.wine, function() {19 $location.path("/wines");20 });21};22 }23 24 function WineDetailCtrl($scope, $location, $routeParams, Wine) {2527// GET /wines/id28Wine.get({wineId: $routeParams.wineId}, function(wine){29 $scope.wine = wine;30});31 32// PUT /wines/id33$scope.saveWine = function () {34 Wine.update({wineId: $routeParams.wineId},35 $scope.wine, function() {36 $location.path("/wines");37 });38};39 40//DELETE /wines/id41$scope.deleteWine = function () {42 Wine.delete({wineId: $routeParams.wineId}, function() {43 $location.path("/wines");44});45};46 }

service.js

1 angular.module('service', ['ngResource']).2factory('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。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。