第7章 Spring Boot的Web开发2

来源：互联网发布：数据库误删除没备份编辑：程序博客网时间：2024/06/07 10:44

第7章 Spring Boot的Web开发
7.7 基于Bootstrap和AngularJS的现代Web应用
现代的B/S系统软件有下面几个特色：
1.单页面应用
单页面应用指的是一种类似于原生客户端软件的更流畅的用户体验的页面。在单页面应用中，所有的资源都是按需动态加载到页面上的，且不需要服务端控制页面的转向。
2.响应式设计
响应式设计指的是不同的设备访问相同的页面的时候，得到不同的页面试图，而得到的视图是适应当前屏幕的。当然就算在电脑上，我们通过拖动浏览器窗口的大小，也能得到合适的试图。
3.数据导向
数据导向是对于页面导向而言的，页面上的数据获得是通过消费后台的REST服务来实现的，而不是通过服务器渲染的动态页面来实现的，一般数据交换使用的格式的JSON。

7.7.1 Bootstrap
1.什么是Bootstrap
Bootstrap是开发响应式和移动优先的Web应用的最流行的HTML、CSS、JavaScript框架。
只使用一套代码就可以在不同的设备显示你想要的试图的功能。
2.下载并引入Bootstrap
3.css支持
Bootstrap的CSS样式为基础的HTML元素提供了美观的样式，此外还提供了高级的网格系统用来做网页布局。
（1）布局网格
在Bootstrap里，行使用的样式为row,列使用col-md-数字，此数字范围为1~12,所有列加起来的和也是12。
（2）html元素
为html元素提供了大量的样式，如表单元素、按钮、图标等。
4.页面组件支持
Bootstrap提供了大量的页面组件，包括字体图标、下拉框、导航条、进度条、缩略图等。
5.Javascript支持
提供了大量的JavaScript插件，包含模式对话框、标签页、提示、警告等。

7.7.2 AngularJS
1.什么是AngularJS
AngularJS是HTML开发本应该的样子，它是用来设计开发Web应用的。
AngularJS使用声明式模板+数据绑定（类似于JSP、Thymeleaf）、MVW（Model-View-Whatever）、MVVM（Model-View-ViewModel）、MVC（Model-View-Controller）、依赖注入和测试，但是这一切的实现却指借助纯客户端的JavaScript.
2.下载并引入AngularJS
3.模板、控制器和数据绑定
AngularJS实现了纯页面端的MVC，即实现了视图模板、数据模型、代码控制的分离。
AngularJS为了分离代码达到复用的效果，提供了一个module(模型)。定义一个模块需使用下面的代码。
无依赖模块：
angular.module(‘firseModule’,[]);
有依赖模块：
angular.module(‘firstModule’,[‘moduleA’,’moduleB’]);
V是页面元素，M是ng-model,C是ng-controller

Scope和Event
(1)Scope
Scope是Angular的内置对象，用Scope来获得。在Scope中定义的数据是数据模型，可以通过模型名在视图上获得。定义：scope.greeting=’Hello’
获取：
{{greeting}}
（2）Event
因为Scope的作用范围不同，所以不同的Scope之间若要交互的话需要通过事件来完成。
1）冒泡事件:负责从子Scope向上发送事件
子Scope发送：
scope.emit(‘EVENT_NAME_EMIT’,’message’);
父Scope接受：
scope.on(”EVENT_NAME_EMIT’,function(event,data){
…
})
2)广播事件负责从父Scope向下发送事件
父Scope发送：
scope.broadcase(‘EVENT_NAME_BROAD’,’message’);
子scope接受：
scope.on(”EVENT_NAME_BROAD’,function(event,data){
…
})
5.多视图和路由
多视图和路由是AngularJS实现单页面应用的技术关键，AngularJS内置了一个routeProvider对象来负责页面加载和页面路由转向。angular.module(‘firstModule′).config(function(routeProvider){
$routeProvider.when(‘/view1’,{//1某个页面的路由名称
controller:’Controller1’,//2某个页面使用的控制器
templateUrl:’view1.html’,//3要加载的真实页面
}).when(‘/view2’,{
controller:’Controller2’,
templateUrl:’view2.html’,
});
})
在页面上可以用下面代码来使用我们定义的路由

view1
view2

6.依赖注入
可以实现对代码的解耦，在代码中可以注入AngularJS的对象或者我们自定义的对象。
angular.module(‘firstModule’)
.controller(“disController”,[‘scope′,function(scope){
…
}]);

7.Service和Factory
自己定制服务，使用Service和Factory

9.自定义指令
定义指令：
angular.module(‘myApp’,[]).directive(‘helloWorld’,function(){
return {
restrict:’AE’,//支持使用属性、元素
replace:true,
template:’

Hello,World

’
};
});
调用指令，元素标签：

或者属性方式：

7.7.3 实战

这里写代码片

