前提：启动renren-fast前后端

路由设置

这一节演示了如何通过renren-fast-vue新建组件和导航目录菜单

1. 商品系统新增侧边导航目录

image.png

2. 商品系统新增分类维护菜单

image.png
之后，在分类维护中维护商品的三级分类。

3. 前端脚手架路由规范

当点击侧边栏目录新增的分类维护时，会跳转到 /product-category，对应新增菜单设置的路由 product/category.
image.png
页面：对应前端项目 src->views->modules->product->category.vue 页面组件

API网关配置和跨域配置

这一节会解决一个前端向多个后端服务请求的问题(API网关)，此外还有网关服务与前端前后分离的跨域问题。

1. 前端工程配置API网关作为唯一接口

打开 static->config->index.js 配置统一请求地址 

  1. // api网关作为接口请求地址，由网关分发到不同服务
  2. window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

2. 将renren-fast接入网关服务配置

这里是因为配置第一步的网关地址后，renren-fast-vue 本身要请求到 renren-fast 的请求也会转到网关，所以这里要配置网关转发到renren-fast的接口。

将renren-fast注册为nacos服务

  1. 引入 common依赖

  2. 配置nacos地址，

    1. spring:  
    2. application:
    3.  name: renren-fast
    4. cloud:
    5.  nacos:
    6.    discovery:
    7.      server-addr: 192.168.163.131:8848

  3. 主启动类增加开启注解。

    1. @EnableDiscoveryClient
    2. @SpringBootApplication
    3. public class RenrenApplication {
    4.  public static void main(String[] args) {
    5.      SpringApplication.run(RenrenApplication.class, args);
    6.  }
    7. }

    网关增加路由断言转发不同服务

    mall-gateway application.yaml
    前端 /api/** 请求会被转发到renren-fast服务 /renren-fast/**
    前端 /api/product/** 请求会被转发到mall-product服务 /product/**

    1. spring:
    2.  cloud:
    3.  gateway:
    4.    routes:
    5.        - id: product_route
    6.        uri: lb://mall-product
    7.        predicates:
    8.          - Path=/api/product/**
    9.        filters:
    10.          - RewritePath=/api/(?<segment>.*),/$\{segment}
    12.      - id: admin_route
    13.        uri: lb://renren-fast
    14.        predicates:
    15.          - Path=/api/**
    16.        filters:
    17.          - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

    3. 网关服务配置跨域

    1. @Configuration
    2. public class MallCorsConfiguration {
    3.  @Bean // 添加过滤器
    4.  public CorsWebFilter corsWebFilter(){
    5.      // 基于url跨域，选择reactive包下的
    6.      UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
    7.      // 跨域配置信息
    8.      CorsConfiguration corsConfiguration = new CorsConfiguration();
    9.      // 允许跨域的头
    10.      corsConfiguration.addAllowedHeader("*");
    11.      // 允许跨域的请求方式
    12.      corsConfiguration.addAllowedMethod("*");
    13.      // 允许跨域的请求来源
    14.      corsConfiguration.addAllowedOrigin("*");
    15.      // 是否允许携带cookie跨域
    16.      corsConfiguration.setAllowCredentials(true);
    18.     // 任意url都要进行跨域配置
    19.      source.registerCorsConfiguration("/**",corsConfiguration);
    20.      return new CorsWebFilter(source);
    21.  }
    22. }

    如果springboot版本高于2.4的话 corsConfiguration.addAllowedOrigin(““);要替换成corsConfiguration.addAllowedOriginPattern(““);

renren-fast跨域配置删除

删除 src/main/java/io/renren/config/CorsConfig.java 中的配置内容
这里会导致请求头添加重复，导致跨域失败

Access to XMLHttpRequest at ‘http://localhost:88/api/sys/login‘ from origin ‘http://localhost:8001‘ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:8001, http://localhost:8001‘, but only one is allowed.

前端页面

  1. <template>
  2.   <div>
  3.     <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
  4.     <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
  5.     <el-button type="danger" @click="batchDelete">批量删除</el-button>
  6.     <el-tree
  7.       :data="menus"
  8.       :props="defaultProps"
  9.       :expand-on-click-node="false"
  10.       show-checkbox
  11.       node-key="catId"
  12.       :default-expanded-keys="expandedKey"
  13.       :draggable="draggable"
  14.       :allow-drop="allowDrop"
  15.       @node-drop="handleDrop"
  16.       ref="menuTree"
  17.     >
  18.       <span class="custom-tree-node" slot-scope="{ node, data }">
  19.         <span>{{ node.label }}</span>
  20.         <span>
  21.           <el-button
  22.             v-if="node.level <=2"
  23.             type="text"
  24.             size="mini"
  25.             @click="() => append(data)"
  26.           >Append</el-button>
  27.           <el-button type="text" size="mini" @click="edit(data)">edit</el-button>
  28.           <el-button
  29.             v-if="node.childNodes.length==0"
  30.             type="text"
  31.             size="mini"
  32.             @click="() => remove(node, data)"
  33.           >Delete</el-button>
  34.         </span>
  35.       </span>
  36.     </el-tree>
  38.     <el-dialog
  39.       :title="title"
  40.       :visible.sync="dialogVisible"
  41.       width="30%"
  42.       :close-on-click-modal="false"
  43.     >
  44.       <el-form :model="category">
  45.         <el-form-item label="分类名称">
  46.           <el-input v-model="category.name" autocomplete="off"></el-input>
  47.         </el-form-item>
  48.         <el-form-item label="图标">
  49.           <el-input v-model="category.icon" autocomplete="off"></el-input>
  50.         </el-form-item>
  51.         <el-form-item label="计量单位">
  52.           <el-input v-model="category.productUnit" autocomplete="off"></el-input>
  53.         </el-form-item>
  54.       </el-form>
  55.       <span slot="footer" class="dialog-footer">
  56.         <el-button @click="dialogVisible = false">取 消</el-button>
  57.         <el-button type="primary" @click="submitData">确 定</el-button>
  58.       </span>
  59.     </el-dialog>
  60.   </div>
  61. </template>
  63. <script>
  64. //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  65. //例如：import 《组件名称》 from '《组件路径》';
  67. export default {
  68.   //import引入的组件需要注入到对象中才能使用
  69.   components: {},
  70.   props: {},
  71.   data() {
  72.     return {
  73.       pCid: [],
  74.       draggable: false,
  75.       updateNodes: [],
  76.       maxLevel: 0,
  77.       title: "",
  78.       dialogType: "", //edit,add
  79.       category: {
  80.         name: "",
  81.         parentCid: 0,
  82.         catLevel: 0,
  83.         showStatus: 1,
  84.         sort: 0,
  85.         productUnit: "",
  86.         icon: "",
  87.         catId: null
  88.       },
  89.       dialogVisible: false,
  90.       menus: [],
  91.       expandedKey: [],
  92.       defaultProps: {
  93.         children: "children",
  94.         label: "name"
  95.       }
  96.     };
  97.   },
  99.   //计算属性 类似于data概念
  100.   computed: {},
  101.   //监控data中的数据变化
  102.   watch: {},
  103.   //方法集合
  104.   methods: {
  105.     getMenus() {
  106.       this.$http({
  107.         url: this.$http.adornUrl("/product/category/list/tree"),
  108.         method: "get"
  109.       }).then(({data}) => {
  110.         console.log("成功获取到菜单数据...", data.data);
  111.         this.menus = data.data;
  112.       });
  113.     },
  114.     batchDelete() {
  115.       let catIds = [];
  116.       let checkedNodes = this.$refs.menuTree.getCheckedNodes();
  117.       console.log("被选中的元素", checkedNodes);
  118.       for (let i = 0; i < checkedNodes.length; i++) {
  119.         catIds.push(checkedNodes[i].catId);
  120.       }
  121.       this.$confirm(`是否批量删除【${catIds}】菜单?`, "提示", {
  122.         confirmButtonText: "确定",
  123.         cancelButtonText: "取消",
  124.         type: "warning"
  125.       })
  126.         .then(() => {
  127.           this.$http({
  128.             url: this.$http.adornUrl("/product/category/delete"),
  129.             method: "post",
  130.             data: this.$http.adornData(catIds, false)
  131.           }).then(({data}) => {
  132.             this.$message({
  133.               message: "菜单批量删除成功",
  134.               type: "success"
  135.             });
  136.             this.getMenus();
  137.           });
  138.         })
  139.         .catch(() => {
  140.         });
  141.     },
  142.     batchSave() {
  143.       this.$http({
  144.         url: this.$http.adornUrl("/product/category/update/sort"),
  145.         method: "post",
  146.         data: this.$http.adornData(this.updateNodes, false)
  147.       }).then(({data}) => {
  148.         this.$message({
  149.           message: "菜单顺序等修改成功",
  150.           type: "success"
  151.         });
  152.         //刷新出新的菜单
  153.         this.getMenus();
  154.         //设置需要默认展开的菜单
  155.         this.expandedKey = this.pCid;
  156.         this.updateNodes = [];
  157.         this.maxLevel = 0;
  158.         // this.pCid = 0;
  159.       });
  160.     },
  161.     handleDrop(draggingNode, dropNode, dropType, ev) {
  162.       console.log("handleDrop: ", draggingNode, dropNode, dropType);
  163.       //1、当前节点最新的父节点id
  164.       let pCid = 0;
  165.       let siblings = null;
  166.       if (dropType == "before" || dropType == "after") {
  167.         pCid =
  168.           dropNode.parent.data.catId == undefined
  169.             ? 0
  170.             : dropNode.parent.data.catId;
  171.         siblings = dropNode.parent.childNodes;
  172.       } else {
  173.         pCid = dropNode.data.catId;
  174.         siblings = dropNode.childNodes;
  175.       }
  176.       this.pCid.push(pCid);
  178.       //2、当前拖拽节点的最新顺序，
  179.       for (let i = 0; i < siblings.length; i++) {
  180.         if (siblings[i].data.catId == draggingNode.data.catId) {
  181.           //如果遍历的是当前正在拖拽的节点
  182.           let catLevel = draggingNode.level;
  183.           if (siblings[i].level != draggingNode.level) {
  184.             //当前节点的层级发生变化
  185.             catLevel = siblings[i].level;
  186.             //修改他子节点的层级
  187.             this.updateChildNodeLevel(siblings[i]);
  188.           }
  189.           this.updateNodes.push({
  190.             catId: siblings[i].data.catId,
  191.             sort: i,
  192.             parentCid: pCid,
  193.             catLevel: catLevel
  194.           });
  195.         } else {
  196.           this.updateNodes.push({catId: siblings[i].data.catId, sort: i});
  197.         }
  198.       }
  200.       //3、当前拖拽节点的最新层级
  201.       console.log("updateNodes", this.updateNodes);
  202.     },
  203.     updateChildNodeLevel(node) {
  204.       if (node.childNodes.length > 0) {
  205.         for (let i = 0; i < node.childNodes.length; i++) {
  206.           var cNode = node.childNodes[i].data;
  207.           this.updateNodes.push({
  208.             catId: cNode.catId,
  209.             catLevel: node.childNodes[i].level
  210.           });
  211.           this.updateChildNodeLevel(node.childNodes[i]);
  212.         }
  213.       }
  214.     },
  215.     allowDrop(draggingNode, dropNode, type) {
  216.       //1、被拖动的当前节点以及所在的父节点总层数不能大于3
  218.       //1）、被拖动的当前节点总层数
  219.       console.log("allowDrop:", draggingNode, dropNode, type);
  220.       //
  221.       this.countNodeLevel(draggingNode);
  222.       //当前正在拖动的节点+父节点所在的深度不大于3即可
  223.       let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
  224.       console.log("深度：", deep);
  226.       //   this.maxLevel
  227.       if (type == "inner") {
  228.         // console.log(
  229.         //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
  230.         // );
  231.         return deep + dropNode.level <= 3;
  232.       } else {
  233.         return deep + dropNode.parent.level <= 3;
  234.       }
  235.     },
  236.     countNodeLevel(node) {
  237.       //找到所有子节点，求出最大深度
  238.       if (node.childNodes != null && node.childNodes.length > 0) {
  239.         for (let i = 0; i < node.childNodes.length; i++) {
  240.           if (node.childNodes[i].level > this.maxLevel) {
  241.             this.maxLevel = node.childNodes[i].level;
  242.           }
  243.           this.countNodeLevel(node.childNodes[i]);
  244.         }
  245.       }
  246.     },
  247.     edit(data) {
  248.       console.log("要修改的数据", data);
  249.       this.dialogType = "edit";
  250.       this.title = "修改分类";
  251.       this.dialogVisible = true;
  253.       //发送请求获取当前节点最新的数据
  254.       this.$http({
  255.         url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
  256.         method: "get"
  257.       }).then(({data}) => {
  258.         //请求成功
  259.         console.log("要回显的数据", data);
  260.         this.category.name = data.data.name;
  261.         this.category.catId = data.data.catId;
  262.         this.category.icon = data.data.icon;
  263.         this.category.productUnit = data.data.productUnit;
  264.         this.category.parentCid = data.data.parentCid;
  265.         this.category.catLevel = data.data.catLevel;
  266.         this.category.sort = data.data.sort;
  267.         this.category.showStatus = data.data.showStatus;
  268.         /**
  269.          *         parentCid: 0,
  270.          catLevel: 0,
  271.          showStatus: 1,
  272.          sort: 0,
  273.          */
  274.       });
  275.     },
  276.     append(data) {
  277.       console.log("append", data);
  278.       this.dialogType = "add";
  279.       this.title = "添加分类";
  280.       this.dialogVisible = true;
  281.       this.category.parentCid = data.catId;
  282.       this.category.catLevel = data.catLevel * 1 + 1;
  283.       this.category.catId = null;
  284.       this.category.name = "";
  285.       this.category.icon = "";
  286.       this.category.productUnit = "";
  287.       this.category.sort = 0;
  288.       this.category.showStatus = 1;
  289.     },
  291.     submitData() {
  292.       if (this.dialogType == "add") {
  293.         this.addCategory();
  294.       }
  295.       if (this.dialogType == "edit") {
  296.         this.editCategory();
  297.       }
  298.     },
  299.     //修改三级分类数据
  300.     editCategory() {
  301.       var {catId, name, icon, productUnit} = this.category;
  302.       this.$http({
  303.         url: this.$http.adornUrl("/product/category/update"),
  304.         method: "post",
  305.         data: this.$http.adornData({catId, name, icon, productUnit}, false)
  306.       }).then(({data}) => {
  307.         this.$message({
  308.           message: "菜单修改成功",
  309.           type: "success"
  310.         });
  311.         //关闭对话框
  312.         this.dialogVisible = false;
  313.         //刷新出新的菜单
  314.         this.getMenus();
  315.         //设置需要默认展开的菜单
  316.         this.expandedKey = [this.category.parentCid];
  317.       });
  318.     },
  319.     //添加三级分类
  320.     addCategory() {
  321.       console.log("提交的三级分类数据", this.category);
  322.       this.$http({
  323.         url: this.$http.adornUrl("/product/category/save"),
  324.         method: "post",
  325.         data: this.$http.adornData(this.category, false)
  326.       }).then(({data}) => {
  327.         this.$message({
  328.           message: "菜单保存成功",
  329.           type: "success"
  330.         });
  331.         //关闭对话框
  332.         this.dialogVisible = false;
  333.         //刷新出新的菜单
  334.         this.getMenus();
  335.         //设置需要默认展开的菜单
  336.         this.expandedKey = [this.category.parentCid];
  337.       });
  338.     },
  340.     remove(node, data) {
  341.       var ids = [data.catId];
  342.       this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
  343.         confirmButtonText: "确定",
  344.         cancelButtonText: "取消",
  345.         type: "warning"
  346.       })
  347.         .then(() => {
  348.           this.$http({
  349.             url: this.$http.adornUrl("/product/category/delete"),
  350.             method: "post",
  351.             data: this.$http.adornData(ids, false)
  352.           }).then(({data}) => {
  353.             this.$message({
  354.               message: "菜单删除成功",
  355.               type: "success"
  356.             });
  357.             //刷新出新的菜单
  358.             this.getMenus();
  359.             //设置需要默认展开的菜单
  360.             this.expandedKey = [node.parent.data.catId];
  361.           });
  362.         })
  363.         .catch(() => {
  364.         });
  366.       console.log("remove", node, data);
  367.     }
  368.   },
  369.   //生命周期 - 创建完成（可以访问当前this实例）
  370.   created() {
  371.     this.getMenus();
  372.   },
  373.   //生命周期 - 挂载完成（可以访问DOM元素）
  374.   mounted() {
  375.   },
  376.   beforeCreate() {
  377.   }, //生命周期 - 创建之前
  378.   beforeMount() {
  379.   }, //生命周期 - 挂载之前
  380.   beforeUpdate() {
  381.   }, //生命周期 - 更新之前
  382.   updated() {
  383.   }, //生命周期 - 更新之后
  384.   beforeDestroy() {
  385.   }, //生命周期 - 销毁之前
  386.   destroyed() {
  387.   }, //生命周期 - 销毁完成
  388.   activated() {
  389.   } //如果页面有keep-alive缓存功能，这个函数会触发
  390. };
  391. </script>
  392. <style scoped>
  393. </style>