1.前端展示分類管理信息

1.目前項目架構

2.啟動前后端項目

1.啟動mysql容器

2.啟動后端 renren-fast

3.啟動前端

1.界面

2.用戶名密碼都是admin

3.創建分類管理菜單

1.菜單管理 -> 新增 -> 新增目錄

2.刷新

3.能夠新增菜單的原因是前端腳手架與renren-fast后端腳手架通信，這個菜單的表是 sys_menu

4.新增分類管理菜單

5.關于這個分類管理的路由解析

1.由于設置的菜單路由是commodity/category，所以點擊這個菜單就會查找前端項目的renren-fast-vue\src\views\modules\commodity\category.vue

2.一般這個菜單路由是對應于后端的一個controller的前綴

3.而后端controller的前綴是根據表來自動生成的

比如表是commodity_category就會生成commodity/category

4.總結：代碼生成器會根據一個表來生成一個controller，一個前端菜單界面

6.將生成的commodity文件夾下面的兩個文件放到前端項目的modules下

7.分析category.vue

1.找到向后端發送請求的位置

2.進入adornUrl

• 目前肯定是開發環境，經過全局搜索，發現沒有開啟代理，所以走的是window.SITE_CONFIG.baseUrl

3.進入baseUrl

• 可以查看到baseUrl是http://localhost:8080/renren-fast

4.瀏覽器測試請求一下

• 完全匹配

5.注銷掉這個url，自己寫一個

• 請求sunliving-commodity的服務端口在9091，來展示數據

6.啟動后端的sunliving-commodity模塊

7.再次點擊分類管理菜單，發現出現跨域錯誤

8.跨域問題解決

1.復制renren-fast模塊的src/main/java/io/renren/config/CorsConfig.java

2.粘貼到sunliving-commodity模塊下

3.重啟后端sunliving-commodity

4.再次點擊分類管理

2.使用樹形菜單展示分類（初級）

1.思路分析

2.首先返回所有記錄（沒有層級）

1.com/sun/sunliving/commodity/service/CategoryService.java 新增方法

    /*** 查詢所有分類及其子分類，以樹形結構組裝** @return*/List<CategoryEntity> listTree();

2.com/sun/sunliving/commodity/service/impl/CategoryServiceImpl.java 新增方法和屬性

    @Resourceprivate CategoryDao categoryDao; // 注入 CategoryDao的代理對象@Overridepublic List<CategoryEntity> listTree() {// 先查詢所有記錄List<CategoryEntity> categoryEntities = categoryDao.selectList(null);return categoryEntities;}

3.com/sun/sunliving/commodity/controller/CategoryController.java 新增方法

    /*** 查詢所有分類及其子分類，以樹形結構組裝** @return*/@RequestMapping("/list/tree")public R listTree(){return R.ok().put("data", categoryService.listTree());}

4.postman測試 http://localhost:9091/commodity/category/list/tree

3.關于com/sun/common/utils/R.java 工具類的解析

/*** Copyright (c) 2016-2019 人人開源 All rights reserved.* <p>* https://www.renren.io* <p>* 版權所有，侵權必究！*/package com.sun.common.utils;import org.apache.http.HttpStatus;import java.util.HashMap;
import java.util.Map;/*** 返回數據** @author Mark sunlightcs@gmail.com*/
public class R extends HashMap<String, Object> {private static final long serialVersionUID = 1L;/*** 無參構造方法，初始化 code 為 0，msg 為 success*/public R() {put("code", 0);put("msg", "success");}/*** 返回一個錯誤的 R 對象* @return 返回一個code:500, msg:未知異常，請聯系管理員的R對象*/public static R error() {return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知異常，請聯系管理員");}/*** 返回一個錯誤的 R 對象* @param msg* @return 返回一個code:500, msg:msg的R對象*/public static R error(String msg) {return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);}/*** 返回一個錯誤的 R 對象* @param code 錯誤碼* @param msg 錯誤信息* @return 返回一個code:code, msg:msg的R對象*/public static R error(int code, String msg) {R r = new R();r.put("code", code);r.put("msg", msg);return r;}/*** 返回一個正確的 R 對象* @param msg 錯誤信息* @return 返回一個code:code, msg:msg的R對象*/public static R ok(String msg) {R r = new R();r.put("msg", msg);return r;}/*** 返回一個正確的 R 對象* @param map* @return 返回一個code:0, msg:success的R對象*/public static R ok(Map<String, Object> map) {R r = new R();r.putAll(map);return r;}/*** 返回一個正確的 R 對象* @return 返回一個code:0, msg:success的R對象*/public static R ok() {return new R();}/*** 重寫 put 方法，給父類的HashMap來賦值，然后返回自身對象，方便鏈式調用，* 簡稱父類key-value賦值，return this* @param key* @param value* @return*/@Overridepublic R put(String key, Object value) {super.put(key, value);return this;}
}

4.com/sun/sunliving/commodity/entity/CategoryEntity.java 新增字段

• 新增一個字段，表示每條記錄后面都跟著多條子記錄

