如何實現列表三級分類---後端+前端

對於分類來講，通常包括一級分類，二級分類，三級分類，大部分網站都是左邊點擊二級分類，右邊顯示相對應商品下面就來爲你們詳細分析一下該如何實現吧。如圖:html

分析圖前端

1.1後端實現：JavaBean

與數據庫匹配字段vue
用於封裝，每個分類，對應多個子分類java

1.2後端實現：

數據庫中的數據必須交特殊的，先錄入父分類，再錄入子分類，爲了保證全部的子分類，能夠在遍歷找到父分類，數據須要排序。數據庫

步驟一： mapper，通用mapperapache

@org.apache.ibatis.annotations.Mapper
public interface CategoryMapper extends Mapper<Category> {
}

步驟二：service ,後端

@Service
@Transactional
public class CategoryService {

    @Resource
    private CategoryMapper categoryMapper;

    /**
     * 查詢全部分類（一級分類-->二級分類-->三級分類）
     * @return
     */
    public List<Category> findAll(){
        //1 查詢全部（安排父分類id排序）先查詢到一級分類
        Example example = new Example(Category.class);
        example.setOrderByClause("parent_id asc");
        List<Category> list = categoryMapper.selectByExample(example);

        //2 組裝數據
        // 2.1 提供新集合，組裝後的數據
        List<Category> returnList = new ArrayList<>();
        // 2.2 提供Map進行緩存，子分類能夠快速找到父分類
        Map<Integer,Category> cacheMap = new HashMap<>();

        //2.3 組裝
        for(Category category : list ) {
            //若是父分類id爲0，表示一級分類
            if (category.getParentId() == 0) {
                returnList.add( category );
            }

            //將本身添加到map緩存中，方便子分類找到本身
            cacheMap.put(category.getId() , category);

            //子分類從緩存map得到父分類
            Category parentCategory = cacheMap.get(category.getParentId());
            if(parentCategory != null) {
                parentCategory.getChildren().add(category);
            }


        }

        return returnList;
    }


}

步驟三：controllerapi

@RestController
@RequestMapping("/categorys")
public class CategoryController {

    @Resource
    private CategoryService categoryService;

    @GetMapping
    public BaseResult findAll(){
        //查詢
        List<Category> list = categoryService.findAll();
        //返回
        return BaseResult.ok("查詢成功", list );
    }

}

經過Postman 測試數組

我使用Visual Studio Code 軟件,使用Vue-cli腳手架搭建前端項目

步驟一：在plugins建立 api.server.js，編寫服務端api.js，緩存
步驟二：編寫服務端api.js，修改nuxt.config.js 配置僅服務器可用

步驟三：修改 api.server.js，查詢全部的分類

步驟四：~pages/index.vue，使用asyncData進行查詢

步驟五： ~pages/index.vue，設置HeaderSearch組件 list 屬性（至關於實參

 <HeaderSearch :list="categoryList"></HeaderSearch>

步驟六：修改 HeaderSearch組件，聲明list屬性（至關於造成）

export default {
  props: {
    list: {   //屬性list，屬性值類型爲數組Array
      type: Array
    }
  }
}

步驟七：修改 HeaderSearch組件，遍歷展現數據

<!-- 分類列表（一級分類）start ， <div class="cat item1"> -->
<div class="cat item1" v-for="(c1,i1) in list" :key="i1">
	<h3><a href="">{{c1.catName}}</a> <b></b></h3>
	<div class="cat_detail">
		<!-- 分類詳情（二級分類）start -->
		<dl class="dl_1st" v-for="(c2,i2) in c1.children" :key="i2">
			<dt><a href="">{{c2.catName}}</a></dt>
			<dd>
				<!-- 三級分類 start -->
				<a href="list.html" v-for="(c3,i3) in c2.children" :key="i3">{{c3.catName}}</a>
				<!-- 三級分類 end -->
			</dd>
		</dl>
		<!-- 分類詳情（二級分類）end -->
	</div>
</div>
<!-- 分類列表（一級分類）end -->

如圖: