品优购-Day02

最新推荐文章于 2019-05-13 12:29:59 发布

原创最新推荐文章于 2019-05-13 12:29:59 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用AngularJS前端框架进行品牌管理系统的开发过程，包括列表、分页、增删改查等功能实现，以及如何利用AngularJS的MVC模式、双向绑定等特性提升开发效率。

学习目标

目标1：运用AngularJS前端框架的常用指令
目标2：完成品牌管理的列表功能
目标3：完成品牌管理的分页列表功能
目标4：完成品牌管理的增加功能
目标5：完成品牌管理的修改功能
目标6：完成品牌管理的删除功能
目标7：完成品牌管理的条件查询功能

AngularJS四大特征
1. MVC模式：UI视图、控制器、数据模型
2. 双向绑定：通过控制器改变数据模型从而影响UI视图
3. 依赖注入：由控制器统一生成和spring一样
4. 模块化设计：ng（核心），ngRoute（路由），ngAnimate（动画），用户自定义模块，高内聚低耦合法则，模块之内的都是相关的，模块与模块之间少关联

入门Demo

新建demo-1.html

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>

2.双向绑定

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app>
 请输入姓名：<input ng-model="name" type="" name="">
 <input ng-model="name" type="" name="">
 {{name}}
</body>
</html>

3.初始化

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='test'">
 请输入姓名：<input ng-model="name" type="" name="">
 <input ng-model="name" type="" name="">
 {{name}}
</body>
</html>

4.控制器

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]); 
        //$scope控制层和视图层交换数据的桥梁
        app.controller('myController', function($scope){
            $scope.add=function(){
                return $scope.x+$scope.y;
            }
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
    第一个数:<input ng-model="x" >
    第二个数:<input ng-model="y" >
    {{add()}}
</body>
</html>

5.事件指令

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]); 
        //$scope控制层和视图层交换数据的桥梁
        app.controller('myController', function($scope){
            $scope.add=function(){
                $scope.z = Number($scope.x) + Number($scope.y);
            }
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
    第一个数:<input ng-model="x" >
    第二个数:<input ng-model="y" >
    <button ng-click="add()">运算</button>
    结果：{{z}}
</body>
</html>

6.循环数组

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]); 
        //$scope控制层和视图层交换数据的桥梁
        app.controller('myController', function($scope){
            $scope.list = [{'id':xxx,'name':xxx},{},313,131];
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
    <table>
        <tr ng-repeat="x in list">
            <td>{{x}}</td>
        </tr>
    </table>
</body>
</html>

7.循环对象数组

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]); 
        //$scope控制层和视图层交换数据的桥梁
        app.controller('myController', function($scope){
            $scope.list = [{"name":"cgx","age":"18"},{"name":"aj","age":"19"},{"name":"zbz","age":"20"}];
        })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" >
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="x in list">
            <td>{{x.name}}</td>
            <td>{{x.age}}</td>
        </tr>
    </table>
</body>
</html>

8.内置服务

    1.在web子模块创建demo8.html 导入angular.min.js文件==**注意JSON数据文件的格式**==

<!DOCTYPE html>
<html>
<head>
    <title>angularJS入门Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]); 
        //$scope控制层和视图层交换数据的桥梁
        app.controller('myController', function($scope,$http){
            $scope.findList = function(){
                $http.get("data.json").success(
                    function(response){
                        $scope.list = response;
                    }
                );
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="entity in list">
            <td>{{entity.name}}</td>
            <td>{{entity.age}}</td>
        </tr>
    </table>
</body>
</html>

一、实现品牌列表

1.拷贝静态原型-》运营商管理后台所有页面

2.在brand.html中引入angularjs

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

3.body中定义ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()"

var app = angular.module('pinyougou',[]);
app.controller('brandController',function($scope,$http){
    $scope.findAll=function(){
      $http.get('../brand/findAll.do').success(
        function(response){
          $scope.list = response;
        }
      )
    }
})

4.将多余的tr删掉，ng-repeat=“entity in list”

 <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>

二、实现品牌列表分页

1.在pojo模块中，新增entity包及PageResult类

package entity;
import java.io.Serializable;
import java.util.List;

public class PageResult implements Serializable{
    public PageResult(long total, List rows) {
        super();
        this.total = total;
        this.rows = rows;
    }
    private long total;
    private List 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;
    }
}

2.在pinyougou-sellergoods-interface中增加PageResult findPage(int pageNum,int pageSize);

3.在pinyougou-sellergoods-service中

    @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());
    }