	/*** 每一條記錄后都有一些子記錄*/@TableField(exist = false) // 表示數據庫中沒有這個字段private List<CategoryEntity> childrenCategories;

3.流式計算streamAPI

1.基本介紹

2.環境搭建

package com.sun.streamAPI;import java.util.Arrays;
import java.util.List;/*** Description:** @Author sun* @Create 2024/4/10 15:27* @Version 1.0*/
public class testStream {public static void main(String[] args) {// 創建幾個person對象Person person1 = new Person(1, "張三", 18);Person person2 = new Person(2, "李四", 19);Person person3 = new Person(3, "王五", 20);Person person4 = new Person(4, "趙六", 21);Person person5 = new Person(5, "孫七", 22);// 將其放到集合中List<Person> personList = Arrays.asList(person1, person2, person3, person4, person5);// 輸出for (Person person : personList) {System.out.println(person);}}
}
class Cat {private Integer id;private String name;private String color;public Cat(Integer id, String name, String color) {this.id = id;this.name = name;this.color = color;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getColor() {return color;}public void setColor(String color) {this.color = color;}@Overridepublic String toString() {return "Cat{" +"id=" + id +", name='" + name + '\'' +", color='" + color + '\'' +'}';}
}
class Person {private Integer id;private String name;private Integer age;private Cat cat;public Person(Integer id, String name, Integer age) {this.id = id;this.name = name;this.age = age;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public Cat getCat() {return cat;}public void setCat(Cat cat) {this.cat = cat;}@Overridepublic String toString() {return "Person{" +"id=" + id +", name='" + name + '\'' +", age=" + age +", cat=" + cat +'}';}
}

3.filter 過濾

1.過濾，只要集合中id大于2的

        // 過濾，只要集合中id大于2的節點List<Person> collect = personList.stream().filter(person -> {return person.getId() > 2;}).collect(Collectors.toList());System.out.println(collect);

2.結果

3.分析

• 首先使用personList.stream()將list轉換成流對象
• 然后調用filter()方法進行過濾
• 使用person -> {過濾條件}，其中person為需要過濾的節點
• 使用return person.getId() > 2 作為過濾條件，意為只要person節點大于2的
• 最后調用collect(Collectors.toList())方法，將過濾后的結果收集到一個新的集合中
• 注意：只有過濾操作時原來的list不發生變化

4.map 映射

1.映射，將person過濾出的節點的cat屬性賦值

        // 過濾，只要集合中id大于2的節點List<Person> collect = personList.stream().filter(person -> {return person.getId() > 2;}).map(person -> {// 映射一下，將person過濾出的節點的cat屬性賦值// 1.創建cat節點Cat cat = new Cat(person.getId() + 100, "cat", "red");// 2.為person節點設置cat屬性person.setCat(cat);// 3.返回處理后的person節點return person;}).collect(Collectors.toList());System.out.println("處理后的：list => " + collect);System.out.println("處理前的：list => " + personList);

2.結果

3.分析

• 在過濾的基礎上調用map(person -> {映射邏輯})方法對過濾后的person節點進行處理
• 首先創建了一個Cat節點Cat cat = new Cat(person.getId() + 100, “cat”, “red”)
• 然后為person節點設置cat屬性person.setCat(cat)
• 最后將映射后的person節點返回return person
• 繼續調用collect(Collectors.toList())將結果收集到一個新的集合中
• 注意：映射操作后原來的list也會發生變化

5.sorted 排序

1.排序，按照person節點的id降序排列

