技术汇总:第五章:使用angularjs做首页三级分类

简介: 技术汇总:第五章:使用angularjs做首页三级分类

页面:

<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="js/service/userService.js"></script>
<script type="text/javascript" src="js/controller/userController.js"></script>
<div class="item bo" ng-repeat="entity in list">
<!-- 去重 -->
  <h3><a href=""  ng-hide="list[$index].catOneName == list[$index+1].catOneName">{{entity.catOneName}}</a></h3> 
  <div class="item-list clearfix">
  <div class="subitem">
  <dl class="fore">
<!-- 去重 -->
  <dt><a href="" ng-hide="list[$index].catTwoName == list[$index+1].catTwoName">{{entity.catTwoName}}</a></dt>
    <dd><em><a href="">{{entity.catThreeName}}</a></em></dd>
  </dl>
  </div>
  </div>
</div>

实体类:

public class TbItemCat implements Serializable{
    private Long id;
    private Long parentId;
    private String name;
    private Long typeId;

sql做自连接查询:

mapper.xml

  <select id="selectAll" resultType="java.util.HashMap">
    SELECT 
    cat1.`id` catOneId,cat1.`name` catOneName,cat1.`parent_id` parentIdOne,cat2.id catTwoId,cat2.`name` catTwoName,cat2.`parent_id` parentIdTwo,cat3.id catThreeId,cat3.`name` catThreeName,cat3.`parent_id` parentIdThree
    FROM tb_item_cat cat1,tb_item_cat cat2,tb_item_cat cat3 
    WHERE cat1.`id`=cat2.`parent_id` AND cat2.id=cat3.`parent_id`
  </select>

mapper接口:

List<Map<String,TbItemCat>> selectAll();

impl实现类:

 @Override
    public List<Map<String,TbItemCat>> selectAll() {
        List<Map<String,TbItemCat>> selectAll = itemCatMapper.selectAll();
        return selectAll;
    }

controller控制层:

   @RequestMapping("/findAll")
    public List<Map<String,TbItemCat>> findAll(){
        List<Map<String,TbItemCat>> selectAll = itemCatService.selectAll();
        return selectAll;
    }

contentController.js


/

app.controller("contentController",function($scope,contentService){
    $scope.list = [];
    $scope.findAll=function(){
        contentService.findAll().success(function(response){
            //将相应的数据放到list里面
            $scope.list = response;
        });
    }
});

contentService.js

app.service("contentService",function($http){ 
    this.findAll = function(){
        return $http.get("content/findAll.do");
    }
});

控制层获取的数据和数据库的数据一样,一条一条的用list集合接收,但是发现页面经过去重之后,数据不对,换了另一种思路

创建一级分类的实体类

public class TbItemCatOneExample  implements Serializable {
    private Long id;
    private Long parentId;
    private String name;
    private Long typeId;
    private List<TbItemCat> tbItemCats2;

创建二级分类的实体类

public class TbItemCatTwoExample implements Serializable{
  private Long id;
    private Long parentId;
    private String name;
    private Long typeId;
    private List<TbItemCat> tbItemCats3;

创建三级分类实体类

public class TbItemCat implements Serializable{
    private Long id;
    private Long parentId;
    private String name;
    private Long typeId;

控制层controller

  @RequestMapping("/findAll")
  public List<TbItemCatOneExample> findAll(){
    List<TbItemCatOneExample> selectAll = itemCatService.selectAll();
    System.out.println(selectAll);
    return selectAll;
  }

service接口

    /**
     * 首页三级分类
     * @return
     */
    public List<TbItemCatOneExample> selectAll();

serviceImpl实现类

  @Override
  public List<TbItemCatOneExample> selectAll() {
    //从库中获取的数据
    List<TbItemCatOneExample> selectAll = itemCatMapper.selectAll();
    return selectAll;
  }

mapper接口

List<TbItemCatOneExample> selectAll();

mapper.xml

