※ 실행결과: http://study.jeju.onl/sportsstore/admin.html
상품과 주문을 관리하기 위한 관리자 기능을 구현한다.
이 기능은 관리자만 사용할 수 있으므로 ‘admin’ 사용자에 대한 인증기능도 요구된다.
필요한 화면은..
- 로그인 시도와 결과 페이지
- 상품 관리 화면
- 주문 관리 화면
Deployd에서 users 테이블을 생성한다. (* 주의: 일반 Collection이 아니다!)
Deployd의 테이블 event 기능을 사용하면
get/post/put/delete 등에 대한 사용권한을 javascript로 제어할 수 있다.
users 테이블에 대한 login 기능은 Deployd에서 제공한다.
authUrl을 통해 호출을 하고 있는데, post 요청으로 username과 password를 넘긴다.
.constant("authUrl", "http://localhost:5500/users/login")
로그인 화면을 통과하면 기본적으로 상품관리 화면을 보여준다.
$resource를 통해 수정과 삭제가 가능하다.
다음은 주요 코드이다.
1) controllers/adminCtrl.js
angular.module("sportsStoreAdmin") .constant("authUrl", "http://localhost:5500/users/login") .constant("ordersUrl", "http://localhost:5500/orders") .controller("authCtrl", function($scope, $http, $location, authUrl) { $scope.authenticate = function(user, pass) { //console.log("Try to login: "+user+"/"+pass); $http.post(authUrl, { username: user, password: pass },{ withCredentials: true }).success( function(data) { $location.path("/main"); }).error( function(error) { $scope.authenticationError = error; }); }; }) .controller("mainCtrl", function($scope) { $scope.screens = ["Products", "Orders"]; $scope.current = $scope.screens[0]; $scope.setScreen = function(index) { $scope.current = $scope.screens[index]; }; $scope.getScreen - function() { return ($scope.current == "Products") ? "views/adminProducts.html" : "views/adminOrders.html"; }; }) .controller("ordersCtrl", function($scope, $http, ordersUrl) { $http.get(ordersUrl, {withCredentialsL: true}) .success( function(data) { $scope.orders = data; }) .error( function(error) { $scope.error = error; }); $scope.selectedOrder; $scope.selectOrder = function(order) { $scope.selectedOrder = order; }; $scope.calcTotal = function(order) { var total = 0; for (var i=0; i<order.products.length; i++) { total += order.products[i].count * order.products[i].price; } return total; }; }) ;
2) controllers/adminProductCtrl.js
angular.module("sportsStoreAdmin") .constant("productUrl", "http://localhost:5500/products/") .config( function($httpProvider) { $httpProvider.defaults.withCredentials = true; }) .controller("productCtrl", function($scope, $resource, productUrl) { $scope.productsResource = $resource(productUrl + ":id", { id: "@id" }); $scope.listProducts = function() { $scope.products = $scope.productsResource.query(); }; $scope.deleteProduct = function(product) { product.$delete().then(function () { $scope.products.splice($scope.products.indexOf(product), 1); }); }; $scope.createProduct = function(product) { new $scope.productsResource(product).$save().then( function(newProduct) { $scope.products.push(newProduct); $scope.editedProduct = null; }); }; $scope.updateProduct = function(product) { product.$save(); $scope.editedProduct = null; }; $scope.startEdit = function(product) { $scope.editedProduct = product; }; $scope.cancelEdit = function() { $scope.editedProduct = null; }; $scope.listProducts(); });
3) admin.html
<!DOCTYPE html> <html ng-app="sportsStoreAdmin"> <head> <title>Administration</title> <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" /> /node_modules/angular/angular.js /node_modules/angular/angular-route.js /node_modules/angular/angular-resource.js angular.module("sportsStoreAdmin", ["ngRoute", "ngResource"]) .config( function($routeProvider) { $routeProvider.when("/login", { templateUrl: "views/adminLogin.html" }); $routeProvider.when("/main", { templateUrl: "views/adminMain.html" }); $routeProvider.otherwise({ redirectTo: "login" }); }); http://controllers/adminCtrl.js http://controllers/adminProductCtrl.js </head> <body> <ng-view /> </body> </html>
4) views/adminLogin.html
Enter your username and password and click Log In to authenticateAuthentication Failed ({{ authenticationError.status }}). Try again.<form name="authForm" novalidate>UsernamePasswordLog In</form> </div>5) views/adminMain.html
</div>6) views/adminProducts.html
<style> #productTable { width: auto; } #productTable td { max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #productTable td input { max-width: 125px; } </style>
Name Description Category Price {{ item.name }} {{ item.description }} {{ item.category }} {{ item.price | currency }} Edit Delete Create Save Cancel 7) views/adminOrders.html
Name City Value {{ order.name }} {{ order.city }} {{ calcTotal(order) | currency }} Details </div>Order Details
Name Count Price {{ item.name }} {{ item.count }} {{ item.price || currency }}
Deployd 예제에서 login 기능에 대한 부분을 찾아봐야한다.
업뎃 예정!
%d 블로거가 이것을 좋아합니다: