谷粒商城微服务分布式基础篇六——三级分类查询

商城三级分类查询

前端

整合 element-ui

1、安装

npm i element-ui -S

   
   

   
   
1

2、在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
el: ‘#app’,
render: h => h(App)
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3、renren-fastvue已经整合，在src\views\modules\product\下创建category.vue

<!-- 分类维护-三级菜单  -->
<template>
<el-tree :data="menus" :props="defaultProps" ></el-tree>

</template>

<script>
export default {
data() {
return {
menus: [],
defaultProps:{
children:“children”,
label:“name”
}
};
},
created () {
this.getMenus();
},
methods: {
getMenus() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ation">.</span>http.adornUrl("/product/category/list/tree"),
method: “get”
}).then(({ data }) => {
console.log(“成功获取到菜单数据…”, data.data);
this.menus = data.data;
});
},
}
};
</script>
<style lang=‘scss’ scoped>
</style>

• 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

属性值参见官网

renren-fast

启动renren-fast前端服务和后端服务创建菜单

后端

Spring gateway

使用Spring gateway网关同一请求到网关再转发到具体服务，具体使用Spring gateway见谷粒商城分布式基础篇三

配置文件

gateway服务application.yml配置文件

spring:
  cloud:
    gateway:
      routes:
        - id: product_route
          #lb 表示转发至服务 服务也许注册到nacos
          uri: lb://mall-product
          predicates:
            #当请求为指定路径 断言为真 **代表任意 这个路径需往上写提高优先级不被/api/**给拦截
            - Path=/api/product/**
          filters:
            #断言为真，重写路径/api/(?<segment>.*)改为/$\{segment}
            #例请求http://localhost:88/api/product/category/list/tree会改为
            #http://mall-product端口/product/category/list/tree
            - RewritePath=/api/(?<segment>.*),/$\{segment}
    - id: admin_route
      uri: lb://renren-fast
      predicates:
        - Path=/api/**
      filters:
        - RewritePath=/api/(?&lt;segment&gt;.*),/renren-fast/$\{segment}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

在这里遇到一个错误，无法实例化renren-fast
是因为renren-fast服务找不到，第一反应是renren-fast服务没有注册到nacos服务，检查注册成功，排除。
检查gatway配置中文配置转发服务是否配置错误，检查成功，排除。
百度有一中情况服务名使用下划线，转发失败，检查为中划线，排除。
最后发现gatway和renren-fast注册nacos不同的命名空间，导致网关找不到服务，改为相同命名空间public，转发成功。

在renrenfast-vue static\config\index.js中修改统一请求url为http://localhost:88/api

/**
 * 开发环境
 */
