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/(?<segment>.*),/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"><</span>CategoryEntity<span class="token punctuation">></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"><</span>String<span class="token punctuation">,</span> Object<span class="token operator">></span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span> IPage<span class="token operator"><</span>CategoryEntity<span class="token operator">></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"><</span>CategoryEntity<span class="token operator">></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"><</span>CategoryEntity<span class="token operator">></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"><</span>CategoryEntity<span class="token operator">></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"><</span>CategoryEntity<span class="token operator">></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"><</span>CategoryEntity<span class="token operator">></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">></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">></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">></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"><</span>CategoryEntity<span class="token operator">></span> <span class="token function">getChildren</span><span class="token punctuation">(</span>CategoryEntity menu<span class="token punctuation">,</span> List<span class="token operator"><</span>CategoryEntity<span class="token operator">></span> allCategory<span class="token punctuation">)</span> <span class="token punctuation">{</span> List<span class="token operator"><</span>CategoryEntity<span class="token operator">></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">></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">></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">></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>