Spring Cloud Alibaba商城实战项目基础篇（day03）_springcloud alibaba 商城

五、后台管理

5.1、商品服务

5.1.1、三级分类

5.1.1.1、查询所有菜单与子菜单

我们需要维护所有菜单以及各种子菜单，子菜单里面可能还有子菜单，所以我们采用递归的方式进行书写。

我们先在CategoryController中修改list方法，让他以组装树形结构进行返回。

    /**
     * 查询列表，并且以树形结构进行返回
     */
    @RequestMapping("/list")
    public R list(){
        List<CategoryEntity> categoryEntityList = categoryService.listWithTree();
        return R.ok().put("categoryEntityList", categoryEntityList);
    }
1
2
3
4
5
6
7
8

由于数据库表中是没有子菜单这个属性，所以我们需要在实体类中添加这个属性，一般开发中可以重新写一个VO，更加解耦。在CategoryEntity中添加一个children属性，但是需要加一个注解，告诉Mybatis-plus，这个属性我的表中没有，不需要理他。

	/**
	 * 子分类
	 */
	@TableField(exist = false)
	private List<CategoryEntity> children;
1
2
3
4
5

CategoryService中写一个接口。

    /**
     * 查出所有分类，并且组装成父子结构
     * @return
     */
    List<CategoryEntity> listWithTree();
1
2
3
4
5

CategoryServiceImpl也顺带写一写。

 @Override
    public List<CategoryEntity> listWithTree() {
        // 查询所有
        List<CategoryEntity> categoryEntities = baseMapper.selectList(null);
        // 找到所有一级分类
        List<CategoryEntity> collect = categoryEntities.stream().filter((categoryEntity) -> {
            // 返回父分类id为0的，父id等于0说明他是一级分类
            return categoryEntity.getParentCid() == 0;
        }).map((menu)->{
            // 设置子菜单
           menu.setChildren(getChildren(menu,categoryEntities));
           return menu;
        }).sorted(Comparator.comparingInt(menu -> (menu.getSort() == null ? 0 : menu.getSort())))
                .collect(Collectors.toList());
        // 设置每一个父分类的子分类
        return collect;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

由于需要递归遍历，所以我们把遍历方法抽取出来。

  /**
     * 获取子菜单
     * @param currentMenu 当前菜单
     * @param allMenu 所有菜单
     * @return 所有子菜单
     */
    private List<CategoryEntity> getChildren(CategoryEntity currentMenu,List<CategoryEntity> allMenu){
        List<CategoryEntity> childrents = allMenu.stream().filter(categoryEntity -> categoryEntity.getParentCid() == currentMenu.getCatId())
                // 每个子菜单可能还有子菜单
                .map(categoryEntity -> {
                    categoryEntity.setChildren(getChildren(categoryEntity, allMenu));
                    return categoryEntity;
                })
                // 排序
                .sorted(Comparator.comparingInt(menu -> (menu.getSort() == null ? 0 : menu.getSort())))
                .collect(Collectors.toList());;
        return childrents;

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后启动商品服务就可以开始测试。

5.1.1.2、配置网关和路由重写

我们需要维护后台管理系统，启动renren-fast-vue项目和mall-admin后端项目，直接npm run dev开跑。我们首先写的功能是分类维护。

renren-fast-vue的页面规则是http://localhost:8001/#/product-category，页面在src/views/modules/product下的目录里面。

我们新建一个prodect文件夹和category.vue，用于保存目录管理页面。为了便于开发，我们队vscdoe进行一些配置。

首先是配置vue模板，输入vue时可以直接跳出模板。

输入vue可以直接开始配置模板。

把原来的注释掉，直接换成下面的这段配置。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

模板设置好以后，我们需要配置格式化，首先先安装一个插件，Vetur。

进入配置界面。进入json界面编辑。

把原来的注释掉，直接换成下面这段配置。

{
    // tab 大小为2个空格
  
    "editor.tabSize": 2,
  
    // 编辑器换行
  
    "editor.wordWrap": "off",
  
    // 保存时格式化
  
    "editor.formatOnSave": true,
  
    // 开启 vscode 文件路径导航
  
    "breadcrumbs.enabled": true,
  
    // prettier 设置语句末尾不加分号
  
    "prettier.semi": false,
  
    // prettier 设置强制单引号
  
    "prettier.singleQuote": true,
  
    // 选择 vue 文件中 template 的格式化工具
  
    "vetur.format.defaultFormatter.html": "js-beautify-html",
  
    // vetur 的自定义设置
  
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 30,
        "wrap_attributes": "auto",
        "end_with_newline": false
      },
  
      "prettier": {
        "singleQuote": true,
  
        "semi": false,
  
        "printWidth": 100,
  
        "wrapAttributes": false,
  
        "sortAttributes": false
      }
    },
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.completion.scaffoldSnippetSources": {
    
      "workspace": "
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/965239