        // 過濾，只要集合中id大于2的節點List<Person> collect = personList.stream().filter(person -> {return person.getId() > 2;}).map(person -> {// 映射一下，將person過濾出的節點的cat屬性賦值// 1.創建cat節點Cat cat = new Cat(person.getId() + 100, "cat", "red");// 2.為person節點設置cat屬性person.setCat(cat);// 3.返回處理后的person節點return person;}).sorted((p1, p2) -> {// 按照person節點的id降序排列return p2.getId() - p1.getId();}).collect(Collectors.toList());System.out.println("處理后的：list => " + collect);System.out.println("處理前的：list => " + personList);

2.結果

3.分析

• 調用 sorted((p1, p2) -> {排序方式}) 進行排序操作
• return p2.getId() - p1.getId() 表示對節點進行降序排列
• return p1.getId() - p2.getId() 表示對節點進行升序排列

6.常用api

1.limt 過濾前兩個節點然后遍歷輸出

        // 過濾前兩個節點然后遍歷輸出personList.stream().limit(2).forEach(person -> {System.out.println(person);});

2.count 統計節點個數

• 注意：如果是filter或者是limit后使用的count，那么統計的就是filter或者是limit后的數量

        // 統計集合的節點個數long count = personList.stream().count();System.out.println("count=" + count);

4.完成后端返回帶層級的記錄

1.com/sun/sunliving/commodity/service/impl/CategoryServiceImpl.java 修改listTree方法

    @Overridepublic List<CategoryEntity> listTree() {// 先查詢所有記錄，放到list中List<CategoryEntity> categoryEntities = categoryDao.selectList(null);// 使用streamapi + 遞歸處理分級菜單List<CategoryEntity> collect = categoryEntities.stream().filter(categoryEntity -> {// 過濾一級菜單return categoryEntity.getParentId() == 0;}).map(categoryEntity -> {// 遞歸處理分級菜單categoryEntity.setChildrenCategories(getChildrenCategories(categoryEntity, categoryEntities));return categoryEntity;}).sorted((category1, category2) -> {// 按照sort字段進行升序排列return (category1.getSort() == null ? 0 : category1.getSort()) -(category2.getSort() == null ? 0 : category2.getSort());}).collect(Collectors.toList());return collect;}

2.com/sun/sunliving/commodity/service/impl/CategoryServiceImpl.java 新增方法，獲取節點的所有子節點

    // 遞歸獲取一個節點的所有子節點public List<CategoryEntity> getChildrenCategories(CategoryEntity root, List<CategoryEntity> all) {List<CategoryEntity> collect = all.stream().filter(categoryEntity -> {// 過濾出一級節點的所有子節點return categoryEntity.getParentId() == root.getId();}).map(categoryEntity -> {// 遞歸設置每個子節點的子節點categoryEntity.setChildrenCategories(getChildrenCategories(categoryEntity, all));return categoryEntity;}).sorted((category1, category2) -> {// 按照sort字段進行升序排列return (category1.getSort() == null ? 0 : category1.getSort()) -(category2.getSort() == null ? 0 : category2.getSort());}).collect(Collectors.toList());return collect;}

3.啟動項目完成測試

1.啟動mysql容器

2.啟動前端

3.啟動后端renren-fast和sunliving-commodity

4.啟動renren-fast報錯數據庫連接失敗

5.由于代碼根本沒改，所以判斷是數據庫的問題，查了一下ip原來是101，結果變成100了

6.修改一下連接url即可

7.postman測試 http://localhost:9091/commodity/category/list/tree

8.提交代碼

5.前端展示分類信息

1.集成樹形控件

1.進入 Element-ui 樹形控件

2.首先將category.vue備份，然后新創建一個

3.將第一行復制到模板位置

4.將其余的復制到script位置

5.打開前端頁面查看

2.根據返回數據修改category.vue

<template><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template><script>
export default {data() {return {data: '',defaultProps: {children: 'childrenCategories',label: 'name'}};},methods: {handleNodeClick(data) {console.log(data);},// 獲取分類列表（帶層級）getCategories() {this.$http({url: 'http://localhost:9091/commodity/category/list/tree',method: 'get'}).then(({data}) => { // 解構了datathis.data = data.data;})}},created() { // 生命周期鉤子，初始化時調用this.getCategories()}
};
</script><style scoped></style>

3.前端查看效果