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()">去掉
运行系统
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理