大家好,又见面了,我是你们的朋友全栈君。
一:导入pms_category数据库
二:获取三级列表数据
1.在CategoryController修改list方法
代码语言:javascript复制/** * 查出所有分类以及子分类,以树状结构组装起来 * @return */
@RequestMapping("/list/tree")
public R list(){
List<CategoryEntity> entities = categoryService.listWithTree();
return R.ok().put("data", entities);
}
2.在CategoryEntity添加子分类信息
代码语言:javascript复制/** * 当前菜单的所有子分类 * @TableField(exist = false) * 数据表不存在此字段 */
@TableField(exist = false)
private List<CategoryEntity> children;
3.在CategoryServiceImpl重写listWithTree方法
代码语言:javascript复制/** * 查询所有清单 * @return */
List<CategoryEntity> listWithTree();
代码语言:javascript复制@Override
public List<CategoryEntity> listWithTree() {
//1.查出所有分类
List<CategoryEntity> entities = categoryDao.selectList(null);
//2.组装成父子的结构
//2.1找到所有的一级分类
List<CategoryEntity> level1Menus = entities.stream().filter((categoryEntity) -> {
return categoryEntity.getParentCid() == 0;
}).map((menu)->{
menu.setChildren(getChildrens(menu,entities));
return menu;
}).sorted((menu1,menu2)->{
return (menu1.getSort() == null ? 0 : menu1.getSort()) -(menu2.getSort() == null?0:menu2.getSort());
}).collect(Collectors.toList());
return level1Menus;
}
/** * 递归拆询所有菜单的子菜单 * @return */
private List<CategoryEntity> getChildrens(CategoryEntity root , List<CategoryEntity> all){
List<CategoryEntity> children = all.stream().filter((categoryEntity) -> {
return categoryEntity.getParentCid().equals(root.getCatId());
}).map((categoryEntity)->{
//找到子菜单
categoryEntity.setChildren(getChildrens(categoryEntity,all));
return categoryEntity;
}).sorted((menu1,menu2)->{
//菜单排序
return (menu1.getSort() == null ? 0 : menu1.getSort()) -(menu2.getSort() == null?0:menu2.getSort());
}).collect(Collectors.toList());
return children;
}
3.启动gulimail-product项目
代码语言:javascript复制http://127.0.0.1:10000/product/category/list/tree
三:前端模块开发
1.启动renren-fast模块
2.启动renren-fast-vue模块
打开vscode,使用npm run dev
开启项目
3.搭建菜单
1.在系统管理模块添加商品系统目录
2.在商品系统模块添加分类维护菜单
注:product/category路径的/会被替换为product-category 3.在src/views/modules下新建product商品文件夹,然后创建category.vue文件
4.创建树形模板
打开https://element.eleme.cn/#/zh-CN/component/tree
的Tree树形控件,复制相关代码
<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
</template>
<script> export default {
/** * 数据集合 */ data() {
return {
data: [], defaultProps: {
children: "children", label: "label", }, }; }, /** * 生命周期 */ created(){
/** * 创建组件时,会调用此方法 */ this.getMenus(); }, /** * 方法集合 */ methods: {
handleNodeClick(data) {
console.log(data); }, /** * 获取三级三单 */ getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"), method: "get", }).then(data=>{
console.log("成功获取到菜单数据。。。" data); }); }, }, }; </script>
<style> </style>
注:此时访问/product/category/list/tree会接口404异常,涉及到跨域等问题 5.打开static/config/index.js修改发送请求得地址,统一发送给gateway网关,由网关发送给需要调用的接口
代码语言:javascript复制/**
* 开发环境
*/
;(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;
})();
6.重启项目后发现图片验证码无法加载,此时我们需要对renren-fast项目的pom文件进行配置
4.修复图片验证码无法加载问题
默认将网关的请求转向renren-fast项目 1.在renren-fast项目中配置相关依赖
代码语言:javascript复制<!--引入common依赖--> <dependency> <groupId>com.sysg.gulimail</groupId> <artifactId>gulimail-common</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency>
2.将renren-fast项目添加到nacos配置中心当中 1)在application添加name和nacos地址
代码语言:javascript复制spring:
application:
name: renren-fast
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
2)在主启动类添加注解@EnableDiscoveryClient
代码语言:javascript复制package io.renren;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
/** * @EnableDiscoveryClient * 用于服务的注册和发现 */
@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {
public static void main(String[] args) {
SpringApplication.run(RenrenApplication.class, args);
}
}
3)重启renren-fast项目,在nacos的服务列表查看renren-fast
4)在gateway的application.yml文件中添加配置
代码语言:javascript复制spring:
cloud:
gateway:
#路由规则
routes:
## 前端项目,/api
- id: admin_route
uri: lb://renren-fast
predicates:
- Path=/api/**
filters:
#路径重写
- RewritePath=/api/(?<segment>.*),/renren-fast/${segment}
## http://localhost:88/captcha.jpg http://localhost:8080/renrne-fast/captcha.jpg
注:此时发生了跨域问题,所以无法访问
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164736.html原文链接:https://javaforall.cn