电商项目day02(angularjs入门及品牌页面)
一.Angularjs入门以及常用的命令
1.简介
AngularJS 诞生于2009 年，由 Misko Hevery 等人创建，后为 Google所收购。是一款优
秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心
的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。
2.四大特性
1. mvc模式:
Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过
依赖注入（dependency injection），Angular 为客户端的Web 应用带来了传统服务端的服务，
例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的 Web应用。
2.数据的双向绑定
AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软
件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向
的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，
AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。
3.依赖注入
依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指某个对象依赖的其他对象无
需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并
注入进来,其实就是最少知识法则;模块中所有的 service 和 provider 两类对象，都可以根据形
参名称实现 DI.
4.模块化设计
高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])
3.常用的指令
表达式的写法:{ { 表达式}} 这个可以获取值
ng-app:三个所用:
告诉元素的下一个指令归angulars管,
angularjs会识别,定义了应用程序的根元素.
网页加载完毕会自动引导
ng-model:绑定变量,这样用户在文本输入内容就绑定在变量上,并且表达式可以实时作为输出
ng-controller:用于指定所使用的控制器
$scope:的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会
立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.说白了就是html和js交互的桥梁
ng-init:初始化指令,让一些变量具有初始值
ng-click:事件指令,可以通过一个按钮的点击事件
ng-rerepeat:循环数组的变量,也可以循环对象数组
$http:内置服务,底层封装了ajax的实现细节
$event:事件方法
二.品牌页面的CRUD实现
我们首先通过mybatis的逆向工程 生成所有基于基础表的增删改查,添加到项目中,我们在手动添加一个搜索框,作为条件查询
页面效果图如下:
功能需求如下:
1.条件查询分页展示到列表
分析:
后台实现: 从前台传过来三个参数,tbBrand ,pageNum ,pageSize 我们不单独进行分页查询,为了不让代码冗余,我们可以通过一个方法,条件查询实现这个功能,当页面加载的时候,不输入条件,就是默认用前台发送的pageNum和pageSize,进行分页返回结果
前台实现: 通过定义一个模块,和控制器,然后进行内置服务发送请求,携带三个参数
var app = angular.module("pinyougou",['pagination']);
//定义控制器 参数一：控制器名称 参数二：控制器做的事情
//$scope angularjs内置对象，全局作用域对象 作用：html与js数据交换的桥梁
//$http angularjs发起请求的内置服务对象 全部都是异步ajax
app.controller("brandController",function ($scope,$http) {
//定义查询所有品牌列表的方法
$scope.findAll=function () {
//response接收响应结果
$http.get("../brand/findAll.do").success(function (response) {
$scope.list=response
})
}
//分页展示条
//分页配置
$scope.paginationConf = {
currentPage:1, //当前页
totalItems:10, //总记录数
itemsPerPage:10, //每页记录数
perPageOptions:[10,20,30,40,50], //分页选项，下拉选择一页多少条记录
onChange:function(){ //页面变更后触发的方法
$scope.reloadList(); //启动就会调用分页组件
}
};
//重新加载分页信息
/*$scope.reloadList=function () {
$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
}*/
//条件查询和分页展示
$scope.searchEntity={};//解决初始化参数为空的情况
$scope.reloadList=function () {
$http.post("../brand/search.do?pageNum="+$scope.paginationConf.currentPage+"&pageSize="+$scope.paginationConf.itemsPerPage,
$scope.searchEntity).success(function (response) {
$scope.list = response.rows;
$scope.paginationConf.totalItems=response.total;
})
}
});页面展示,通过ng-repeat="pojo in list "
{{pojo.id}}
{{pojo.name}}
{{pojo.firstChar}} 我们在页面加载完成的时候就默认调用分页显示,如果输入条件在按照条件查询
2.新增实现
后台:提交tbBrand 插入后,通过类封装,提示信息和booler值
前台:添加add点击事件
注意:下一次点击新建是,为了不让信息回显,我们在新建的时候添加点击事件,ng-click="entity={}"表示置空
3.修改实现
我们首先考虑修改和添加都是一个编辑页面,那么我们不能添加两个点击事件,实现,所以我们可以,通过是否携带id判断是新建还是修改,这个非常重要
后台实现: 两个操作,一个是页面的回显,一个修改后的数据通过条件id修改
前台实现: 编写一个保存方法,通过判断是否携带id判断,实现新建和修改的方法
修改前台代码:
//添加
$scope.save=function () {
//定义一个变量
var methodName="";
if($scope.entity.id!=null){
//修改
methodName="update.do";
}else{
//新增
methodName="add.do";
}
$http.post("../brand/"+methodName,$scope.entity).success(function (response) {
if (response.success){
//添加成功
$scope.reloadList();
}else{
//不成功
alert(response.message);
}
})
}
//通过id查找
$scope.findOne=function (id) {
$http.get("../brand/findOne.do?id="+id).success(function (response) {
$scope.entity=response;
})
}
});后台代码:
//通过id查找
@RequestMapping("/findOne")
public TbBrand findOne(Long id){
return brandService.findOne(id);
}
//修改
@RequestMapping("/update")
public Result update(@RequestBody TbBrand brand){
try {
brandService.update(brand);
return new Result(true,"修改成功");
} catch (Exception e) {
e.printStackTrace();
return new Result(false,"修改失败");
}
}注意事项:就是页面的回显问题,还有清除新建是编辑的信息
4.删除实现
分析:主要技术点就是,通过点击复选框,获得所有的选项的数组
后台:通过前台传回的数组,我们在service进行循环删除
前台:绑定删除的点击事件,勾选复选框时,向保存品牌的id列表的数组中添加id, js往数据中添加值,通过push()方法
取消勾选复选框时,向保存的品牌id数组中移除id js中从数组中移除值 splice(index,1)
注意:参数一:移除位置的元素的索引值 参数二:该位置移除几个元素
$event是一个事件对象,是又angulars提供的,我们直接使用就可以了
ng-click="updateSelection($event,pojo.id)表示添加一个点击事件,$event为angulars的事件,$event.target.checked相当于获取复选框的状态前端代码:
//定义复选框ids数组值
$scope.selectIds=[];
//跟新复选框状态
$scope.updateSelection=function ($event,id) {
//判断 选中的状态
if($event.target.checked){
//选中状态
$scope.selectIds.push(id);
}else{
//取消勾选,移除当前的id值,//参数一:移除当前位置的索引值,参数二:从该处移除几个值
var index = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(index,1);
}
}
//删除
$scope.delete=function () {
if (confirm("您确定要删除吗")){
$http.get("../brand/delete.do?ids="+$scope.selectIds).success(function (response) {
if (response.success){
//删除成功
$scope.reloadList();
}else{
//删除失败
//给提示消息
alert(response.message);
}
})
}
}后端核心代码:
//删除
@Override
public void delete(Long[] ids) {
if (ids!=null&&ids.length>0) {
for (Long id : ids) {
brandMapper.deleteByPrimaryKey(id);
}
}
}三.常见的错误
1.页面回显时,忘记置空新建的编辑条
2.一个编辑栏,同时点击保存按钮实现新建和修改的两个功能,通过判断是否有id来实现功能
四.今日总结
angulars常用的命令必须记住
理解四大特性
单表的增删改查非常熟悉
代码地址guthub:
https://github.com/wangwei620/pinyougou_self