<!DOCTYPE html><html lang="zh-cn" ng-app="actionApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>实战</title><!-- Bootstrap的CSS --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="jqueryui/jquery-ui.min.css" rel="stylesheet"><style type="text/css">.content {  padding: 100px 15px;  text-align: center;}</style><!--[if lt IE 9]>      <script src="js/html5shiv.min.js"></script>      <script src="js/respond.min.js"></script>    <![endif]--></head><body><!-- 1使用Bootstrap定义的导航，并配合AngularJS的路由，通过路由名称 #oper和#directive切换视图-->    <nav class="navbar navbar-inverse navbar-fixed-top">      <div class="container">        <div id="navbar" class="collapse navbar-collapse">          <ul class="nav navbar-nav">            <li><a href="#/oper">后台交互</a></li>            <li><a href="#/directive">自定义指令</a></li>          </ul>        </div><!--/.nav-collapse -->      </div>    </nav>    <!-- 2通过<ng-view></ng-view>展示载入的页面 -->     <div class="content">        <ng-view></ng-view>     </div>    <!-- 3加载本例所需的脚本，其中jquery-ui.min.js的脚本是为我们定制指令所用； -->    <script src="js/jquery.min.js"></script>    <script src="jqueryui/jquery-ui.min.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script>    <script src="js/angular.min.js"></script>    <script src="js/angular-route.min.js"></script>    <!-- app.js定义AngularJS的模块和路由 -->    <script src="js-action/app.js"></script>    <!-- directive.js为自定义的指令 -->    <script src="js-action/directives.js"></script>    <!-- controllers.js是控制器定义之处 -->    <script src="js-action/controllers.js"></script></body></html>

var actionApp = angular.module('actionApp',['ngRoute']);//1定义模块actionApp,并依赖与路由模块ngRoutactionApp.config(['$routeProvider' , function($routeProvider) {//2配置路由，并注入$routeProvider来配置    $routeProvider.when('/oper', { //3/oper为路由名称        controller: 'View1Controller',//4 定义路由的控制器名称        templateUrl: 'views/view1.html', //5定义视图的真正地址    }).when('/directive', {        controller: 'View2Controller',        templateUrl: 'views/view2.html',    });}]);

//1定义控制器View1Controller,并注入$rootScope、$scope和$http。actionApp.controller('View1Controller', ['$rootScope', '$scope', '$http',    function($rootScope, $scope,$http) {        //2使用$scope.$on监听$viewContentLoaded事件，可以在页面内容加载完成后进行一些操作。        $scope.$on('$viewContentLoaded', function() {            console.log('页面加载完成');        });        //3        $scope.search = function(){//3.1在scope内定义一个方法search,在页面上通过ng-click调用          personName = $scope.personName;//3.2获取页面定义的ng-model="personName"的值          $http.get('search',{//3.3使用$http.get向服务端地址search发送get请求。              params:{personName:personName}//3.4使用params增加请求参数          }).success(function(data){//3.5用success方法作为请求成功后的回调             $scope.person=data;//3.6将服务端返回的数据data通过$scope.person赋给模型person          });;        };    }]);actionApp.controller('View2Controller', ['$rootScope', '$scope',     function($rootScope, $scope) {        $scope.$on('$viewContentLoaded', function() {            console.log('页面加载完成');        });    }]);

  <div class="row">    <label for="attr" class="col-md-2 control-label">名称</label>    <div class="col-md-2">        <!-- 1 定义数据类型ng-model="personName"-->      <input type="text" class="form-control" ng-model="personName">    </div>    <div class="col-md-1">        <!-- 2通过ng-click="search()"调用控制器中定义的方法 -->        <button class="btn btn-primary" ng-click="search()">查询</button>    </div>  </div>   <div class="row">     <div class="col-md-4">          <ul class="list-group">            <!-- 3通过{{person.name}}、{{person.age}}、{{person.address}}访问控制器的scope里定义的person模型，模型和视图是绑定的 -->            <li class="list-group-item">名字： {{person.name}}</li>            <li class="list-group-item">年龄：  {{person.age}}</li>            <li class="list-group-item">地址：  {{person.address}}</li>          </ul>  </div>  </div>

package com.wisely.ch7_7;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.http.MediaType;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@SpringBootApplicationpublic class Ch77Application {    @RequestMapping(value="/search",produces={MediaType.APPLICATION_JSON_VALUE})    public Person search(String personName) {        return new Person(personName,32,"hefei");    }    public static void main(String[] args) {        SpringApplication.run(Ch77Application.class, args);    }}

actionApp.directive('datePicker',function(){//1定义一个指令名为datePicker    return {        restrict: 'AC',//2限制为属性指令和样式指令        link:function(scope,elem,attrs){//3使用link方法来定义指令，在link方法内可使用当前scope、当前元素及元素属性。           // scope.treeObj = $.fn.zTree.init(elem, scope.settings);            elem.datepicker();//4初始化jqueryui的datePicker(jquery的写法是$(‘#id’).datePicker()).        }    };});

  <div class="row">    <label for="attr" class="col-md-2 control-label">属性形式</label>    <div class="col-md-2">      <!-- 1 -->      <input type="text" class="form-control" date-picker>    </div>  </div>  <div class="row">    <label for="style" class="col-md-2 control-label">样式形式</label>    <div class="col-md-2">      <!-- 2 -->      <input type="text" class="form-control date-picker" >    </div>  </div>

0 0