;(function () {
  window.SITE_CONFIG = {};

// api接口请求地址
window.SITE_CONFIG[‘baseUrl’] = ‘http://localhost:88/api’;

// cdn地址 = 域名 + 版本号
window.SITE_CONFIG[‘domain’] = ‘./’; // 域名
window.SITE_CONFIG[‘version’] = ‘’; // 版本号(年月日时分)
window.SITE_CONFIG[‘cdnUrl’] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

跨域问题

解决跨域问题



项目使用第二种方法：在gatway项目创建跨域配置类

@Configuration
public class MallCorsConfiguration {
<span class="token annotation punctuation">@Bean</span>
<span class="token keyword">public</span> CorsWebFilter <span class="token function">corsWebFilter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//响应式编程</span>
    UrlBasedCorsConfigurationSource source <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">UrlBasedCorsConfigurationSource</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    CorsConfiguration corsConfiguration <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CorsConfiguration</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token comment">//配置跨域</span>
    <span class="token comment">//任意请求头</span>
    corsConfiguration<span class="token punctuation">.</span><span class="token function">addAllowedHeader</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//任意请求方法</span>
    corsConfiguration<span class="token punctuation">.</span><span class="token function">addAllowedMethod</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//任意请求来源</span>
    corsConfiguration<span class="token punctuation">.</span><span class="token function">addAllowedOrigin</span><span class="token punctuation">(</span><span class="token string">"*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//是否允许携带cookie</span>
    corsConfiguration<span class="token punctuation">.</span><span class="token function">setAllowCredentials</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    source<span class="token punctuation">.</span><span class="token function">registerCorsConfiguration</span><span class="token punctuation">(</span><span class="token string">"/**"</span><span class="token punctuation">,</span>corsConfiguration<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CorsWebFilter</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 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

需引入第二个响应式包

两次请求


renrenfast后端服务需屏蔽原有配置 io.renren.config.CorsConfig

/**
 * Copyright (c) 2016-2019 人人开源 All rights reserved.
 *
 * https://www.renren.io
 *
 * 版权所有，侵权必究！
 */

package io.renren.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

// @Override
// public void addCorsMappings(CorsRegistry registry) {
// registry.addMapping("/**")
// .allowedOrigins("*")
// .allowCredentials(true)
// .allowedMethods(“GET”, “POST”, “PUT”, “DELETE”, “OPTIONS”)
// .maxAge(3600);
// }
}

• 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

商品服务

product项目中创建菜单controller

@RestController
@RequestMapping("product/category")
public class CategoryController {
    @Autowired
    private CategoryService categoryService;
<span class="token comment">/**
 * 查询所有分类以及子分类，以树形结构组装起来
 */</span>
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/list/tree"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> R <span class="token function">list</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    List<span class="token generics function"><span class="token punctuation">&lt;</span>CategoryEntity<span class="token punctuation">&gt;</span></span> entities <span class="token operator">=</span> categoryService<span class="token punctuation">.</span><span class="token function">listWithTree</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span> entities<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

serviceImpl

@Service("categoryService")
public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
@Override
<span class="token keyword">public</span> PageUtils <span class="token function">queryPage</span><span class="token punctuation">(</span>Map<span class="token operator">&lt;</span>String<span class="token punctuation">,</span> Object<span class="token operator">&gt;</span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    IPage<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> page <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">page</span><span class="token punctuation">(</span>
            <span class="token keyword">new</span> <span class="token class-name">Query</span><span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getPage</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token keyword">new</span> <span class="token class-name">QueryWrapper</span><span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">PageUtils</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 查询所有分类以及子分类，以树形结构组装起来
 */</span>
@Override
<span class="token keyword">public</span> List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> <span class="token function">listWithTree</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//1、查询所有的分类</span>
    List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> allCategory <span class="token operator">=</span> baseMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">//2、组装成父子的树形结构</span>
    <span class="token comment">//2.1、找到所有一级分类</span>
    List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> level1Menus <span class="token operator">=</span> allCategory<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>categoryEntity <span class="token operator">-</span><span class="token operator">&gt;</span>
            categoryEntity<span class="token punctuation">.</span><span class="token function">getParentCid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span>
    <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>menu<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        menu<span class="token punctuation">.</span><span class="token function">setChildren</span><span class="token punctuation">(</span><span class="token function">getChildren</span><span class="token punctuation">(</span>menu<span class="token punctuation">,</span> allCategory<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> menu<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sorted</span><span class="token punctuation">(</span><span class="token punctuation">(</span>menu1<span class="token punctuation">,</span> menu2<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token punctuation">(</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> level1Menus<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * 递归查找所有菜单的子菜单
 *
 * @param menu        菜单
 * @param allCategory 所有分类
 * @return 所有菜单的子菜单
 */</span>
<span class="token keyword">private</span> List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> <span class="token function">getChildren</span><span class="token punctuation">(</span>CategoryEntity menu<span class="token punctuation">,</span> List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> allCategory<span class="token punctuation">)</span> <span class="token punctuation">{</span>

    List<span class="token operator">&lt;</span>CategoryEntity<span class="token operator">&gt;</span> children <span class="token operator">=</span> allCategory<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>categoryEntity <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> categoryEntity<span class="token punctuation">.</span><span class="token function">getParentCid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">equals</span><span class="token punctuation">(</span>menu<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>categoryEntity <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        categoryEntity<span class="token punctuation">.</span><span class="token function">setChildren</span><span class="token punctuation">(</span><span class="token function">getChildren</span><span class="token punctuation">(</span>categoryEntity<span class="token punctuation">,</span> allCategory<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> categoryEntity<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sorted</span><span class="token punctuation">(</span><span class="token punctuation">(</span>menu1<span class="token punctuation">,</span> menu2<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token punctuation">(</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token punctuation">:</span> menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> children<span class="token punctuation">;</span>

<span class="token punctuation">}</span>

}

• 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
• 57
• 58
• 59
• 60
• 61

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>