angular管理后台使用文档

发表于

为了提高代码可读性、重写扩展性，后台管理系统使用了ng1.x（angular1.x），因此这里写一个简单的开发文档，方便了解项目结构以及快速开发

快速开始

创建一个菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
以下以创建菜单账号管理为例
添加路由规则：找到admin目录下的rount.js里添加
.state('app.user', {
  abstract: true,
  url: '/user',
  template: '<div ui-view class="fade-in"></div>',
  resolve: {
      deps: ['$ocLazyLoad',
        function( $ocLazyLoad ){
          return $ocLazyLoad.load('admin/user/ctrl.js');
      }]
  }
})
.state('app.user.list', {
  url: '/list?page&search',
  templateUrl: 'admin/user/list.html',
  ncyBreadcrumb: {
    parent:'app.user',
    label: '用户列表',
  }
})
.state('app.user.detail', {
  url: '/detail/{id}',
  templateUrl: 'admin/user/detail.html',
  ncyBreadcrumb: {
    parent:'app.user.list',
    label: '编辑',
  }
})
.state('app.user.create', {
  url: '/create',
  templateUrl: 'admin/user/detail.html',
  ncyBreadcrumb: {
    parent:'app.user.list',
    label: '新增',
  }
})
页面显示菜单：打开admin/blocks下的aside.html
在系统管理菜单下加入以下代码
<li class="">
	<a ui-sref="app.user.list">
	  <i class="menu-icon fa fa-caret-right"></i>
	  账号管理
	</a>
	<b class="arrow"></b>
</li>
保存刷新页面即可显示账号管理

更多: [501849606@qq.com]

查询数据列表展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
参照以上创建“用户管理”路由规则中的 templateUrl: 'admin/user/list.html'
在admin目录下创建user文件夹 并在user里面创建 list.html模板和ctrl.js控制器
list.html
<div class="wrapper-md" ng-controller="ListController"> 
  html内容......
  以下是循环遍历请求接口返回的数据  展示到页面  ng-repeat为遍历标签
	<tr ng-repeat="data in data.userInfoList" on-finish-render-filters>
	  <td>{{data.login}}</td>
	  <td>{{data.role_name}}</td>
	  <td>{{data.email}}</td>
	  <td>{{data.qq}}</td>
	  <td>{{data.ctime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
	</tr>
</div>
ctrl.js
'use strict';
app.controller('ListController', function($scope, $http, $resource,$stateParams,$modal,$state) {
    //查询  请求获取用户数据接口获取用户列表数据
    $scope.query = function(page,filter){
        //用post带上参数请求接口获取数据
        $http.post($scope.app.host + "userManage/getUserInfoList", {usertoken: $scope.session_user.usertoken, authcode : '123456'})
        .then(function(response) {
          //获得数据返回
          var data = response.data;
          if ( data.code != 40001) {
            alert(data.message);
          } else {
            //将返回的列表数组赋给域  提供给list.html中的ng-repeat使用
            $scope.data = data.data;
          }
        }, function(x) {
          $scope.authError = '服务器错误';
        });
    }
    //默认执行查询接口查询数据
    $scope.query($stateParams.page,$stateParams.search);
});
ctrl.js中的ListController对应list.html中的ng-controller="ListController"  表示这个区域中的事件处理

更多: [501849606@qq.com]

新增或编辑用户

添加 新增和编辑用户页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
在admin/user文件夹user下创建 detail.html模板
控制器域  ng-controller  数据绑定ng-model
<div ng-controller="DetailController">   //ng-controller
      <form class="form-horizontal ng-pristine ng-valid ng-valid-date ng-valid-required ng-valid-parse ng-valid-date-disabled" ng-submit="submit()"> //ng-submit
        <div class="col-auto">
        <div class="table_full">
          <table class="table table-bordered">
            <tbody>
            <tr>
              <th width="130">用户名 </th>
              <td>
              <input type="text" style="width:400px;" ng-model="data.login" class="input input_hd J_title_color" placeholder="请输入用户名 " >
              </td>
            </tr>
          </tbody>
          </table>
        </div>
        </div>
        <div class="form-actions">
          <button class="btn btn-primary btn_submit J_ajax_submit_btn" type="submit">提交</button>
          &nbsp; &nbsp; &nbsp;
          <button class="btn" type="reset">
            <i class="icon-undo bigger-110"></i>
            重置
          </button>
        </div>
      </form>
</div>

crtl.js添加页面的业务逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
在admin/user文件夹中的crtl.js
app.controller('DetailController', function($rootScope,$scope, $http, $stateParams,$state) {
  $scope.edit_mode = !!$stateParams.id;
  //如果是编辑数据，获取初始化的编辑数据
  if ($scope.edit_mode) {
      $http.post($scope.app.host + "userManage/getUserInfoById", {usertoken: $scope.session_user.usertoken, authcode : '123456', id: $stateParams.id})
      .then(function(response) {
        var data = response.data;
        if ( data.code != 40001) {
          alert(data.message);
        } else {
          //把获取到的数据赋给域
          $scope.data = data.data;
        }
      }, function(x) {
        $scope.authError = '服务器错误';
      });
  } else { 
      //添加页面把空数据赋给域 
      $scope.data = {};
  }
  // form表单提交时的操作
  $scope.submit = function(){
    $scope.data.usertoken = $scope.session_user.usertoken;
    $scope.data.authcode = '123456';
    //如果是编辑时的提交
    if($scope.edit_mode){
        $scope.data.id = $stateParams.id;
        $http.post($scope.app.host + "userManage/editUserInfo", $scope.data)
        .then(function(response) {
          var data = response.data;
          if ( data.code != 40001) {
            alert(data.message);
          } else {
            $state.go('app.user.list');
          }
        }, function(x) {
          $scope.authError = '服务器错误';
        });
    } else {
    	//如果是新增数据的提交
        $scope.data.phonenum = $scope.data.login;
        $http.post($scope.app.host + "auth/regist", $scope.data)
        .then(function(response) {
          var data = response.data;
          if ( data.code != 40001) {
            alert(data.message);
          } else {
            $state.go('app.user.list');
          }
        }, function(x) {
          $scope.authError = '服务器错误';
        });
    }
  };
});

更多: [501849606@qq.com]

删除数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
在列表页的循环方法中有一个删除方法 delete();
<a class="red" ng-click="delete({id:data.id})" title="删除">
	<i class="fa fa-trash-o bigger-130"></i>
</a>
crtl.js中的删除方法
app.controller('ListController', function($scope, $http, $resource,$stateParams,$modal,$state) {
    //域中的delete方法
    $scope.delete = function(did) {
      //弹出删除确认  弹出层
      var modalInstance = $modal.open({
          templateUrl: 'admin/confirm.html',
          controller: 'ConfirmController',
          size:'sm',
      });
      modalInstance.result.then(function () {
      	//如果确认删除 拼装参数调用删除接口
        $http.post($scope.app.host + "userManage/deleteUserInfo", {usertoken: $scope.session_user.usertoken, authcode : '123456', id: did.id})
        .then(function(response) {
          var data = response.data;
          if (data.code != 40001) {
            alert(data.message);
          } else {
          	//删除成功后跳转到list页面
            $state.go('app.user.list');
          }
        }, function(x) {
          $scope.authError = '服务器错误';
        });            
      });
    }
});
//confirm弹层
app.controller('ConfirmController', ['$scope', '$modalInstance', function($scope, $modalInstance){
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
  };
}]);

更多: [501849606@qq.com]