一、前端框架AngularJS 入门
1.1 AngularJS 简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。
1.2 AngularJS 四大特征
1.2.1 MVC 模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。
- Model:数据,其实就是angular变量($scope.XX);
- View: 数据的呈现,Html+Directive(指令);
- Controller:操作数据,就是function,数据的增删改查;
1.2.2 双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
1.2.3 依赖注入
依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI。
1.2.4 模块化设计
高内聚低耦合法则
- 官方提供的模块 ng、ngRoute、ngAnimate
- 用户自定义的模块 angular.module(‘模块名’,[ ])
1.3 入门小 Demo
步骤一:先创建一个静态空文件如下:
1.3.1 表达式
表达式的写法是
{{表达式 }}
表达式可以是变量或是运算式
ng-app
指令 作用是告诉子元素下的指令是归angularJs的,angularJs会识别的
ng-app
指令定义了 AngularJS 应用程序的 根元素。
ng-app
指令在网页加载完毕时会自动引导(自动初始化)应用程序。
(1) 创建一个 angularJS
案例 👇🏾👇🏾
(2) angular.min.js 的引入 angular.min.js
(3)创建并且编写demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app>
<!--插值表达式-->
{{100+100}}
</body>
</html>
1.3.2 双向绑定
注意:输入中文后回车才能显示
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。
创建 demo2.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
</head>
<body ng-app>
<!--数据绑定-->
<!--当输入字母和数字的时候会同步显示在下面,当输入汉字的时候需要按回车才会显示下面-->
<input ng-model="myname"/><br/>
{{myname}}恭喜您和angularJS过七夕!
</body>
</html>
总结 :上面输入框 输入英文或数字下面会同步显示,输入中文需要回车才显示。
1.3.3 初始化指令
我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化
创建demo3.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app ng-init="myname = 'Daniel'"> <!--初始化-->
请输入您的姓名:<input ng-model="myname"><br/>
欢迎您 {{myname}} 靓仔!!!
</body>
</html>
1.3.4 控制器
ng-controller
用于指定所使用的控制器。
理解 $scope
:
$scope
的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.- 有了
$scope
就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新$scope
,同样的$scope
发生改变时也会立刻重新渲染视图。
创建 demo4.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module('aa',[]); //定义了一个叫aa的模块
//定义控制器
app.controller('bb',function ($scope) {
$scope.add = function () {
return parseInt($scope.x) + parseInt($scope.y)
}
});
</script>
</head>
<body ng-app="aa" ng-controller="bb">
请输入一个数字:<input ng-model="x"><br/><br/>
请在输入一个数字:<input ng-model="y"><br/><br/>
两数字之和为:{{add()}}
</body>
</html>
1.3.5 事件指令
ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法
创建 demo5.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module('aa',[]);
app.controller('controller',function ($scope) {
$scope.add = function () {
$scope.z = parseInt($scope.x) + parseInt($scope.y)
}
});
</script>
</head>
<body ng-app="aa" ng-controller="controller">
请输入第一个数字:<input ng-model="x"><br/><br/>
请输入第二个数字:<input ng-model="y"><br/><br/>
<button ng-click="add()">求和</button>
结果为:{{z}}
</body>
</html>
1.3.6 循环数组
ng-repeat指令用于循环数组变量。
创建 demo6.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]); //定义一个叫myApp的模块
/*定义控制器*/
app.controller('myController',function ($scope) {
$scope.list = [12,23,34,45,666]; //定义数组,注意元素不能重复
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="a in list">
<td>
{{a}}
</td>
</tr>
</table>
</body>
</html>
1.3.7 循环对象数组
创建 demo7.html
并且引入 angularJS插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myController',function ($scope) {
$scope.list =
[
{name:'Daniel',shuxue:150,xiandai:32},
{name:'hollow',shuxue:140,xiandai:88},
{name:'Jenny',shuxue:22,xiandai:100}
];
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>高数</td>
<td>线代</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.xiandai}}</td>
</tr>
</table>
</body>
</html>
1.3.8 内置服务
- 我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务
$http
来实现。- 注意:以下代码需要在tomcat中运行。
创建 demo8.html
并且引入 angularJS插件和导入 json文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
/*
* module 函数有两个参数
* 第一个参数:指定模块的名字(模块的名字自己指定)
* 第二个参数:可以引用angular中的一些内置组件
*
* */
var app = angular.module('myApp',[]);
//通过app调用controller方法来创建一个控制层的一个函数
app.controller('myController',function ($scope,$http) {
$scope.findAll = function () {
$http.get('data.json').success(function (response) {
$scope.list = response;
})
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.age}}</td>
</tr>
</table>
</body>
</html>
二、品牌列表的实现
2.1 需求分析
实现品牌列表的查询(不用分页和条件查询)效果如下:
2.2 前端代码
2.2.1 拷贝资源
将 静态原型 \ 静态原型 \ 运营商管理后”下的页面资源拷贝到 youlexuan-manager-web 下
其中plugins文件夹中包括了angularJS 、bootstrap、JQuery等常用前端库,我们将在项目中用到
2.2.2 引入JS
修改admin / brand.html ,引入JS
<script src="../plugins/angularjs/angular.min.js"></script>
2.2.3 指定模块和控制器
ng-app="brandApp" ng-controller="brandController" ng-init="findBrandAll()"
- ng-app 指令中定义的就是模块的名称
- ng-controller 指令用于为你的应用添加控制器。
- 在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。
2.2.4 编写JS代码
<script>
var app = angular.module('brandApp',[]);
app.controller('brandController',function ($scope,$http) {
$scope.findBrandAll = function(){
$http.get('../brand/findAll.do').success(function(response){
$scope.list = response;
})
}
});
</script>
2.2.5 循环显示表格数据
<tr ng-repeat="entity in list" >
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
2.2.6 初始化调用
见 2.2.3 ng-init="findBrandAll()"
2.2.7 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/angularjs/angular.min.js"></script>
<script>
var app = angular.module('brandApp',[]);
app.controller('brandController',function ($scope,$http) {
$scope.findBrandAll = function(){
$http.get('../brand/findAll.do').success(function(response){
$scope.list = response;
})
}
});
</script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="brandApp" ng-controller="brandController" ng-init="findBrandAll()">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list" >
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>华为</td>
<td>H</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>三星</td>
<td>S</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名称</td>
<td><input class="form-control" placeholder="品牌名称" > </td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母"> </td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
2.3 测试运行
- 顺序启动以下2个服务 youlexuan-sellergoods-service、youlexuan-manager-web
- 访问地址:
http://localhost:9101/admin/index.html
或直接访问:http://localhost:9101/admin/brand.html
- 点击:商品管理—》品牌管理
- 出现如下运行效果,可以查看到全部的品牌数据
三、品牌列表分页的实现
3.1 需求分析
在品牌管理下方放置分页栏,实现分页功能
3.2 后端代码
3.2.1 分页结果封装实体
在youlexuan-pojo工程中创建 com.zql.entity
包,用于存放通用实体类,创建类PageResult
package com.zql.entity;
import java.io.Serializable;
import java.util.List;
/**
* 分页
* @Author:Daniel
* @Version 1.0
* total;//总记录数
* rows;//当前页结果
*/
public class PageResult implements Serializable {
private long total;//总记录数
private List rows;//当前页结果
public PageResult() {
}
public PageResult(long total, List rows) {
this.total = total;
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
3.2.2 服务接口层
在youlexuan-sellergoods-interface的BrandService.java 增加方法定义
//分页
public PageResult findPage(int pageNum, int pageSize);
3.2.3 服务实现层
在youlexuan-sellergoods-service的BrandServiceImpl.java中实现该方法
/*分页*/
@Override
public PageResult findPage(int pageNum, int pageSize) {
PageHelper.startPage(pageNum, pageSize);
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
return new PageResult(page.getTotal(),page.getResult());
}
注:如果将接口和实现类删除重新编写,运行服务则会报,“超类相关错误”,这时候重新安装下就可以啦~
PageHelper为MyBatis分页插件,找到项目模块youlexuan-dao设置mybatis配置文件SqlMapConfig.xml增加插件配置(应该已经增加了)
<plugins>
<!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
<property name="dialect" value="mysql"/>
</plugin>
</plugins>
模块youlexuan-sellergoods-service需要导入PageHelper依赖包
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
</dependency>
3.2.4 控制层
在youlexuan-manager-web工程的BrandController.java新增方法
//分页 返回指定页码、行数 品牌列表
@RequestMapping("/findPage")
public PageResult findPage(int page, int rows){
return brandService.findPage(page,rows);
}
注意:因为duobbo远程调用Service,所以需要修改youlexuan-manager-web中pom.xml导入如下类库包
<!-- 增加pagehelper类、mybatis类,因为Service使用了,不导入会报序列化错 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
</dependency>
3.3 前端代码
3.3.1 HTML
在brand.html引入分页组件
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
构建app模块时引入pagination模块
//构建app模块时引入pagination模块
var app = angular.module('brandApp',['pagination']);//定义优乐选模块,增加分页模块 pagination:能引入分页组件
页面的表格下放置分页组件
<!-- 分页组件-->
<tm-pagination conf="paginationConf"></tm-pagination>
3.3.2 JS代码
在brandController
内层添加如下代码
//重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = { //变量各属性的意义:
currentPage: 1, //当前页码
totalItems: 5, //总条数
itemsPerPage: 5,
perPageOptions: [5, 10, 15, 20, 30], //页码选项
onChange: function(){ //更改页面时触发的事件
$scope.reloadList();//重新加载
}
};
/*分页*/
$scope.findPage = function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(function(response){
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total;//更新总记录数
})
}
在页面的body元素上换掉ng-init指令的调用为 reloadList ()
👇🏾👇🏾
3.4 测试运行
(1)先安装下
顺序启动以下2个服务 youlexuan-sellergoods-service、youlexuan-manager-web
访问地址:http://localhost:9101/admin/index.html
- 点击:商品管理—》品牌管理
- 出现如下运行效果,可以查看到品牌数据,点击下面的页码,可以正常分页显示