4.在pinyougou-manager-web中

    @RequestMapping("/findPage")
    public PageResult findPage(int pageNum,int pageSize){
        return brandService.findPage(pageNum, pageSize);
    }

5.运行测试效果localhost:8090/pinyougou-manager-web/brand/findPage.do?pageNum=2&pageSize=5

6.在brand.html中引入分页组件

    <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">

7.构建app模块的时候加入pagination模块在brand.html页面中

//js文件部分加入分页组件得引入
var app=angular.module('pinyougou',['pagination']);//定义品优购模块
//分页组件加入到brand.html得104行
<tm-pagination conf="paginationConf" />

            在javascript部分加入分页相关配置
            //分页配置
            $scope.paginationConf = {
                    currentPage:1,                  //当前页
                    totalItems:10,                  //总记录数
                    itemsPerPage:10,                //每页记录数
                    perPageOptions:[10,20,30,40,50], //分页选项，下拉选择一页多少条记录
                    onChange:function(){            //页面变更后触发的方法
                        $scope.findPage();      //启动就会调用分页组件
                    }
            };
            
            $scope.findPage = function(){
                $http.get('../brand/findPage.do?pageNum='+$scope.paginationConf.currentPage
                +"&pageSize="+$scope.paginationConf.itemsPerPage).success(
                    function(response){
                        $scope.list = response.rows;
                        $scope.paginationConf.totalItems=response.total;
                    }       
                );
            }

三、实现品牌新增

1.新增Result类,返回提示用

package entity;
import java.io.Serializable;

public class Result implements Serializable{

    private boolean success;
    private String message;
    
    public Result(boolean success, String message) {
        super();
        this.success = success;
        this.message = message;
    }
    public boolean isSuccess() {
        return success;
    }
    public void setSuccess(boolean success) {
        this.success = success;
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}

2.pinyougou-sellergoods-interface编写新增方法

public void add(TbBrand brand);

3.pinyougou-sellergoods-service编写实现类

@Override
public void add(TbBrand brand) {
    brandMapper.insert(brand);      
}

4.pinyougou-manager-web

    @RequestMapping("/add")
    public Result add(@RequestBody TbBrand brand){
        try {
            brandService.add(brand);
            return new Result(true, "新增成功");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return new Result(false, "新增失败");
        }
    }

5.页面增加

            $scope.add = function(){
                $http.post('../brand/add.do',$scope.entity).success(
                    function(response){
                        if(response.success){
                            $scope.findPage();
                        }else{
                            alert(response.message);
                        }
                    }
                )
            }

6.两个input标签增加  ng-model="entity.name"    和    ng-model="entity.firstChar"

7.保存按钮  ng-click="add()"

8.新增按钮  ng-click="entity={}"，清空编辑框中的内容

四、实现品牌修改

1.pinyougou-sellergoods-interface增加

    public TbBrand findOne(Long id);
    public void update(TbBrand brand);

2.pinyougou-sellergoods-service增加

    @Override
    public TbBrand findOne(Long id) {
        // TODO Auto-generated method stub
        return brandMapper.selectByPrimaryKey(id);
    }

    @Override
    public void update(TbBrand brand) {
        // TODO Auto-generated method stub
        brandMapper.updateByPrimaryKey(brand);
    }

3.pinyougou-manager-web增加

    @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) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return new Result(false, "修改失败");
        }
    }

4.页面增加

            $scope.save = function(){//修改之前的add方法，增加id为空的判断新增修改都走这个
                var methodName = 'add.do';
                if($scope.entity.id != null){
                    methodName = 'update.do';
                }
                
                $http.post('../brand/'+methodName,$scope.entity).success(
                    function(response){
                        if(response.success){
                            $scope.findPage();
                        }else{
                            alert(response.message);
                        }
                    }
                )
            }
            
            $scope.findOne = function(id){
                $http.get('../brand/findOne.do?id='+id).success(
                    function(response){
                        $scope.entity = response;
                    }
                )
            }

5.修改按钮增加 ng-click="findOne(entity.id)"

五、实现品牌删除

1.pinyougou-sellergoods-interface增加public void delete(Long [] ids);

2.pinyougou-sellergoods-service增加

@Override
    public void delete(Long[] ids) {
        // TODO Auto-generated method stub
        for (Long id : ids) {
            brandMapper.deleteByPrimaryKey(id);
        }
    }

3.pinyougou-manager-web增加

    @RequestMapping("/delete")
    public Result delete(Long [] ids){
        try {
            brandService.delete(ids);
            return new Result(true,"删除成功");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return new Result(false,"删除失败");
        }
    }

4.页面增加

            $scope.selectIds = [];
            $scope.updateSelection = function($event,id){
                if($event.target.checked){
                    $scope.selectIds.push(id);
                }else{
                    var idx = $scope.selectIds.indexOf(id);//查找id所在位置
                    $scope.selectIds.splice(idx,1); //从位置开始，移除多少个
                }
            }
            
            $scope.dele = function(){
                if(confirm('确定要删除吗')){
                    $http.get('../brand/delete.do?ids='+$scope.selectIds).success(
                            function(response){
                                if(response.success){
                                    $scope.findPage();
                                    $scope.selectIds=[]; //清空所有ID的选择
                                }
                                alert(response.message);
                            }
                    )
                }
            }
            
            //是否选中为了翻页后回来还能勾选上
            $scope.isChecked = function(id){
                if($scope.selectIds.indexOf(id)!= -1){
                    return true;    
                }
                return false;
            }

5.删除按钮增加ng-click="dele()"

6.复选框增加ng-click="updateSelection($event,entity.id)"  ng-checked="isChecked(entity.id)"

六、品牌条件查询

1.pinyougou-sellergoods-interface中修改findPage方法增加实体类

public PageResult findPage(TbBrand brand,int pageNum,int pageSize);

2.pinyougou-sellergoods-service中增加

    @Override
    public PageResult findPage(TbBrand brand, int pageNum, int pageSize) {
        // TODO Auto-generated method stub
        PageHelper.startPage(pageNum,pageSize);
        
        TbBrandExample example = new TbBrandExample();
        Criteria criteria = example.createCriteria();
        
        if(brand!=null){
            if(brand.getName()!=null && brand.getName().length() > 0){
                criteria.andNameLike("%"+brand.getName()+"%");
            }
            if(brand.getFirstChar()!=null && brand.getFirstChar().length() > 0){
                criteria.andFirstCharEqualTo(brand.getFirstChar());
            }
        }
        
        Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(example);
        
        return new PageResult(page.getTotal(), page.getResult());
    }

3.pinyougou-manager-web中修改findPage方法

    @RequestMapping("/findPage")
    public PageResult search(@RequestBody TbBrand brand, int pageNum,int pageSize){
        return brandService.findPage(brand,pageNum, pageSize);
    }

4.页面修改之前的findPage方法

            $scope.searchEntity={};  //解决初始请求参数为空的问题
            $scope.findPage = function(){
                $http.post('../brand/findPage.do?pageNum='+$scope.paginationConf.currentPage+"&pageSize="+$scope.paginationConf.itemsPerPage,$scope.searchEntity).success(
                    function(response){
                        $scope.list = response.rows;
                        $scope.paginationConf.totalItems = response.total; 
                    }       
                )
            }

7.增加查询按钮

品牌名称:<input ng-model="searchEntity.name"> 
品牌首字母:<input ng-model="searchEntity.firstChar">
<button class="btn btn-default" ng-click="findPage()">查询</button>