「微服务网关实战六」网关后台搭建效果与前后端联合打包

本文为稀土技能社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

又来给咱们更文了，今日是微服务网关实战的第六篇。

今日的内容比较偏前端一点，首要是给咱们换换口味，究竟学一个东西学久了就想学点新东西休息一点，俗称换换脑子。

其实早就想学学前端看了，不过碍于作业繁忙，也或许是懒癌发生一向没有成行，直到在做OKR的时分有些东西需求前端的支撑，而咱们又没有剩余前端的时分，我就知道，我需求开端学前端了~

在往下讲之前，我忽然想起来我有一位前端网友，在咱们之前都还特赤贫的时分（现在升级到赤贫），时常会在一块讨论问题，有时分我会说你们前端怎样怎样样，他就会十分反感，由于他觉得自己不是 front 而是 developer。

尽管我被怼了，可是从心底我是赞同他的说法的，开发者不应该给自己受限，咱们咱们都仅仅在做前端 or 后端这份作业而已，究竟有的人招进来的时分是前端，现在连运维的活都干呢，你说是吧？@CookieBoty

所以，本文的内容会搀杂前端和后端，前端的能够看看后端内容，后端的能够看看前端内容，换换脑子嘛~

1. Vue

我还依稀记得，三四年前刚学 Java 的时分还要学 CSS、HTML和JS三板斧，做后端作业三年后，我连怎样操作 DOM 都忘记了，或许许多后端小伙伴也和我相同，除了会 HTML 的一点标签，其他前端相关的常识早就忘完了，这也是许多后端迟迟不愿意触摸前端的原因，太费心力了。

所以在我决议开端学习前端的第一个问题便是，我应该先学什么？

在我略微思考了三分钟之后，我得出一个定论：我应该先学一个前端结构。

我知道任何一门言语的技能栈都是有一个巨大的生态在支撑的，前端所触及的东西除了前端结构之外还有打包东西，依靠办理东西，ES6新特性（或许它现已老了，对我来说是新的），卷的狠的再来点拆入拆解浏览器等等等。

这些八股文和 Java 有的一拼，可是我知道我不需求学这些的一切东西，我要学的时分只要一个：用一个东西帮我做成一个东西。

所以，尽管我连解构赋值、和操作DOM都不会，可是这不妨碍我学前端，我要先选中一个前端结构进行了解，然后运用这个结构的生态帮我做东西。

扯远了，说回正题，在两三年前的时分，前端仍是 Vue、React 和 Angular 三足鼎立，可是到今年 Angular 除了外企好像现已用的不多了，所以我的学习方针就放在 Vue 和 React 这两个身上了。

怎样选，其实我是纠结的，终究我听从好大哥@CookieBoty和众多网友的建议，学了 Vue。

网上许多人都说 Vue 上手好、文档全，我感觉完美契合我的预期，再加上火影完结之后我就开端追海贼王了，尤大的 onepiece 起名方法甚合我意，所以我就开端学起来了 Vue3。

怎样学呢？我想到了程序员的梦工厂某课网，找了一个教程来看，上面先教了我模板语法，又教了我单页组件，终究又学了 Vue 路由体系，前后花费一个多小时，看了十几节视频，我觉得我行了，就开端实践了~

终究，三天没写完一个页面。

2. React

Vue3 的难度让我有点触不及防，或许也是由于我没有抛弃后端的代码习气。

我习气用 TS 界说好数据结构去接纳值和处理值，可是我发现 Vue3 中的一切目标都是一个代理目标，当我测验将一个 Map 数据直接转换为一个 JSON 字符串的时分我发现不行，我也无法了解一个 Map 为啥不能在转 JSON 的时分把里边的 KV 带上，还需求我手动转换成一个目标然后再转一次，我很苦恼。

我更苦恼的是，当我测验用一个数组目标循环生成某段模板的时分，我发现很麻烦，我感觉这不是我想要的前端，作为一个后端，我学了脚本言语，可是它却让我感觉到许多的枷锁在身上，这比我写 Java 还困难。

此时我意识到，Vue3的上手难度和Vue2不是相同的，这是一个老练的前端结构了，它需求一个老练的前端来操作，而不是我这种玩完就扔的二流开发。

当然，Vue 仍是有许多好处的，从我能够看见的一点来说便是，ele-plus 这个组件库是真的美丽。

Vue3 玩不转了，我就想换 React 了，再次来到某课网，找了个 React17 的视频来看，又花了我一个多小时，好在我现已有一些前置常识了，吸收起来仍是蛮快的，学习的过程中，我觉得 React 给了我想要的东西：自由，脚本言语写起来的自由感。

在 React 中我不再拘泥于单页组件，统统都是函数式组件，单向数据流也让我更简单了解数据运转的方法，并且会 React 据说B格要比会 Vue 的高一点，这一切都让我觉得转 React 是正确的。

不过有利有弊，在我写 React 的过程中，我发现我在用 Vue3 写代码时分的问题便是 JS 独有的问题，比方我前面提到过的 Map 转 JSON 的问题，它不会由于某个结构就能让我更舒畅。

或许有的前端小伙伴会想：你为啥要用 Map？

由于 Map 更契合我这个后端的认知，某些不确定的多选参数我装在一个容器里边，然后序列化后给后端我觉得这是一件极其合理的工作，它契合我的心智形式，可是 JS 或许 TS 都没有做到。

在运用 TS 的过程中，我几乎没有感觉到好处，TS 的类型检查反而让我觉得更不像脚本言语了，这一点我觉得比后端 Kotlin 差许多。

尽管有种种限制，可是好在 React 这个结构并没有让我感觉到有什么不适，反而是无缝衔接，我几乎是上手就写了。

终究总结一下我 React 都学了哪些东西才开端写东西的：

0. 运用脚手架安装 react with ts。
1. 声明类组件和函数式组件：函数式组件是主流，类组件稍微看看就行，首要便是写起来麻烦。
2. 了解 render：render 其实便是经过执行组件代码生成一个HTML片段，然后挂载到DOM上面。
3. CSS 模块化：经过 CSS 模块化，加款式的时分会十分便利，懒癌患者直接在代码上加行内款式也没问题，玩的便是为所欲为。
4. State 和 props：state 是要点，它代表了组件中状况，比方按钮是否显示之类的，props 则是不可变参数，由外部传递进来供组件运用。
5. Hooks：Hooks 我一般只运用到 useState、useEffect、useContext这三个，它们分别代表了声明状况变量，声明副作用钩子和大局数据传递。
6. 路由：依照我的了解路由是经过占位符和浏览器的锚点来完结的，经过锚点定位到指定代码，经过占位符将组件代码生成到占位符占据的DOM处，当然这仅仅个人拙见，期望谈论区大佬能给出更多细节。

学完上面几项，我觉得你写一个小的办理体系也是没问题的，啊对了，提到办理体系，那必然要用到 http 相关的东西，尽管由 axios 珠玉在前，可是 fetch 用起来也还行。

终究，我觉得 React 的文档比 Vue 的文档强上不少，这句话期望 JYM 别喷我。

3. 组件库

写前端的过程中，想要提效，组件库是必不可少的，我先后体会了 Ant Design、Material UI、Semi Design、Arco Design。

终究在做项目的时分用了 Semi Design，由于它不用引进大局款式表就能按需加载，尽管我的好大哥告诉我 Ant Design 也能够做到这个作用，可是其时确实没有实践成功，仍是我的功力过分单薄。

从目前看来，我用过最舒畅最便利的仍是 ele-plus 可惜没有 React 版本。

尽管组件库是一个好东西，可是我觉得过分依靠组件库是一件很糟糕的工作，当你要做的功用组件库中有可是刚好达不到你要的作用时，就会很难受，怪不得许多人都要做一个自己的组件库了~

比方 Semi Design，在我运用的过程中我其实很不喜欢它的按钮作用，按钮上面总要有一个底色：

我想要一个无底色的图标按钮，可是 Semi Design 的图标按钮全部都是这样的：

或许这便是它独有的规划风格问题吧，还有一些随时或许遇到会违背自己的直觉的工作，让我意识到，组件库尽管不错，可是过度依靠也为自己的扩展留下许多问题。

写到这，突然就理解了为啥前端有时分会告诉我：” 这个作用我用的组件库做不了 “，我心想你的页面还不是你做主吗，竟然能让组件库把开发者给拿捏了，等我也被拿捏的时分，我仿佛了解了他其时的状况，原来我的页面真不是我做主

4. 页面作用

尽管我学前端只花了几个小时，可是写页面却花了好久的时刻，大部分时刻都在调一些款式和排查错误，并且我还自己学了一手 Flex 布局，做了全体的页面布局。

在有时分感觉组件作用欠好的时分还自己写了一下鼠标悬浮的阴影之类的小作用：

一套页面做下来全体感觉仍是不错的，怪不得前端也被称为交互体会工程师了。

接下来给咱们看一下全体作用，这是主页面：

我的这个网关控制台一共分为两个页面：看板和路由表。

路由表便是上图展现的这个，首要是把 Nacos 中的装备拉下来解析成数组目标展现在表格里边，然后在表格里边能够进行修改和新增，然后经过 openApi 同步到 Nacos 远端去，这样就不用手动去在一堆装备里边改了。

这儿要小小的吐槽一下 Nacos 的 Api，它们的这种发布装备竟然是 Get 接口的，导致我要现在后端做一层包装，不然数据量大了很简单被浏览器拦截掉，它们新版的 api 接口我也看了相关的代码，竟然不是常用的 JSON 传参，就此还和相关开发者对了一次线。

扯远了，说回正题，我的修改和新增页面如下：

看板则是运用网关做了一些流量目标的记载，比方恳求总量、日活总量、每小时在线人数、每小时恳求人数之类的根底目标，并且把它们做成了一个图表的形式，有饼状图和折线图：

当然，对我来说最重要的仍是路由表的查看页面和新增修改页面，这几个页面花费了我最多的心力，并且页面的数据结构比较复杂，做起来对我这个新手来说是有点费劲的。

值得一提的是，图表是我做的最轻松的一个页面，用的是蚂蚁的图标组件。

5. 后端

终究，简简单单说一下后端我都做了什么吧。

由于这是后台体系，所以我将它和网关分隔，新建了一个 admin 项目来处理相关恳求，可是呢？加上前端那我的网关全体就要有三个布置的服务了：网关 API、网关控制台前端、网关控制台后端。

为了节省资源，我经过插件的方法把前端输出的代码copy到网关后端这个使用里边来，这样网关后端和前端的代码就能够打包在一个使用里边了。

其具体做法首要便是在后端使用编译打包的时分用插件先编译前端，然后对前端资源进行仿制，具体插件如下：

  <build>
    <plugins>
         <!-- 调用npm命令插件  -->
        <plugin>
          <groupId>org.codehaus.mojo</groupId>
          <artifactId>exec-maven-plugin</artifactId>
          <version>3.0.0</version>
          <executions>
            <!-- 先执行前端依靠下载 -->
            <execution>
              <id>exec-npm-install</id>
              <phase>package</phase>
              <goals>
                <goal>exec</goal>
              </goals>
              <configuration>
                <executable>npm</executable>
                <arguments>
                  <argumnet>install</argumnet>
                </arguments>
                <workingDirectory>../admin-ui/</workingDirectory>
              </configuration>
            </execution>
​
            <!-- npm打包 -->
            <execution>
              <id>exec-npm-run-build</id>
              <phase>package</phase>
              <goals>
                <goal>exec</goal>
              </goals>
              <configuration>
                <executable>npm</executable>
                <arguments>
                  <argumnet>run</argumnet>
                  <argumnet>build</argumnet>
                </arguments>
                <workingDirectory>../admin-ui/</workingDirectory>
              </configuration>
            </execution>
          </executions>
        </plugin>
​
      <!-- 把 react 编译后的 dist目录下的一切文件拷贝到resource目录下 -->
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <executions>
          <execution>
            <id>copy-static</id>
            <phase>validate</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>src/main/resources/static</outputDirectory>
              <overwrite>true</overwrite>
              <resources>
                <resource>
                  <!-- 由于react打包目录在项目根目录，所以从这儿仿制 -->
                  <directory>../admin-ui/build</directory>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>

平时调试和开发的时分仍然能够像前后端分离那样，启动一个后端服务和一个前端服务，只在终究打包的时分打包在一块，所以这种方法哪怕是让一个专职前端来帮你写页面，对他来说也是无感知的，不需求关怀后端干了啥。

6. 终究

好了，今日的文章便是以上这些内容了，本篇首要内容没有触及到太多技能（当然也共享了一个前后端联合打包技巧），首要是共享了我自己在为项目写一些前端代码的心路历程，信任现在有许多工程师都对全栈很有兴趣，我也是想借此告诉咱们，其实前端并没有太难学，几个小时完全能够上手写页面了。

Just do it.

终究，假如咱们觉得本文还不错的话就能够点赞以示支撑，对前端这块内容有更好的建议和说法也能够在谈论区留言，我会积极对线的，下篇见。

本系列其他文章：

「微服务网关实战一」SCG 和 APISIX 该怎样选？

「微服务网关实战二」SCG + Nacos 动态感知上下线

「微服务网关实战三」具体了解 SCG 路由、断言与过滤器

「微服务网关实战四」随意扩展定制的分布式限流，看看我怎样做

「微服务网关实战五」做网关体系， 99% 会被问到这个功用