电商项目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 "

<td><input  type="checkbox"  ></td>
                <td>{{pojo.id}}</td>
                <td>{{pojo.name}}</td>
                <td>{{pojo.firstChar}}</td>

 我们在页面加载完成的时候就默认调用分页显示,如果输入条件在按照条件查询

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