B2B2C-2 品牌管理-2-品牌列表的实现

1.将品牌列表对应的静态原型文件拷贝到manager-web项目的webapp目录下

2.在brand.html文件中引入angular.min.js文件

<head>标签中添加

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

3.brand.html文件中变更angular文件

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">

4.添加控制器

<head>文件中添加

<script>   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;            }         );      }   });

</script>

5.重启项目，访问

6.品牌列表分页实现

6.1:后端代码实现

1>前端传给后端的数据: 当前页pageNum 每页记录数pageSize

2>后端给前端的数据: 总记录数total 当前页记录rows

方法:1.map传递，2.实体类

开发step:

1>pojo工程中:创建分页结果类PageResult 实现序列化接口:

long total 总记录数

List rows 当前页记录

2>brand-api<sellergoods-api>工程中:BrandService中添加接口findPage

PageResult findPage(int pageNum,int pageSize)；

pageNum:当前页数

pageSize:每页记录数

3>brand-service<sellergoods-service>工程中:BrandServiceImpl中实现findPage接口

public PageResult findPage(int pageNum,int pageSize){

　　//使用page-dao工程中的pageHelper分页工具，具体注册信息见下述说明

PageHelper.startPage(pageNum,pageSize);Page<TbBrand> page = (Page<TbBrand>) tbBrandMapper.selectAll();return new PageResult(page.getTotal(),page.getResult());

}

在dao工程中的resources的mybatis目录下的SqlMapConfig.xml文件中配置如下内容

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration>   <plugins>      <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->      <plugin interceptor="com.github.pagehelper.PageHelper">         <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->         <property name="dialect" value="mysql"/>      </plugin>   </plugins></configuration>

4>manager-web工程中:BrandController中实现接口

@RequestMapping("/findPage")public PageResult findPage(int page,int size){    System.out.println("请求品牌分页");    return brandService.findPage(page,size);}

5>install上述改动的项目，重启service和manager-web项目

测试列表分页接口是否成功

访问url: http://localhost:9101/manager/brand/findPage.do?page=1&size=2

6.2:前端代码实现

使用anlularjs文件夹下的pagenation.js和pagenation.css

1>将上述两文件引入brand.html:

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

2>构建app模块时引入pagination模块:

['pagination']

3>页面的表格下放置分页组件:

<tm-pagination conf="paginationConf"></tm-pagination>

4>分页控件配置:

$scope.paginationConf = {    currentPage: 1,当前页    totalItems: 10,总记录数    itemsPerPage: 10,每页的记录数    perPageOptions: [10, 20, 30, 40, 50], 分页选项(可控制修改每页显示的记录数)     onChange: function(){当页码变更后自动触发的方法

    }};5>调用后端findPage方法并封装

 $scope.reloadList=function(){             $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);};         $scope.findPage=function(page,size){             $http.get("../brand/findPage.do?page="+page+"&size="+size).success(                 function(response){         $scope.paginationConf.totalItems=response.total;         $scope.paginationConf.list=response.rows;      }   );};

6>onChange中调用:

$scope.paginationConf = {    currentPage: 1,    totalItems: 10,    itemsPerPage: 10,    perPageOptions: [10, 20, 30, 40, 50],    onChange: function(){        $scope.reloadList();//重新加载    }};7>将ng-init去掉

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" ng-init="findAll()">去掉

运行系统

转载于:https://www.cnblogs.com/healthinfo/p/9708924.html

B2B2C-2 品牌管理-2-品牌列表的实现相关推荐

【第四篇】商城系统-品牌管理实现
业务开发-基础业务-品牌管理本篇文章详细介绍了品牌管理的功能实现. 品牌管理 1. 品牌管理基本操作首先完成品牌的基本的操作.就是通过renren-fast-generator项目不光能生成表 ...
谷粒商城项目篇6_分布式基础完结篇_商品服务模块（品牌管理、平台属性、新增商品）、仓储服务模块（仓库管理）
目录商品服务模块品牌管理品牌对应三级目录的增删改查平台属性数据库表关系规格参数增删改查销售属性属性分组新增商品获取三级分类及品牌商品json存储格式数据库表设计商品服务调用 ...
【深入解析品牌战略】品牌战略建设不可或缺的六要素
在当今市场竞争日益激烈的背景下,建立品牌战略已经成为企业生存和发展的重要途径.然而,许多企业缺乏对品牌战略性的指引和规划,仅是跟随同行的步伐而缺少独立思考.这种盲目跟风的做法,往往会使企业的品牌战略显 ...
【Lilishop商城】No3-5.模块详细设计，商品模块-1（商品分类、品牌管理、规格管理、参数、计量单位、店铺分类）的详细设计
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括 ...
第5章-商品服务-品牌管理
第5章商品服务-品牌管理文章目录第5章商品服务-品牌管理 1. 使用逆向工程的代码 1.1 导入代码 1.2 显示状态优化 2. 文件上传技术 2.1 阿里云---对象存储OSS 云存储开启 ...
青橙项目之品牌管理前端 day2
学习掌握目标 1.Element-Ui组件了解与使用 2.ES6与ES5语法 3.品牌管理的前端代码 4.图片上传代码,本地和阿里云存储 5.掌握阿里云oss存储未完成 1.ElementUI简介 ...
为品牌管理增加检索名称和状态项
为品牌管理增加检索名称和状态项如果你的品牌数量很多,不好管理,并且想在网站前台只显示被激活的品牌,则本扩充功能可以实现您的想法. Key Features: 1. Filter manufactur ...
【渝粤教育】电大中专品牌管理与推广 (2)作业题库
1通常,对品牌的排他专有性的保护手段主要是注册商标.申请专利.授权经营,等等.该说法() A正确 B错误正确正确答案:左边查询学生答案:A 2品牌服务是以服务而不是以产品为主要特征的品牌,如商业 ...
乔春洋：品牌管理创新
乔春洋:品牌管理创新管理是创建品牌的保证,是品牌创新的生命线. 品牌创新是一项包括产品.组织.技术.价值.文化等多种创新在内的复杂的经济系统工程,它涉及品牌经营活动的程序化和程序化运用 ...

B2B2C-2 品牌管理-2-品牌列表的实现

B2B2C-2 品牌管理-2-品牌列表的实现相关推荐

最新文章

热门文章