D56-项目一（03）前端MVC思想和实现，控制器继承，规格管理部分实现

一、前端分层开发

• 原因：html代码和js代码放在一起，不利于后期的维护。
• 进行代码分离，提高可维护性
  
• 前端分层开发：
  1. controller:控制器：封装和处理数据
  2. service:服务层：与后端进行请求交互。
  好处：代码逻辑职责更明确，代码复用性更强

1.1 前端代码分离

• 创建如下包结构
  

前端基础层

• 即定义模块

//定义模块  参数一：模块名称
// 参数二：依赖的其他模块 注意：如果没有依赖其他模块，也需要制定空数组
var app = angular.module("pinyougou", []);

//上面截图中，第二个依赖的分页插件，其他一样。

前端服务层

//自定义服务层
app.service("brandService", function ($http) {
    //查询所有品牌列表地
    this.findAll = function () {
        return $http.get("../brand/findAll.do");
    }
    //分页查询
    this.findPage = function (pageNum, pageSize) {
        return $http.get("../brand/findPage.do?pageNum=" + pageNum + "&pageSize=" + pageSize);
    }
........
}    

前端控制层

定义父控制器(控制器继承)

• 控制器继承
• • 伪继承：实现思路是共享$scope变量
• 目的：存放一些经常使用的代码，如分页配置，复选框勾选等

app.controller("baseController",function ($scope) {
	....

}

• brandController.js

//定义控制器 基于模块定义控制器
//参数一：控制器名称 参数二：控制器要做的事情
//$scope 理解为全局的作用域对象  作用：用于js与html的数据交换桥梁
app.controller("brandController",function ($scope,$controller, brandService) {

    //定义控制器继承  参数一：继承的父控制器名称 参数二：共享$scope变量资源
    $controller("baseController",({$scope : $scope}));

    //定义对象数组
    //json格式数组:[] json格式对象：{}
    $scope.findAll = function () {
        //success 请求成功后的回调函数
        brandService.findAll().success(function (response) {
            $scope.list = response;
        })
    }
    //请求后端，完成分页查询
    $scope.findPage = function (pageNum, pageSize) {
        brandService.findPage(pageNum, pageSize).success(function (response) {
            //赋值满足条件的总记录数
            $scope.paginationConf.totalItems = response.total;
            //当前页的结果
            $scope.list = response.rows;
        })
    }

修改页面

既然前端使用了MVC思想，则页面需要引入对应的资源。

<script type="text/javascript" src="../js/base_pagination.js"></script>
    <script type="text/javascript" src="../js/service/brandService.js"></script>
    <script type="text/javascript" src="../js/controller/baseController.js"></script>
    <script type="text/javascript" src="../js/controller/brandController.js"></script>

如果不引用会报“xxx为定义”错误！