项目组一直没有前端,也不派人过来,项目又一直催上线,没办法自己写吧。开始选技术,之前有用过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
突然不想写了,改天再补上吧。。