Bootstrap
AngularJs
单页面应用 (前端分离)
响应式设计 (不通设备不同视图)
数据导向 (JSON)
Bootstrap
开发响应式 和 移动优先的
https://getbootstrap.com/
<!DOCTYPE html>
<html lang="zh-cn">
<!-- 上面两句为HTML5的doctype -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上面3个meta标签必须是head的头三个标签,其余的head内标签在此3个之后The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap基本模板</title>
<!-- Bootstrap的CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js用来让IE8支持HTML5元素和媒体查询 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好, Bootstrap!</h1>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div> //要12个
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<!-- jQuery是Bootstrap脚本插件必须的 -->
<script src="js/jquery.min.js"></script>
<!-- 包含所有编译的插件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
行用row,列用 col-md-数字,所有加起来要为12
Angular JS
https://angularjs.org/
<!doctype html>
<html ng-app><!-- 1 --> angularjs 起效的范围,整个页面有效
<head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script><!-- 2 --> 载入js
</head>
<body>
<div>
<label>名字:</label>
<input type="text" ng-model="yourName" placeholder="输入你的名字"><!-- 3
定义前端的数据模型,模型的名称youName
-->
<hr>
<h1>你好 {{yourName}}!</h1><!-- 4 --> 取值,两个括号
</div>
</body>
</html>
AngularJS 纯页面的 MVC,即:实现了视图模板,数据模型,代码控制。
数据绑定:将视图 和 数据模型 绑定在一起。
如果视图变了,则模型的值就变了,则视图也会跟着改变。
xml
<?xml version="1.0" encoding="UTF-8"?>
<projec >
<modelVersion>4.0.0</modelVersion>
<groupId>com.wisely</groupId>
<artifactId>ch7_7</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>ch7_7</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.0.M1</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<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>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
制作导航
src/main/resources/static/action.html
<!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>
<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>
<div class="content">
<ng-view></ng-view>
</div>
<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>
模块和路由的定义
src/main/resources/static/js-action/app.js
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',
});
}]);
控制器定义
controllers.js
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('页面加载完成');
});
}]);
view1的界面
src/main/resources/static/views/view1.html
<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>
服务端代码
public class Person { //提供get set
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;
}
}
@RestController
@SpringBootApplication
public 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);
}
}
自定义指令
directives.js
actionApp.directive('datePicker',function(){
return {
restrict: 'AC',
link:function(scope,elem,attrs){
// scope.treeObj = $.fn.zTree.init(elem, scope.settings);
elem.datepicker();
}
};
});
view2 的页面 自定义指令
static/views/view2.html
<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>