   <resultMap id="BaseResultMap1" type="com.pinyougou.pojo.TbItemCatOneExample" >
    <id column="catOneId" property="id" jdbcType="BIGINT" />
    <result column="parentIdOne" property="parentId" jdbcType="BIGINT" />
    <result column="catOneName" property="name" jdbcType="VARCHAR" />
    <collection property="tbItemCats2" ofType="com.pinyougou.pojo.TbItemCatTwoExample" javaType="java.util.ArrayList">
      <id column="catTwoId" property="id" jdbcType="BIGINT" />
      <result column="parentIdTwo" property="parentId" jdbcType="BIGINT" />
      <result column="catTwoName" property="name" jdbcType="VARCHAR" />
            <collection property="tbItemCats3" ofType="com.pinyougou.pojo.TbItemCat" javaType="java.util.ArrayList">
        <id column="catThreeId" property="id" jdbcType="BIGINT" />
        <result column="parentIdThree" property="parentId" jdbcType="BIGINT" />
        <result column="catThreeName" property="name" jdbcType="VARCHAR" />
      </collection>
    </collection>
  </resultMap>
  <select id="selectAll" resultMap="BaseResultMap1">
    SELECT 
    cat1.`id` catOneId,cat1.`name` catOneName,cat1.`parent_id` parentIdOne,cat2.id catTwoId,cat2.`name` catTwoName,cat2.`parent_id` parentIdTwo,
    cat3.id catThreeId,cat3.`name` catThreeName,cat3.`parent_id` parentIdThree
    FROM tb_item_cat cat1,tb_item_cat cat2,tb_item_cat cat3 
    WHERE cat1.`id`=cat2.`parent_id` AND cat2.id=cat3.`parent_id`
  </select>

在控制台获取到想要的数据了




但是页面展示发现angularjs不能再class中传递,需要修改样式,去除class,有点小尴尬

页面

<div  ng-repeat="entity in list">
  <h3><a href=""  >{{entity.name}}</a></h3> 
  <div  ng-repeat="cat2 in entity.tbItemCats2" >
  <div   >
  <dl  >
  <dt><a href="" >{{cat2.name}}</a></dt>
  <dd  ng-repeat="cat3 in cat2.tbItemCats3"><em><a href="">{{cat3.name}}</a></em></dd>
  </dl>
  </div>
  </div>
</div>
相关文章
|
4月前
|
JavaScript
vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
55 0
|
6月前
|
前端开发 UED 开发者
深度剖析Angular表单控件:从模板驱动到响应式表单的最佳实践,带你全面掌握Angular表单处理机制,提升前端开发效率与用户体验的终极指南
【8月更文挑战第31天】本文通过代码示例详细介绍了 Angular 中两种主要的表单处理方式:模板驱动表单和响应式表单。模板驱动表单适用于简单场景,可在 HTML 模板中直接定义表单控件并实现数据绑定和验证。响应式表单基于 RxJS,提供更灵活的表单管理和复杂的逻辑处理。通过具体示例展示了每种方式的最佳实践,帮助开发者简化表单处理,提高开发效率和用户体验。
55 0
|
9月前
|
容器
AngularJS模块的概念与组织技术详解
【4月更文挑战第27天】本文深入讲解AngularJS模块的概念和组织技术。模块是代码的容器,封装组件、服务和配置,促进应用的模块化开发,提升可维护性和可测试性。文章介绍了模块的定义、组件添加、配置、依赖关系创建及应用启动。遵循保持模块独立、合理划分、避免循环依赖和文档化的最佳实践,以优化代码组织和可读性。
|
9月前
|
JavaScript 前端开发 UED
AngularJS路由管理:深度解析$routeProvider的应用与实践
【4月更文挑战第28天】本文深入解析AngularJS的$routeProvider,它是AngularJS路由系统的关键,用于定义应用的视图和路径。通过routeProvider,开发者能根据URL变化动态加载内容,实现单页应用效果。配置$routeProvider涉及导入angular-route.js,注入&quot;ngRoute&quot;依赖,并使用when方法定义路由规则。ng-view指令用于显示路由打开的页面,而otherwise方法处理未定义路由,提供默认响应。$routeProvider使导航体验优化,助力构建高效Web应用。
|
JSON 前端开发 JavaScript
angularjs购物车功能(全)包含 (修改,添加等功能)
angularjs购物车功能(全)包含 (修改,添加等功能)
46 0
uniapp公共新闻模块components案例
本文使用uniapp的公共新闻模块讲解components案例。
285 0
uniapp公共新闻模块components案例
|
开发工具 git
【Vue3.0移动端项目--旅游网】-- 房东评价、热门评论、预定须知模块
【Vue3.0移动端项目--旅游网】-- 房东评价、热门评论、预定须知模块
135 0
【Vue3.0移动端项目--旅游网】-- 房东评价、热门评论、预定须知模块
|
JavaScript 前端开发
前端-vue基础44-综合案例图书管理3补充新的知识
前端-vue基础44-综合案例图书管理3补充新的知识
118 0
前端-vue基础44-综合案例图书管理3补充新的知识
|
前端开发 数据安全/隐私保护 CDN
Angular最新教程-第六节编写响应式导航栏
Angular最新教程-第六节编写响应式导航栏
440 0
Angular最新教程-第六节编写响应式导航栏
|
JavaScript IDE 开发工具
挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module(实战篇)
这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲。如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点。
162 0

热门文章

最新文章