EE颠覆者7章web开发2 现代web 浅浅的花香味﹌ 2023-07-20 08:21 1阅读 0赞 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>
还没有评论，来说两句吧...