项目组一直没有前端,也不派人过来,项目又一直催上线,没办法自己写吧。开始选技术,之前有用过EasyUI说实话真的不好看。后来经研究决定用angularjs 谷歌大牛写的,这里就不详细说了

两个js搞定

<!doctype html>
<html data-ng-app="indexApp">
<head>
	<title> --------------- </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="./css/lib/jquery-ui/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="./css/lib/poshytip/tip-yellow.css">
	<link rel="stylesheet" type="text/css" href="./css/lib/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/all/awifi_2g.min.css">

	<script type="text/javascript" src="./js/lib/jquery/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="./js/lib/jquery/jquery-ui.min.js"></script>
	<script type="text/javascript" src="./js/lib/jquery/jquery.poshytip.min.js"></script>
	<script type="text/javascript" src="./js/lib/angular/angular.min.js"></script>
	<script type="text/javascript" src="./js/lib/angular/angular-route.min.js"></script>
	<script type="text/javascript" src="./js/lib/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
	<!--<script type="text/javascript" src="./js/lib/highcharts/highcharts.js"></script>-->
	<!--<script type="text/javascript" src="./js/lib/layer/layer.js"></script>-->
	<script type="text/javascript" src="./js/all/awifi_2g.min.js"></script>
</head>

<body>
<!--整体-->
<div class="all">


	<!--头(上)-->
	<div class="header">
		<div class="title">----------------------</div>
		<div class="mark" data-ng-controller="topMenuController">
			<!--  <img src="./images/touxiang.png"/>  -->
			<span>{{ userName }}</span>
			<a href="/j_spring_security_logout">退出</a>
			<img src="./images/logo.png"/>
		</div>
	</div><!--头(上)-->





	<!--下(中间)-->
	<div class="centre">
		<!--下(左)-->
		<div class="left">

			<div class="menu" id="user_menu">
				<!-- <img src="images/userManager.png"/> -->
				<span class="sp1">用户管理</span>
				<img id="img01" src="./images/arrow_u.png" width="100%" />
			</div>

			<ul class="user_menu" id="user_ul" data-ng-controller="leftMenuController">
				<a href="#/user/list"><li data-ng-click="selectMenu($event)">用户列表</li></a>
				<a href="#/staticuser/list"><li data-ng-click="selectMenu($event)">参数配置</li></a>
				<a href="#/blackList/blackListHistoryList"><li data-ng-click="selectMenu($event)">黑名单设置</li></a>
				<a href="#/blacklist/manage"><li data-ng-click="selectMenu($event)">黑名单管理</li></a>
			</ul>

			<div class="menu" id="user_menu">
				<!-- <img src="images/userManager.png"/> -->
				<span class="sp1">系统设置</span>
				<img id="img01" src="./images/arrow_u.png" width="100%" />
			</div>

			<ul class="user_menu" id="user_ul" data-ng-controller="leftMenuController">
				<a href="#/sysconfig/list"><li data-ng-click="selectMenu($event)">系统参数配置</li></a>
				<a href="#/exceptionlog/list"><li data-ng-click="selectMenu($event)">异常日志</li></a>
				<a href="#/requestlog/list"><li data-ng-click="selectMenu($event)">请求日志</li></a>
			</ul>

		</div><!--下(左)-->


		<!--下(右)-->
		<div class="right" data-ng-view=""></div>
		<!--下(右)-->

	</div><!--下(中间)-->


</div><!--整体-->
</body>
</html>

  先把大体做出来,然后就要MVC了 跟后台MVC类似,很容易上手,通过

<a href="#/exceptionlog/list">  
indexApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {//第一次加载时,默认模板
            templateUrl : 'html/template/user/userList.html',
            controller  : 'userListController'
        })
        .when('/user/list', {//用户列表
            templateUrl : 'html/template/user/userList.html',
            controller  : 'userListController'
        })
        .when('/blackList/blackListHistoryList', {//黑名单列表(分页)
            templateUrl : 'html/template/blacklist/blackList.html',
            controller  : 'blackListController'
        })
        .when('/blackList/details',{//黑名单设置详情
            templateUrl : 'html/template/blacklist/BlacklistDetails.html',
            controller  : 'blacklistDetailsController'
        })
        .when('/blacklist/manage', {//黑名单管理
            templateUrl : 'html/template/blacklist/BlacklistManage.html',
            controller  : 'blacklistManageController'
        })
        .when('/sysconfig/list',{//系统参数列表
            templateUrl : 'html/template/system/sysConfigList.html',
            controller  : 'sysConfigListController'
        })
        .when('/sysconfig/add',{//新增系统参数
            templateUrl : 'html/template/system/sysConfigAdd.html',
            controller  : 'sysConfigAddController'
        })
        .when('/sysconfig/edit',{//编辑系统参数
            templateUrl : 'html/template/system/sysConfigEdit.html',
            controller  : 'sysConfigEditController'
        })
        .when('/staticuser/list',{//静态用户名认证中的MAC列表
            templateUrl : 'html/template/staticuser/staticUserList.html',
            controller  : 'staticUserListController'
        })
         .when('/requestlog/list',{//请求日志列表
            templateUrl : 'html/template/system/requestLogList.html',
            controller  : 'requestLogListController'
        })
         .when('/exceptionlog/list', {//异常日志列表
            templateUrl : 'html/template/log/exceptionlogList.html',
            controller  : 'exceptionlogListController'
        })
    
        .otherwise({
            redirectTo: '/'
        });
});

  分配controller

看这个controller,service,dao  是不是很熟悉呀。。。呵呵

indexApp.controller('blackListController', function($scope, blackListService)

 调用controller  再把service注入进来

 //黑名单列表(分页)
    function list(){
    	blackListService.BlackListHistoryList($scope);
    	initConditionForDate();
    };
    $scope.list = list;

  service在调用BlackListHistoryList  

突然不想写了,改天再补上吧。。

 

posted on 2015-08-25 15:26  Bonnat  阅读(207)  评论(0编辑  收藏  举报