day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
课程目标
- 目标1：运用angularjs前端框架的常用指令
- 目标2：完成品牌管理的列表功能
- 目标3：完成品牌管理的分页列表功能
- 目标4：完成品牌管理的增加功能
- 目标5：完成品牌管理的修改功能
- 目标6：完成品牌管理的删除功能
- 目标7：完成品牌管理的条件查询功能 -
1. 前端框架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 模块化设计
高内聚低耦合法则
1) 官方提供的模块 --- ng、ngroute、nganimate
2) 用户自定义的模块 --- angular.module('模块名',[ ])
1.3 angularjs入门小demo
1.3.1 表达式指令
<html>
<head>
<title>angularjs入门小demo-1 表达式指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
执行结果如下：
表达式的写法是{{表达式}} 表达式可以是变量或是运算式
ng-app 指令作用是告诉子元素指令是归angularjs的，angularjs会识别的。
ng-app 指令定义了 angularjs 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
1.3.2 双向绑定指令
<html>
<head>
<title>angularjs入门小demo-2 双向绑定指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
请输入你的别名：<input ng-model="myname">
<br>
{{myname}},你好！
</body>
</html>
运行效果如下：
ng-model 指令用于绑定变量，这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。
1.3.3 初始化指令
我们如果希望有些变量具有初始值，可以使用ng-init指令来对变量初始化。
<html>
<head>
<title>angularjs入门小demo-3 初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='陈大海'">
请输入你的姓名：<input ng-model="myname">
<br>
请输入你的别名：<input ng-model="myname">
<br>
{{myname}},你好！
</body>
</html>
运行效果如下：
1.3.4 控制器指令
<html>
<head>
<title>angularjs入门小demo-4 控制器指令</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myapp',[]); // 定义了一个名叫myapp的模块
// 创建控制器
app.controller('mycontroller',function($scope){
$scope.add=function(){
return parseint($scope.x) + parseint($scope.y);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
x:<input ng-model="x">
y:<input ng-model="y">
运算结果：{{add()}}
</body>
</html>
运行结果如下：
ng-controller 用于指定所使用的控制器。
理解$scope：$scope的使用贯穿整个 angularjs app 应用，它与数据模型相关联，同时也是表达式执行的上下文。有了$scope就在视图和控制器之间建立了一个通道，基于作用域视图在修改数据时会立刻更新$scope，同样的$scope发生改变时也会立刻重新渲染视图。
1.3.5 事件指令
<html>
<head>
<title>angularjs入门小demo-5 事件指令</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myapp',[]); // 定义了一个名叫myapp的模块
// 创建控制器$scope.z
app.controller('mycontroller',function($scope){
$scope.add=function(){
$scope.z = parseint($scope.x) + parseint($scope.y);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
x:<input ng-model="x">
y:<input ng-model="y">
<button ng-click="add()">运算</button>
结果：{{z}}
</body>
</html>
运行结果：
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法。
1.3.6 循环数组
<html>
<head>
<title>angularjs入门小demo-6 循环数组</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myapp',[]); // 定义了一个名叫myapp的模块
// 创建控制器$scope.z
app.controller('mycontroller',function($scope){
$scope.list= [100,192,203,434]; // 定义数组
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
运行结果如下：
这里的ng-repeat指令用于循环数组变量。
1.3.7 循环对象数组
<html>
<head>
<title>angularjs入门小demo-7 循环对象数组</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myapp',[]); // 定义了一个名叫myapp的模块
// 创建控制器$scope.z
app.controller('mycontroller',function($scope){
$scope.list= [
{name:'张三',shuxue:99,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
]; // 定义数组
});
</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.yuwen}}</td>
</tr>
</table>
</body>
</html>
运行结果如下：
1.3.8 内置服务
我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。注意：以下代码需要在tomcat中运行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>angularjs入门小demo-8 内置服务</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('myapp',[]); // 定义了一个名叫myapp的模块
// 定义控制器
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.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
建立文件 data.json，注意json文件格式，key必须有双引号，末尾没有逗号。
[
{"name":"张三","shuxue":99,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":59,"yuwen":70}
]
运行结果如下：
2. 品牌列表的实现
2.1 需求分析
实现品牌列表的查询（不用分页和条件查询）效果如下：
2.2 前端代码
2.2.1 拷贝页面资源
将“资源/静态原型/运营商管理后台”下的页面资源拷贝到pinyougou-manager-web下：
其中plugins文件夹中包括了angularjs、bootstrap、jquery等常用前端库，我们将在项目中用到。
2.2.2 引入js
修改brand.html ，引入js
<!-- 引入angularjs文件 -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
2.2.3 指定模块和控制器
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandcontroller">
ng-app 指令中定义的就是模块的名称。
ng-controller 指令用于为你的应用添加的控制器。
在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。
2.2.4 编写js代码
<script type="text/javascript">
var app=angular.module('pinyougou',[]); // 定义品优购模块
app.controller('brandcontroller',function($scope,$http){ // 定义控制器
// 读取品牌列表数据绑定到表单中
$scope.finall=function(){
$http.get('../brand/findall.do').success(
function(response){
$scope.list=response;
}
);
}
});
</script>
2.2.5 循环显示表格数据
<!--数据列表-->
<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>
</tbody>
</table>
2.2.6 初始化调用
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandcontroller" ng-init="findall()">
3. 品牌列表分页的实现
3.1 需求分析
在品牌管理下方放置分页栏，实现品牌分页功能
3.2 后端代码
后端给前端的数据有：
1）total：总记录数。
2）rows：当前页记录的集合。
json数据格式：{"total":100,"rows":[{"id":1,"name":"张三"},{"id":2,"name":"李四"}]}
方法一：在后端将查询到的数据封装成map集合
map map = new hashmap();
map.put("total",1000);
map.put("rows",list);
return map;
fastjson会自动转换map集合数据。
方法二：创建分页查询时返回的结果类（包装类）来进行接收，该类包含total和rows属性。
3.2.1 将从数据库查询的分页结果封装实体
在 pinyougou-pojo 工程中创建 entity包，用于存放通用实体类，创建类pageresult
package entity;
import java.io.serializable;
import java.util.list;
/**
* 数据库分页查询时返回的结果类（包装类）
* @author chenmingjun
* @date 2019年1月14日
*/
public class pageresult implements serializable {
private long total; // 总记录数
private list<?> rows; // 当前页记录的集合
private static final long serialversionuid = 1l;
public pageresult() {
super();
}
public pageresult(long total, list<?> rows) {
super();
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;
}
@override
public string tostring() {
return "easyuidatagridresult [total=" + total + ", rows=" + rows + "]";
}
}
3.2.2 服务接口层
在 pinyougou-sellergoods-interface 的 brandservice.java 增加方法定义
/**
* 分页查询全部品牌列表
* @param pagenum 当前页的页码
* @param pagesize 每页要显示的记录数
* @return pageresult
*/
pageresult findpage(integer pagenum, integer pagesize);
3.2.3 服务实现层
在 pinyougou-sellergoods-service 的 brandserviceimpl.java 中实现该方法
@override
public pageresult findpage(integer pagenum, integer pagesize) {
// 设置分页信息，使用pagehelper分页插件
pagehelper.startpage(pagenum, pagesize);
// 执行查询，不需要设置查询条件，即查询所有
tbbrandexample example = new tbbrandexample();
list<tbbrand> list = brandmapper.selectbyexample(example);
// 取出分页信息，分页后，实际返回的结果list类型是page<e>，如果想取出分页信息
// 方式一：需要强制转换为page<e>后，使用page对象进行处理
// page<tbbrand> page = (page<tbbrand>) list;
// return new pageresult(page.gettotal(), page.getresult());
// 方式二：我们使用pageinfo对象对查询出来的结果进行包装，由于pageinfo中包含了非常全面的分页属性，推荐使用方式二
pageinfo<tbbrand> pageinfo = new pageinfo<>(list);
// 创建分页查询时返回的结果类对象
pageresult result = new pageresult();
// 给返回的查询结果对象设置值(即封装数据)
result.settotal(pageinfo.gettotal());
result.setrows(list);
return result;
}
pagehelper为mybatis分页插件。
3.2.4 控制层
在 pinyougou-manager-web 工程的 brandcontroller.java 新增方法
@requestmapping("/findpage")
public pageresult findpage(int page, int rows) {
pageresult result = brandservice.findpage(page, rows);
return result;
}
3.3 前端代码
前端给后端的数据有：
1）page：当前页的页码，从1开始。
2）rows：每页要显示的记录数。
注意：此处的rows与上处的rows的含义区别。
3.3.1 html
在brand.html引入分页组件
<!-- 分页组件开始 -->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js"></script>
<!-- 分页组件结束 -->
引入分页模块
var app=angular.module('pinyougou',['pagination']); // 定义品优购模块、引入分页模块
页面的表格下放置分页控件
<!--分页控件-->
<tm-pagination conf="paginationconf"></tm-pagination>
3.3.2 js代码
在控制器 brandcontroller 中添加如下代码
// 分页控件初始化配置
$scope.paginationconf={
currentpage: 1, // currentpage:当前页 (初始化)
totalitems: 10, // totalitems:总记录数(初始化)
itemsperpage: 10, // itemsperpage:每页记录数(初始化)
perpageoptions: [10, 20, 30, 40, 50], // perpageoptions:分页选项(初始化)
onchange: function(){ // onchange:当页码变更后自动触发的方法
$scope.reloadlist();
}
};
// 刷新列表方法
$scope.reloadlist=function(){
$scope.findpage($scope.paginationconf.currentpage,$scope.paginationconf.itemsperpage);
}
// 分页方法，作用是请求后端数据
$scope.findpage=function(page,rows){ // 方法名findpage可以自定义
$http.get('../brand/findpage.do?page='+page+'&rows='+rows).success(
function(response){ // 注意：请求参数中的rows与响应数据的rows的区别
$scope.list=response.rows; // 显示当前页数据
$scope.paginationconf.totalitems=response.total; // 更新总记录数
}
);
}
在页面的body元素上去掉ng-init指令的调用。
4. 增加品牌
4.1 需求分析
实现品牌增加功能
4.2 后端代码
4.2.1 服务接口层
在 pinyougou-sellergoods-interface 的 brandservice.java 新增方法定义
/**
* 增加品牌
* @param brand
*/
void add(tbbrand brand);
4.2.2 服务实现层
在 com.pinyougou.sellergoods.service.impl 的 brandserviceimpl.java 实现该方法
@override
public void add(tbbrand brand) {
// 判断品牌名称是否重复：方法一：代码逻辑上判断，如下；方法二：数据库设置品牌表的name属性为唯一约束
tbbrandexample example = new tbbrandexample();
criteria criteria = example.createcriteria();
criteria.andnameequalto(brand.getname());
list<tbbrand> list = brandmapper.selectbyexample(example);
// 判断查询结果
if (list == nul
相关文章:
-
-
BZOJ2208: [Jsoi2010]连通数(tarjan bitset floyd)
题意 "题目链接" Sol 数据水的一批，$O(n^3)$暴力可过 实际上只要bitset优化一下floyd复杂度就是对的了($O(\frac{n^... [阅读全文] -
程序目标： 控件的属性值与对象的属性值双向绑定使窗口控件的属性值与对象的属性值保持一致。对窗口控件属性值更改后立即更新对象的属性值，对对象... [阅读全文]
-
Spring Cloud实战之初级入门（六）— 服务网关zuul
[toc] 1.环境介绍 好了，不知不觉中我们已经来到了最后一篇文章，也来到了最一个工程"mirco service zuul"，zuul是一个服务... [阅读全文] -
Microsoft Bot Framework V4使用ITranscriptLogger进行日志记录
在Bot V3版本中我们可以通过实现IActivityLogger接口在进行，但是在Bot V4版本中已经没有这个接口了。 不过在V4中可以使用Tr... [阅读全文] -
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
发表评论