Javaweb——Spring Boot 系列（9）Bootstrap+AngularJS 尝试

Bootstrap+AngularJS 尝试

一、项目准备

1、准备 Bootstrap 和 AngularJS
2、准备 jQueryUI 和 jQuery
4、新建 Spring Boot 项目

二、资源引入
三、开始搭建项目

1、AngularJS 模块和指令定义

1.1、模块定义
1.2、路由控制器
1.3、自定义指令

2、视图搭建

2.1、导航栏
2.2、内容视图

3、服务器后台

3.1、Bean
3.2、入口类

4、项目树和Maven依赖

三、运行测试

一、项目准备

1、准备 Bootstrap 和 AngularJS

去官网下载 Bootstrap 和 AngularJS。
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。——百度百科·Bootstrap
AngularJS，是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。——百度百科·AngularJS

2、准备 jQueryUI 和 jQuery

jQuery UI ，是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

4、新建 Spring Boot 项目

在 IDEA 中用项目引导新建一个 Spring Boot 项目，其 Pom 文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.0.M1</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.pyc</groupId>
    <artifactId>ch7_4_4</artifactId>
    <packaging>com.pyc.ch7_4_4</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>ch7_4_4</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

在 application.properties 配置日志，如下：

logging.file=log.log
logging.level.org.springframework.web=DEBUG

二、资源引入

将刚刚准备好的 Bootstrap、AngularJS、jQueryUI 和 jQuery 等框架复制到项目的适当位置。
首先，在 resources 目录下新建一个 static 文件夹，用于存放静态文件；在 static 目录下新建一个 bootstrap 目录用于存放 bootstrap 框架的 css 、js 和 fonts，在 static 目录中新建一个 js 目录，将 AngularJS 和 jQuery 放置其中，再在 static 目录中新建一个 jQueryUI 放置 jQueryUI 框架。
为了 IE 浏览器版本过低，需要两个兼容文件：html5shiv.min.js 和 respond.min.js 文件，这两个文件都可以在互联网上进行下载。

三、开始搭建项目

1、AngularJS 模块和指令定义

1.1、模块定义

这一步主要是编写一个 angular 模块以及访问该模块的路由设置。

在 static 目录中新建一个 js-action 文件夹，再新建一个 JavaScript 文件，取名为 app，用于定义项目要用到的模块，代码如下：

var actionApp = angular.module('actionApp',['ngRoute']);

actionApp.config(['$routeProvider' , function($routeProvider) {
	
	$routeProvider.when('/oper', { 
		controller: 'View1Controller', 
		templateUrl: 'views/view1.html', 
	}).when('/directive', {
		controller: 'View2Controller',
		templateUrl: 'views/view2.html',
	});

}]);

文件第一句定义模块名为：actionApp，依赖路由模块 ngRout；接下来的为模块 actionAPP 的具体定义。
$routeProvider 是 AngularJS 中用于负责页面加载和页面路由转向的对象；“/oper” 是第一个页面的路由名称，“/directive” 是第二个页面的路由名称。
controller 指定路由的控制器名称，templateUrl 指出视图的地址。
这里用到了两个路由控制器，因此需要定义相应的控制器。

1.2、路由控制器

在 js-action 文件夹中，新建一个 JavaScript 文件，取名为 controller，用于定义页面路由需要的路由控制器，代码如下：

	actionApp.controller('View1Controller', ['$rootScope', '$scope', '$http', function($rootScope, $scope,$http) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('页面加载完成');
    });
    
    
    $scope.search = function(){
      personName = $scope.personName;
      $http.get('search',{
    	  params:{personName:personName}
      }).success(function(data){
    	 $scope.person=data;
      });
     
    };
}]);

actionApp.controller('View2Controller', ['$rootScope', '$scope',  function($rootScope, $scope) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('页面加载完成');
    });
}]);

上面定义了两个页面路由控制器，分别命名为模块中用到的路由控制器名。
控制名后面的三个带美元符号的英文单词，用于获取 AngularJS 中的相应对象；在第一个路由控制器中，定义了两个函数，一个用于在页面加载成功时在控制台输出信息，一个是用于获取后台数据。

1.3、自定义指令

AngularJS 内置了许多指令，如 ng-repeat 等，功能是用一个简短的指令实现一个前端组件。

使用指令的方式如下：

元素形式：<指令></指令>
属性形式：<input type="text" 指令/>
样式形式：<input type="text" class="指令"/>
注释形式：<!--directive:指令-->

同时 AngularJS 支持自定义指令,例：

	actionApp.directive('datePicker',function(){
    return {
        restrict: 'AC',
        link:function(scope,elem,attrs){
           // scope.treeObj = $.fn.zTree.init(elem, scope.settings);
            
            elem.datepicker();
        }
    };
});

定义指令名称为：”datePicker“，该指令要完成的操作在函数体中定义。
restrict 用于指定使用指令的形式，上面的例子中指定使用指令的形式为属性和样式。
link 定义指令，调用 jQueryUI 的 datePicker。

2、视图搭建

视图有一个导航栏和两个内容视图。

2.1、导航栏

在桌面应用中，往往有一个菜单栏，而 Web 应用中的也有类似菜单栏的东西，只不过称之为导航栏。

在 static 目录中新建一个 html5 文件，文件名可以取为 action，代码如下：

<!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>Bootstrap and AngularJS 实战</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>
<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>
    </div>
</nav>
<div class="content">
    <ng-view></ng-view>
</div>
<!--导入需要的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>
<script src="js-action/app.js"></script>
<script src="js-action/directives.js"></script>
<script src="js-action/controllers.js"></script>
</body>
</html>

2.2、内容视图

根据导航栏一共有两个内容，因此需要新建两个 HTML5 文件写两份内容，分别如下，

view1：

	<div class="row">
    <label for="attr" class="col-md-2 control-label">名称</label>
    <div class="col-md-2">
        <input type="text" class="form-control" ng-model="personName">
    </div>
    <div class="col-md-1">
        <button class="btn btn-primary" ng-click="search()">查询</button>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <ul class="list-group">
            <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>

view2:

<div class="row">
<label for="attr" class="col-md-2 control-label">属性形式</label>
<div class="col-md-2">
<!--        属性指令-->
        <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">
<!--        样式指令-->
        <input type="text" class="form-control date-picker" >
    </div>
</div>

上面两份文件是用于作为网页内容的，因此不需要网页头等标签了， AngularJS 会将内容视图放置在导航栏文件中的 <ng-view></ng-view> 处。
以上这些可以说是前端的工作，接下来就是后台的逻辑实现。

3、服务器后台

后台用的语言是 Java，版本为 1.8，框架为 Spring Boot 1.3.0.M1.

3.1、Bean

针对 view1 的内容，编写一个 JavaBean，命名为 Person，代码如下：

public class Person {
private String name;
private Integer age;
private String address;

    public Person() {
        super();
    }

    public Person(String name, Integer age, String address) {
        super();
        this.name = name;
        this.age = age;
        this.address = address;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Integer getAge() {
        return age;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getAddress() {
        return address;
    }
}

放置在 java 目录写的 com.pyc.ch7_4_4 目录下，因为我在 POM 文件中：

<groupId>com.pyc</groupId>
<artifactId>ch7_4_4</artifactId>
<packaging>com.pyc.ch7_4_4</packaging>

3.2、入口类

在入口类中增加如下内容：

@RequestMapping(value = "/search", produces = {MediaType.APPLICATION_JSON_VALUE})
public Person search(String personName){
    return new Person(personName,32,"guangdong");
}