生产上发布 Spring Boot 项目时，流程颇为繁琐且低效。但凡代码有一丁点改动，就得把整个项目重新打包部署，耗时费力不说，生成的 JAR 包还特别臃肿，体积庞大。每次更新项目，光是上传这大文件就得花费不少时间，严重影响工作节奏。为解决这一痛点，我打算把依赖库以及配置文件（lib 文件夹下的那些 jar 包,还有config下的applacation.yml等文件）从项目主体里剥离出来，后续部署时，只需发布核心代码就行，这样既能加快部署速度，又能减轻文件传输负担，让项目更新变得轻松便捷

方法一 插件spring-boot-maven-plugin

1. 项目应用的配置文件排除 统一打包到config目录下

利用springboot中resource插件来排除配置，并统一打包到config目录下

<resources>

  <resource>

      <directory>src/main/resources</directory>

       <!--filerting设置为true,则打包过程中会对这些文件进行过滤处理-->

       <filtering>true</filtering>

       <!--指定目标路径为config-->

      <targetPath>${project.build.directory}/config</targetPath>

      <includes>

      <!--使用通配符-->

         <include>**/*.properties</include>

         <include>**/*.yml</include>

         <include>**/*.xml</include>

     <include>mapper/*.xml</include>

      <!-- 这里可以根据你实际想要包含的配置文件类型来添加更多的include配置 -->

   </includes>

  </resource>

</resources>

2. 把我们写代码打包可执行jar，并排除依赖jar包

<plugin>

  <groupId>org.springframework.boot</groupId>

  <artifactId>spring-boot-maven-plugin</artifactId>

  <configuration>

   <!--项目的启动类,如果有多个main就必须指定，没有可以缺失

     <mainClass>XXXXX.TwinWebApplication</mainClass>-->

    <!--解决windows命令行窗口中文乱码-->

     <jvmArguments>-Dfile.encoding=UTF-8</jvmArguments>

     <layout>ZIP</layout>

     <!--配置需要打包进项目的jar-->

     <includes>

     <!--填写需要打包所需要的依赖 。没有匹配上任何jar包机排除依赖-->

        <include>

             <groupId>no-exists-jar</groupId>

            <artifactId>non-exists-jar</artifactId>

         </include>

      </includes>

  </configuration>

  <executions>

    <execution>

         <goals>

         <!-- 表示当运行mavn package打包时，使用Springboot插件打包 -->

           <goal>repackage</goal>

       </goals>

    </execution>

  </executions>

</plugin>

3 配置依赖的jar包 统一打包lib目录

<!--此插件用于将依赖包抽出-->

<plugin>

   <groupId>org.apache.maven.plugins</groupId>

   <artifactId>maven-dependency-plugin</artifactId>

   <executions>

   <execution>

      <id>copy-dependencies</id>

      <phase>package</phase>

      <goals>

         <goal>copy-dependencies</goal>

      </goals>

     <configuration>

          <outputDirectory>${project.build.directory}/lib</outputDirectory>

          <excludeTransitive>false</excludeTransitive>

          <stripVersion>false</stripVersion>

          <includeScope>runtime</includeScope>

      </configuration>

    </execution>

  </executions>

</plugin>

打包后目录结构,如下图所示

执行命令 java -jar -Dloader.path=./lib -jar xxx.jar

注意 springboot启动时候会优先读取config目录下配置文件 所以这里不用指定-Dspring.config.location=XX.yml文件

注意 例如日志文件配置以及mybits等配置文件 可以配成绝对路径 如下所示：

方法二 使用maven-jar-plugin插件实现

1 使用插件maven-resources-plugin处理配置文件打包到config目录

<plugin>

    <groupId>org.apache.maven.plugins</groupId>

    <artifactId>maven-resources-plugin</artifactId>

    <configuration>

       <encoding>UTF-8</encoding>

    </configuration>

   <executions>

      <execution>

          <id>copy-dependencies</id>

          <phase>package</phase>

          <goals>

             <goal>copy-resources</goal>

          </goals>

  <configuration>

<!--配置文件打包成config目录下 -->

      <outputDirectory>${project.build.directory}/twin-web/config</outputDirectory>

      <resources>

      <resource>

      <directory>src/main/resources</directory>

      </resource>

      </resources>

     </configuration>

  </execution>

</executions>

</plugin>

2. 使用maven-jar-plugin 打包可执行jar 并排除依赖

<plugin>

   <groupId>org.apache.maven.plugins</groupId>

   <artifactId>maven-jar-plugin</artifactId>

   <configuration>

      <outputDirectory>

          <!--输入打包可执行的jar到twin-web\libs\下-->

          ${project.build.directory}/twin-web/

       </outputDirectory>

      <archive>

        <addMavenDescriptor>false</addMavenDescriptor>

       <manifest>

             <addClasspath>true</addClasspath>

         <!-- 增加执行启动jar的依赖jar包目录前缀-->

           <classpathPrefix>./libs/</classpathPrefix>

         <!-- 指定启动类-->

            <mainClass>com.keqing.twinweb.TwinWebApplication</mainClass>

        </manifest>

        <manifestEntries>

          <!-- 增加配置文件的classpath-->

          <Class-Path>./config/</Class-Path>

      </manifestEntries>

</archive>

<!-- 排除配置文件-->

     <excludes>

         <exclude>*.yml</exclude>

         <exclude>mapper/**</exclude>

         <exclude>*.xml</exclude>

     </excludes>

  </configuration>

</plugin>

3 使用maven-dependency-plugin 打包libs目录下

<plugin>

   <groupId>org.apache.maven.plugins</groupId>

   <artifactId>maven-dependency-plugin</artifactId>

   <executions>

   <execution>

      <id>copy-dependencies</id>

      <phase>package</phase>

      <goals>

         <goal>copy-dependencies</goal>

      </goals>

     <configuration>

          <outputDirectory>${project.build.directory}/twin-web/libs</outputDirectory>

          <excludeTransitive>false</excludeTransitive>

          <stripVersion>false</stripVersion>

          <includeScope>runtime</includeScope>

      </configuration>

    </execution>

  </executions>

</plugin>

使用package打包后的目录

查看自己打包后jar目录，注意这种打包方式弊端，按照一定约定格式规范固定了，一旦依赖jar包（包括配置文件目录等）发生变化就必须重新打包

启动程序java -jar xxx.jar

方式三 使用maven-assembly-plugin打包

maven-assembly-plugin 是 Maven 中的一个插件，它允许用户将项目的输出以及依赖、模块、站点文档和其他文件打包成一个可发布的格式，例如 zip、tar.gz、jar 等。以下是使用 maven-assembly-plugin 的一些优势：

1. 项目应用的配置文件排除

<resources>

  <resource>

         <directory>src/main/resources</directory>

             <!--filerting设置为true,则打包过程中会对这些文件进行过滤处理-->

          <filtering>true</filtering>

         <includes>

             <!--使用通配符-->

            <include>**/*.properties</include>

            <include>**/*.yml</include>

            <include>**/*.xml</include>

           <include>mapper/*.xml</include>

        <!-- 这里可以根据你实际想要包含的配置文件类型来添加更多的include配置 -->

        </includes>

   </resource>

</resources>

2. 配置spring-boot-maven-plugin

<plugin>

   <groupId>org.springframework.boot</groupId>

   <artifactId>spring-boot-maven-plugin</artifactId>

   <configuration>

    <!--项目的启动类,如果有多个main就必须指定，没有可以缺失

         <mainClass>XXXXX.TwinWebApplication</mainClass>-->

        <!--解决windows命令行窗口中文乱码-->

        <jvmArguments>-Dfile.encoding=UTF-8</jvmArguments>

        <layout>ZIP</layout>

           <!--配置需要打包进项目的jar-->

       <includes>

        <!--填写需要打包所需要的依赖 。没有匹配上任何jar包机排除依赖-->

          <include>

          <groupId>no-exists-jar</groupId>

          <artifactId>non-exists-jar</artifactId>

          </include>

      </includes>

   </configuration>

   <executions>

         <execution>

           <goals>

                 <!-- 表示当运行mavn package打包时，使用Springboot插件打包 -->

              <goal>repackage</goal>

          </goals>

      </execution>

  </executions>

</plugin>

3 引入springboot里约定maven-assembly-plugin

<plugin>

    <artifactId>maven-assembly-plugin</artifactId>

    <configuration>

<!-- 打包文件名字不包含 assembly.xml 中 id -->

      <appendAssemblyId>false</appendAssemblyId>

      <descriptors>

      <!--项目所在目录配置文件的 assembly.xml文件 -->

        <descriptor>assembly.xml</descriptor>

      </descriptors>

  </configuration>

<executions>

   <execution>

   <id>make-assembly</id>

   <phase>package</phase>

   <goals>

          <goal>single</goal>

    </goals>

    </execution>

  </executions>

</plugin>

配置assembly.xml文件

<assembly>

   <!-- 打包文件名的标识符，用来做后缀-->

    <id>make-assembly</id>

    <!-- 打包的类型，如果有N个，将会打N个类型的包 -->

   <formats>

      <format>tar.gz</format>

      <format>zip</format>

   </formats>

     <!-- 压缩包下是否生成和项目名相同的根目录 -->

   <includeBaseDirectory>true</includeBaseDirectory>

     <!-- 用来设置一组文件在打包时的属性。-->

  <fileSets>

   <!-- 0755->即用户具有读/写/执行权限，组用户和其它用户具有读写权限；-->

    <!-- 0644->即用户具有读写权限，组用户和其它用户具有只读权限；-->

    <!-- 将src/bin目录下的jar启动脚本输出到打包后的目录中 -->

    <fileSet>

     <!--lineEnding选项可用于控制给定的行结束文件 -->

       <lineEnding>unix</lineEnding>

       <directory>${basedir}/bin</directory>

       <outputDirectory>${file.separator}</outputDirectory>

       <fileMode>0755</fileMode>

       <includes>

         <include>**.sh</include>

         <include>**.bat</include>

      </includes>

   </fileSet>

<!-- 把项目的配置文件，打包进压缩文件的config目录 -->

   <fileSet>

      <directory>${basedir}/src/main/resources</directory>

      <outputDirectory>config</outputDirectory>

      <fileMode>0644</fileMode>

      <includes>

           <include>*.properties</include>

           <include>*.yml</include>

          <include>*.xml</include>

         <include>mapper/*.xml</include>

      </includes>

   </fileSet>

   <!-- 把项目自己编译出来的jar文件，打包进zip文件的根目录 -->

    <fileSet>

      <directory>${project.build.directory}</directory>

      <outputDirectory>${file.separator}</outputDirectory>

      <includes>

          <include>*.jar</include>

      </includes>

   </fileSet>

 </fileSets>

<!-- 依赖包的拷贝-->

<dependencySets>

   <dependencySet>

     <unpack>false</unpack>

    <useProjectArtifact>true</useProjectArtifact>

    <outputDirectory>lib</outputDirectory>

    <scope>provided</scope>

  </dependencySet>

  <dependencySet>

      <unpack>false</unpack>

      <useProjectArtifact>true</useProjectArtifact>

      <outputDirectory>lib</outputDirectory>

      <scope>system</scope>

  </dependencySet>

  <dependencySet>

     <unpack>false</unpack>

     <useProjectArtifact>true</useProjectArtifact>

     <outputDirectory>lib</outputDirectory>

     <scope>runtime</scope>

  </dependencySet>

</dependencySets>

</assembly>

打包后目录

解压zip目录查看

使用命令启动项目java -jar -Dloader.path=./lib -jar xxx.jar

java



// 普通组件示例

@LiteflowComponent("commonNode")

public class CommonNode extends NodeComponent {

    @Override

    public void process() throws Exception {

        // 业务逻辑

        System.out.println("Executing commonNode logic");

    }

}



// 选择组件示例

@LiteflowComponent("choiceNode")

public class ChoiceNode extends NodeSwitchComponent {

    @Override

    public String processSwitch() throws Exception {

        // 根据条件返回不同的节点ID

        return "nextNodeId";

    }

}



// 条件组件示例

@LiteflowComponent("conditionNode")

public class ConditionNode extends NodeIfComponent {

    @Override

    public boolean processIf() throws Exception {

        // 判断条件

        return true;

    }

}

yaml



liteflow:

  rule-source: "classpath:flow.xml"

  node-retry: 3

  thread-executor:

    core-pool-size: 10

    max-pool-size: 20

    keep-alive-time: 60

数据上下文

在liteflow中，数据上下文非常重要，它用于参数传递和业务逻辑的执行。

我们可以通过以下代码示例了解数据上下文的用法

配置详解

在使用liteflow时，我们需要对一些参数进行配置，如规则文件地址、节点重试、线程池参数等。

以下是一个配置示例。

yaml



liteflow:

  rule-source: "classpath:flow.xml"  # 指定规则文件的位置

  node-retry: 3  # 节点重试次数

  thread-executor:

    core-pool-size: 10  # 线程池核心线程数

    max-pool-size: 20  # 线程池最大线程数

    keep-alive-time: 60  # 线程存活时间

实践案例

接下来，我们来看一个完整的业务实践案例。

在电商场景下，当订单完成后，我们需要同时进行积分发放和消息发送。

这时候，我们可以利用liteflow进行规则编排，处理这些并行任务。

1. 引入依赖

首先，在pom.xml文件中添加liteflow的依赖：

xml



<dependency>

    <groupId>com.yomahubgroupId>

    <artifactId>liteflow-spring-boot-starterartifactId>

    <version>2.6.5version>

dependency>

2. 增加配置

在application.yml文件中添加liteflow的配置：

yaml



spring:

  application:

    name: liteflow-demo



liteflow:

  rule-source: "classpath:flow.xml"  # 指定规则文件的位置

  node-retry: 3  # 节点重试次数

  thread-executor:

    core-pool-size: 10  # 线程池核心线程数

    max-pool-size: 20  # 线程池最大线程数

    keep-alive-time: 60  # 线程存活时间

3. 编写规则文件

在resources目录下创建flow.xml文件，编写规则文件内容：

xml



<flow>

    <parallel>

        <node id="pointNode"/>

        <node id="messageNode"/>

    parallel>

flow>

4. 编写业务逻辑组件

按照规则文件中的定义，编写相应的业务逻辑组件：

java



@LiteflowComponent("pointNode")

public class PointNode extends NodeComponent {

    @Override

    public void process() throws Exception {

        // 发放积分逻辑

        System.out.println("Issuing points for the order");

    }

}



@LiteflowComponent("messageNode")

public class MessageNode extends NodeComponent {

    @Override

    public void process() throws Exception {

        // 发送消息逻辑

        System.out.println("Sending message for the order");

    }

}

5. 流程触发

当订单完成后，我们需要触发liteflow的流程来执行积分发放和消息发送的逻辑。

我们可以在订单完成的服务方法中添加如下代码：

java



@Service

public class OrderService {

    

    @Autowired

    private FlowExecutor flowExecutor;

    

    public void completeOrder(Order order) {

        // 完成订单的其他逻辑

        System.out.println("Order completed: " + order.getId());

        

        // 执行liteflow流程

        flowExecutor.execute2Resp("flow", order);

    }

}

性能统计

总结

本人写了五年的后台管理。每次面试前就会头疼，因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过，但是站在现在的时间点回想以前，发现有很多事情可以做的更好，于是有了这篇文章。

写优雅的代码

一道面试题

大概两年以前，面试美团的时候，面试官让我写一道代码题，时间单位转换。具体的题目我忘记了。

原题目我没做过，但是我写的业务代码代码里有类似的单位转换，后端返回一个数字，单位是kb，而我要展示成 KB，MB 等形式。大概写一个工具函数（具体怎么写的忘记了，不过功能比这个复杂点）：

function formatSizeUnits(kb) {

    let units = ['KB', 'MB', 'GB', 'TB', 'PB'];

    let unitIndex = 0;



    while (kb >= 1024 && unitIndex < units.length - 1) {

        kb /= 1024;

        unitIndex++;

    }



    return `${kb.toFixed(2)} ${units[unitIndex]}`;

}

而在此之前，是一个后端同学写的代码（说起来，后台管理系统前端人力不够后端帮忙写好像是常规操作，后端总觉得写前端简单，而我只能说你们那代码写的，一言难尽……），如下：

function formatSizeUnits(kb) {

    var result = '';



    if (kb < 1024) {

        result = kb + ' KB';

    } else if (kb < 1024 * 1024) {

        result = (kb / 1024).toFixed(2) + ' MB';

    } else if (kb < 1024 * 1024 * 1024) {

        result = (kb / 1024 / 1024).toFixed(2) + ' GB';

    } else {

        result = (kb / 1024 / 1024 / 1024).toFixed(2) + ' TB';

    }



    return result;

}

虽然功能都一样，但是我写在面试的时候写了上面的代码得到了面试官的赞扬，也因此非常顺利的通过了面试。而如果我写成了下面的样子，估计不会有这种效果。

如何提升代码质量

想提升代码质量，最理想的是靠 code review ，但实际上这玩意在大多数公司根本就不存在。其次就只能多看看大佬们写的代码，但是一来后台管理本来就没太大难度很少有大佬，二来很多时候一个后台管理系统就一两个人负责。

还好现在有了各种 AI 工具，可以非常方便的优化自己的代码了。

还是上面的问题，看看 GPT 给的答案

// 提问：写一个工具函数，对文件大小的单位进行转换，加注释

// 回答：下面是一个JavaScript工具函数，它接受文件大小、初始单位、目标单位和小数位数，然后返回目标单位下的文件大小。



/**

 * 将文件大小从一个单位转换为另一个单位。

 *

 * @param {number} size 文件大小。

 * @param {string} fromUnit 初始单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。

 * @param {string} toUnit 目标单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。

 * @param {number} [decimalPoint=2] 结果保留的小数位数，默认为2。

 * @return {string} 转换后的文件大小，带单位。

 */

function convertFileSize(size, fromUnit, toUnit, decimalPoint = 2) {

  // 定义单位与字节之间的转换关系

  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

  // 获取初始单位和目标单位的索引

  const fromIndex = units.indexOf(fromUnit);

  const toIndex = units.indexOf(toUnit);



  // 如果单位不在列表中，抛出错误

  if (fromIndex === -1 || toIndex === -1) {

    throw new Error('Invalid units');

  }



  // 计算初始单位与目标单位之间的转换系数

  const exponent = toIndex - fromIndex;

  // 计算结果大小

  const resultSize = size / Math.pow(1024, exponent);



  // 返回格式化后的结果

  return parseFloat(resultSize.toFixed(decimalPoint)) + ' ' + toUnit;

}



// 示例使用

console.log(convertFileSize(1, 'GB', 'MB')); // 输出: 1024.00 MB

console.log(convertFileSize(1, 'MB', 'KB')); // 输出: 1024.00 KB

console.log(convertFileSize(1, 'KB', 'B'));  // 输出: 1024.00 B

console.log(convertFileSize(1, 'MB', 'GB', 5)); // 输出: 0.00098 GB

还能说什么，我只能说 NB！（经评论区提示，此段代码可能有问题，建议大家在使用AI工具时，重点是借鉴思路，直接使用代码需要谨慎~）

我现在每次写大段逻辑之后都习惯拿给 AI 看看，有什么更好的实现方式，或者用什么设计模式。AI 是非常低成本且高效提升代码质量的工具。

学会封装

一个功能用到了好多次，为什么不封装成组件？一个组件用到了好几个项目，为什么不单独写个npm包？差不多的项目创建了好几个，为什么不封装成脚手架？

你说，没时间，没必要，复制粘贴反而更快。

那你就完全没理解，这么做不一定是为了让工作更快完成，而是可以让你在年年终述职时更有话说（你就算写了一百个表单表格没有写一个脚手架更值得炫耀），如果不会写可以问问 AI。

而当你真正开始封装组件，开始写工具库了，你会发现你需要思考的确实比之前多了。

关注业务

对于前端业务重要吗？

相比于后端来说，前端一般不会太关注业务。就算出了问题大部分也是后端的问题。

但是就我找工作的经验，业务非常重要！

如果你做的工作很有技术含量，比如你在做低代码，你可以面试时讲一个小时的技术难点。但是你只是一个破写后台管理，你什么都没有的说。这个时候，了解业务就成为了你的亮点。

一场面试

还是拿真实的面试场景举例，当时前同事推我字节，也是我面试过N次的梦中情厂了，刚好那个组做的业务和我之前呆的组做的一模一样。

• 同事：“做的东西和咱们之前都是一样的，你随便走个过场就能过，我在前端组长面前都夸过你了！”


• 我：“好嘞！”

等到面试的时候：

• 前端ld：“你知道xxx吗？（业务名词）”


• 我：“我……”


• 前端ld：“那xxxx呢？（业务名词）”


• 我：“不……”


• 前端ld：“那xxxxx呢？？（业务名词）”


• 我：“造……”

然后我就挂了………………

如何了解业务

关注源码

说到源码， Vue，React 这些基本是每次必问，也有太多大佬们的总结我就不多说了。

除此之外，我想大家每次面试应该都会被问，你写了什么亮点的项目，困难的项目，你会说什么？哦，都是表单表格，都用 Element UI 实现的，没什么难度。那估计你面试也就到这里了。

那说什么，后台管理就这些啊？！

如果你用了 Element UI 你可以说写了什么自定义 Element UI 表单组件，Element UI 表单源码是什么原理，怎么通信的？用了 Axios 可以说 Axios 的原理，它的拦截器怎么实现的？用了编辑器 diff 那你知道 diff 算法是什么吗？用了 ECharts 那你知道他底层是用什么绘制的吗？用了 husky ？husky的原理是什么？用了Vite，它为什么快？是怎么打包的？写过插件吗？

可能有人觉得我离谱，事实上上面每一个问题都是我在面试中真实被问到的。当然，如果全部去了解，肯定不现实，每个人的精力有限，不可能每个用到的每个工具每个库都去了解原理，不过只要有一两个你去了解过，就可以在面试中引导面试官来问，要学会表现出你擅长的点。

至于怎么读源码？以前我不知道，现在嘛…… 为什么不问问神奇的 ChatGPT 呢？

讲一下 Axios 源码中，拦截器是怎么实现的？

Axios 的拦截器实现基于 Axios 的核心原理，即 Axios 实例是一个包含请求和响应拦截器堆栈的对象。当发出请求或接收响应时，Axios 会遍历这些拦截器，并按照添加的顺序执行请求拦截器，以及按照相反的顺序执行响应拦截器。

在 Axios 的源码中，拦截器是通过一个 AxiosInterceptorManager 实例来管理的，它维护了一个拦截器数组。每个拦截器都是一个包含 fulfilled 和 rejected 函数的对象。这两个函数分别对应于拦截器成功处理和拦截器处理出错的情况。

以下是 Axios 拦截器管理器的一个简化版本，展示了其核心实现思路：

class InterceptorManager {

  constructor() {

    this.handlers = []; // 存储拦截器的数组

  }



  use(fulfilled, rejected) {

    this.handlers.push({

      fulfilled: fulfilled,

      rejected: rejected

    });

    return this.handlers.length - 1; // 返回拦截器的ID

  }



  eject(id) {

    if (this.handlers[id]) {

      this.handlers[id] = null; // 移除拦截器

    }

  }



  forEach(fn) {

    this.handlers.forEach((h) => {

      if (h !== null) {

        fn(h);

      }

    });

  }

}

在发送请求或接收响应时，Axios 会创建一个 promise 链，并通过 forEach 方法将拦截器中的 fulfilled 和 rejected 函数添加到这个链中。这样，每个拦截器都可以对请求或响应进行处理，然后将结果传递到链的下一个拦截器，或者在出错时结束链的执行。

axios.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {

  chain.unshift(interceptor.fulfilled, interceptor.rejected);

});



axios.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {

  chain.push(interceptor.fulfilled, interceptor.rejected);

});

在 Axios 的完整实现中，这个拦截器机制被集成到了 Axios 的请求发送和响应处理流程中。通过这种方式，Axios 可以在发送请求之前和接收响应之后，但在用户定义的 .then 或 .catch 执行之前，插入自定义的逻辑。

请注意，这里提供的代码只是为了说明 Axios 拦截器的实现原理，并不是 Axios 源码的完整复制。如果你对 Axios 的拦截器实现细节感兴趣，建议查看 Axios 的官方 GitHub 仓库中的源码。

前端基建

当我们工作时间久了面试难免会遇到这些问题，前端工程化，前端监控，工作流，部署，性能等等。其实我们在工作中绝大部分时间都在写代码，对于这些不是所有人都有机会接触到，不过这些和所做的业务无关，是我们提升自己很好的一个思路。

技术选型

技术栈选 Vue 还是 React？Vue 选 Vue2 还是 Vue3？组件库选 ElementUI 还是 Ant Design？微前端有没有使用过？打包工具用 Vite 还是 Webpack？有那么多表单怎么实现的，有没有什么表单配置化方案，比如Formily？

对于我这种菜鸡，我这种只写简单的表单表格的人，这些都……无所谓……

不过为了应对面试我们还是需要了解下未选择技术栈的缺点，和已选择技术栈的优点（有点本末倒置…但是常规操作啦）

Vue 你可以说简单高效轻量级，面试必会问你为什么，你就开始说 Vue 的响应式系统，依赖收集等。

React 你可以说 JSX、Hooks 很灵活，那你必然要考虑 JSX 怎么编译， Hooks 实现方式等。

总体而言，对于技术选型，依赖于我们对所有可选项的理解，做选择可能很容易，给出合理的理由还是需要花费一些精力的。

开发规范

这个方面，在面试的时候我被问到的不多，我们可以在创建项目的时候，配置下 ESlint，stylelint， prettier， commitlint 等。

前端监控

干了这么多年前端，前端监控我是……一点没做过。

前端监控，简单来说就是我们在前端程序中记录一些信息并上报，一般是错误信息，来方便我们及时发现问题并解决问题。除此之外也会有性能监控，用户行为的监控（埋点）等。之前也听过有些团队分享前端监控，为了出现问题明确责任（方便甩锅）。

对于实现方案，无论使用第三方库还是自己实现，重要的都是理解实现原理。

对于错误监控，可以了解一下 Sentry，原理简单来说就是通过 window.onerror 和 window.addEventListener('unhandledrejection', ...) 去分别捕获同步和异步错误，然后通过错误信息和 sourceMap 来定位到源码。

对于性能监控，我们可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标，除此之外，还需要关注接口的响应时间。

最后，收集到信息之后，还要考虑数据上报的方案，比如使用 navigator.sendBeacon 还是 Fetch、AJAX？是批量上报，实时上报，还是延迟上报？上报的数据格式等等。

CI/CD

持续集成（Continuous Integration, CI）和 持续部署（Continuous Deployment, CD），主要包括版本控制，代码合并，构建，单测，部署等一系列前端工作流。

场景的工作流有 Jenkins、 Gitlab CI 等。我们可以配置在合并代码时自动打包部署，在提交代码时自动构建并发布包等。

这块我了解不多，但感觉这些工具层面的东西，不太会涉及到原理，基本上就是使用的问题。还是需要自己亲自动手试一下，才能知道细节。比如在 Gitlab CI 中， Pipeline 、 Stage 和 Job 分别是什么，怎么配置，如何在不同环境配置不同工作流等。

了解技术动态

这个可能还是比较依赖信息收集能力，虽然我个人觉得很烦，但好像很多领导级别的面试很愿意问。

比如近几年很火的低代码，很多面试官都会问，你用过就问你细节，你没用过也会问你有什么设计思路。

还有最近的两年爆火的 AI，又或者 Vue React的最新功能，WebAssembly，还有一些新的打包工具 Vite Bun 什么的，还有鸿蒙开发……

虽然不可能学完每一项新技术，但是可以多去了解下。

总结

写了这么多，可能有人会问，如果能回到过去，你会怎么做。

啊，我只能说，说是一回事，做又是另一回事，事实上我并不希望回到过去去卷一遍，菜点没关系，快乐就好，一切都是最好的安排。

故事的开始

故事还要从某个大厂的前端工程师 小明 说起。

小明兴高采烈的入职了某大厂的前端工程师岗位，就小明的水平的话，写写前端代码不在话下。

周四这天，小明吃完肯德坤之后，打开电脑浏览器，刷新页面，控制台就出现了下面的报错信息：

小明摸了摸自己大大的鼻子，一眼就看到了问题：

demo.hamm.cn 访问 api.hamm.cn 跨域了。

凭借多年的经验，小明瞬间就想到了解决方案：

那就摇人

因为刚入职，碰到这个问题他也不知道该找哪个人来处理，因为他没有 API 服务器的权限，于是在群里说了一句：

小明（前端）：“哪位大哥帮忙配置下跨域， api.hamm.cn 需要允许来自 demo.hamm.cn 的跨域请求。”

三分钟后...

小贾（Java）：“收到，我看看”

小董（运维）：“好的，现在在外面，半小时后回”

五分钟后，小明收到了来自 Java 同学 小贾 的私聊：

小贾（Java）：“好的，已配置好跨域头，你看看”

小明（后端）：“咦，可以了。感谢大哥！”

出幺蛾子了

半小时后，运维的 小董 同学回到公司，马不停蹄的给配了跨域头。

刚准备私聊告诉小明，却见 Java 的小贾同学在群里 @ 自己：

小贾（Java）：“@小董（运维） 董哥，你的网关侧是不是有问题，我配置了跨域头，小明这边刚才还好好的可以跨域，这会又炸了。。。”

只见小明发了张图：

群里炸锅了

咦，两个请求头

怎么请求头两个了之后反而跨域失败了呢？

查找问题

运维哥 和 Java哥 一脸懵，于是开始查找问题。

只见小明不慌不忙的在群里 @ 了两人：

小明（前端）：“@小董（运维） @小贾（Java） 两位哥，你们俩应该都配置了跨域头，两个跨域头也会跨域失败的哦～”

小董（运维）：“@小贾（Java） 你应用服务里的去掉吧”

小贾（Java）：“...”，心想 不是我先配置的么，凭什么。。。

你们都是在网关侧还是业务侧配置的允许跨域呢？欢迎评论区讨论

多跨域头禁止跨域

原来，多跨域头下，浏览器认为数据可能是被中间代理过，觉得不够安全，所以禁止了跨域访问。

MDN关于跨域 origin 的解释：

developer.mozilla.org/zh-CN/docs/…

第二天

小明递上了自己的离职申请书。

CI/CD这个概念很实用，但我们这种小作坊，没有一些很高大上的应用。

最常见的使用场景就是，开发者一键提交分支master，交给工作流工具完成构建，部署的后续操作，自动更新测试或线上环境。

个人博客等项目可以使用Github action来实现，但公司的代码在云效上，我更习惯于使用云效Flow来实现自动化部署。他的操作菜单是可视化的，非常方便，还有一些推送机器人消息的傻瓜化配置插件。

目前遇到一个需求，就是同一个uni-app小程序项目，需要部署到多个不同的小程序上。每个小程序的主要功能类似，但都有一些定制改动。

每次项目发版时，如果要手动挨个在微信开发者工具上切换、上传，会非常繁琐，而且uni-app使用dev命令输出的开发环境微信小程序项目代码也没有优化，正式发版时哪怕只有一个小程序也需要在dev、build两个项目里来回切。

因此非常需要自动化部署来节省精力。

下面梳理一下微信小程序的批量自动化部署实现流程。

准备工作

常见的web项目自动化部署，至少包含代码触发、构建、部署这3个步骤。

其中构建步骤中操作的产物会被打包上传，并在部署步骤中，下载到目标服务器，然后执行后续目录操作、启动等操作。

但是微信小程序的部署不需要这些操作，而是通过在node脚本中执行miniprogram-ci这个工具的相关方法来实现的。

miniprogram-ci的相关文档请参考这里。

密钥及IP白名单配置

跟着文档操作，首先需要到微信小程序管理后台的开发设置中进行配置。

点击生成按钮即可创建密钥，关闭后只能重新生成。

将密钥文件下载到安全的位置。由于我们的项目是私有库，这里就直接放到了项目deploy目录下。多个小程序的密钥可以放在一起，默认已经用appId做了区分。

云效Flow的构建集群提供了一组IP地址，将这些IP地址加入白名单即可。地址如下：

47.94.150.88

47.94.150.17

47.93.89.246

123.56.255.38

112.126.70.240

来源

IP地址不在白名单的话，调用上传时会报错。如果在本地调试，别忘了将本机的公网IP加入白名单，或者临时关闭。

构建脚本

uni-app项目使用vite框架，这里用到了.env环境变量的相关功能，原生微信小程序请自行实现或省略此功能。

更新版本号

微信小程序上传时，需要指定版本号。

版本号标准的用法还是放在package.json中，所以我在自动化部署实现过程中，顺便就引入了standard-version版本号管理。(项目被标记为deprecated，但我没有找到其他适合私有库的版本号管理工具，欢迎指点。)

standard-version可以自动根据git提交记录生成CHANGELOG.md。

并按照以下初始规则来生成版本号：

如果上个版本之间的提交只有fixed，更新patch版本号，比如1.0.0更新到1.0.1。

否则更新minor版本号，比如1.0.0更新到1.1.0。

更新版本号的同时，它会将CHANGELOG.md与更新版本号以后的package.json一同提交到git，同时创建一个版本号对应的tag。

在一般项目中这样就足够了，但是如果还想在小程序中展示这个版本号，就会存在问题——无法引入package.json文件。

而且使用wx.getAccountInfoSync虽然也能获取版本号，但只有正式环境能用，在体验版、开发版中是空字符串。

因此，我只能修改部署版本命令，加上了一些后处理脚本，将版本号同步更新到环境变量中。

在package.json的script中，添加以下命令：

{

  "scripts": {

    "release": "standard-version && node deploy/deploy.js version",

    "release:minor": "standard-version -- --release-as minor && node deploy/deploy.js version",

    "release:beta": "standard-version -p beta && node deploy/deploy.js version"

  }

}

多提一嘴，release:minor是在提交记录只有fixed但又希望更新minor版本时使用的，可以无视默认规则。当然也可以无视所有规则直接指定具体版本号，具体使用可查看文档(github.com/conventiona…

后处理脚本

在deploy目录下，创建deploy.js文件，内容如下：

const fs = require('node:fs')

const path = require('node:path')

const process = require('node:process')

const { execSync } = require('node:child_process')

const JSON5 = require('json5')

const ci = require('miniprogram-ci')

const { Command } = require('commander')

const dayjs = require('dayjs')

const dotenv = require('dotenv')

const { version } = require('../package.json')



const program = new Command()



// 同步版本号

program

  .command('version')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    const envPath = path.resolve(__dirname, '../.env')

    // 读取 .env 文件的内容

    const envContent = fs.readFileSync(envPath, 'utf8')



    // 分割每一行

    const lines = envContent.split('\n')



    // 定义新的内容数组

    const newLines = []



    // 遍历每一行，查找并修改 VITE_APP_VERSION 的值

    lines.forEach((line) => {

      if (line.startsWith('VITE_APP_VERSION=')) {

        newLines.push(`VITE_APP_VERSION=${version}`)

      }

      else {

        newLines.push(line) // 保留其他行，包括注释

      }

    })



    // 将修改后的内容写回 .env 文件

    fs.writeFileSync(envPath, newLines.join('\n'))



    // 添加文件到暂存区

    execSync(`git add ${envPath}`)



    // 获取前一次提交的标签

    let tag

    try {

      tag = execSync('git describe --tags --abbrev=0').toString().trim()

    }

    catch (error) {

      console.error('没有找到标签')

      process.exit(1)

    }



    // 将当前暂存区的改动追加到前一次提交中

    execSync('git commit --amend --no-edit')



    // 删除旧的标签

    execSync(`git tag -d ${tag}`)



    // 将标签移动到新的提交

    execSync(`git tag ${tag}`)

  })



program.parse(process.argv)

这个脚本会读取.env文件，找到VITE_APP_VERSION这一行，将其值更新为package.json中的version，然后将改动合并到前一次的git提交中，也就是standard-version所创建的提交。

没有用dotenv是因为这个工具更适合读取配置，但写入时会丢失注释信息。

构建小程序

如果只有一个小程序，可以略过此步，直接执行构建命令然后上传。

有多个小程序时，需要先执行一些定制脚本，再执行构建。比如至少要做的一项操作是更新appId，在uni-app中，这项配置位于manifest.json中。

在deploy/deploy.js中添加以下代码：

// 切换小程序

program

  .command('toggle')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }

    // 定义文件路径

    const filePath = path.join(__dirname, '../src/manifest.json')

    // 读取 JSON 文件

    fs.readFile(filePath, 'utf8', (err, data) => {

      if (err) {

        console.error('读取文件失败:', err)

        return

      }



      try {

        // 解析 JSON 数据（支持注释）

        const jsonData = JSON5.parse(data)



        // 修改 appid 字段

        jsonData['mp-weixin'].appid = options.appid



        // 将修改后的 JSON 数据转换为字符串（支持注释格式）

        console.log(jsonData)

        const updatedData = JSON.stringify(jsonData, null, 2)

        console.log(updatedData)

        // 写入修改后的数据到 JSON 文件

        fs.writeFile(filePath, updatedData, 'utf8', (err) => {

          if (err) {

            console.error('写入文件失败:', err)

            return

          }

          console.log('文件已成功更新')

        })

      }

      catch (err) {

        console.error('解析 JSON 数据失败:', err)

      }

    })

  })

这个脚本会读取manifest.json文件，找到mp-weixin.appid这一行，将其值更新为命令行参数中的appid，然后将改动写入manifest.json文件。

调用脚本的命令例子为：

node deploy/deploy.js toggle --appid=你的appid

上传小程序

在deploy/deploy.js中添加以下代码：

// 上传小程序

program

  .command('upload')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }



    // 获取当前工作目录的父路径

    const projectDir = path.join(__dirname, '../')



    const project = new ci.Project({

      appid: options.appid,

      type: 'miniProgram',

      projectPath: `${projectDir}/dist/build/mp-weixin`,

      privateKeyPath: `${projectDir}/deploy/private.${options.appid}.key`,

      // ignores: ['node_modules/**/*'],

    })

    ci.upload({

      project,

      version,

      desc: `CI机器人于${dayjs().format('YYYY-MM-DD HH:mm:ss')}上传`,

      setting: {

        es6: true,

        es7: true,

        minify: true,

        // autoPrefixWXSS: true,

        minifyWXML: true,

        minifyJS: true,

      },

    }).then((res) => {

      console.log(res)

      console.log('上传成功')

      process.exit(0)

    }).catch((error) => {

      if (error.errCode === -1) {

        console.log('上传成功')

        process.exit(0)

      }

      console.log(error)

      console.log('上传失败')

      process.exit(-1)

    })

  })



program.parse(process.argv)

这个脚本会调用微信小程序的CI接口，将小程序上传到微信服务器。调用脚本的命令例子为：

node deploy/deploy.js upload --appid=你的appid

其中appid在命令行中传入，而version是从package.json中读取的。

完整的deploy.js文件

const fs = require('node:fs')

const path = require('node:path')

const process = require('node:process')

const { execSync } = require('node:child_process')

const JSON5 = require('json5')

const ci = require('miniprogram-ci')

const { Command } = require('commander')

const dayjs = require('dayjs')

const dotenv = require('dotenv')

const { version } = require('../package.json')



const program = new Command()



// 同步版本号

program

  .command('version')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    const envPath = path.resolve(__dirname, '../.env')

    // 读取 .env 文件的内容

    const envContent = fs.readFileSync(envPath, 'utf8')



    // 分割每一行

    const lines = envContent.split('\n')



    // 定义新的内容数组

    const newLines = []



    // 遍历每一行，查找并修改 VITE_APP_VERSION 的值

    lines.forEach((line) => {

      if (line.startsWith('VITE_APP_VERSION=')) {

        newLines.push(`VITE_APP_VERSION=${version}`)

      }

      else {

        newLines.push(line) // 保留其他行，包括注释

      }

    })



    // 将修改后的内容写回 .env 文件

    fs.writeFileSync(envPath, newLines.join('\n'))



    // 添加文件到暂存区

    execSync(`git add ${envPath}`)



    // 获取前一次提交的标签

    let tag

    try {

      tag = execSync('git describe --tags --abbrev=0').toString().trim()

    }

    catch (error) {

      console.error('没有找到标签')

      process.exit(1)

    }



    // 将当前暂存区的改动追加到前一次提交中

    execSync('git commit --amend --no-edit')



    // 删除旧的标签

    execSync(`git tag -d ${tag}`)



    // 将标签移动到新的提交

    execSync(`git tag ${tag}`)

  })



// 切换小程序

program

  .command('toggle')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }

    // 定义文件路径

    const filePath = path.join(__dirname, '../src/manifest.json')

    // 读取 JSON 文件

    fs.readFile(filePath, 'utf8', (err, data) => {

      if (err) {

        console.error('读取文件失败:', err)

        return

      }



      try {

        // 解析 JSON 数据（支持注释）

        const jsonData = JSON5.parse(data)



        // 修改 appid 字段

        jsonData['mp-weixin'].appid = options.appid



        // 将修改后的 JSON 数据转换为字符串（支持注释格式）

        console.log(jsonData)

        const updatedData = JSON.stringify(jsonData, null, 2)

        console.log(updatedData)

        // 写入修改后的数据到 JSON 文件

        fs.writeFile(filePath, updatedData, 'utf8', (err) => {

          if (err) {

            console.error('写入文件失败:', err)

            return

          }

          console.log('文件已成功更新')

        })

      }

      catch (err) {

        console.error('解析 JSON 数据失败:', err)

      }

    })

  })



// 上传小程序

program

  .command('upload')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }



    // 获取当前工作目录的父路径

    const projectDir = path.join(__dirname, '../')



    const project = new ci.Project({

      appid: options.appid,

      type: 'miniProgram',

      projectPath: `${projectDir}/dist/build/mp-weixin`,

      privateKeyPath: `${projectDir}/deploy/private.${options.appid}.key`,

      // ignores: ['node_modules/**/*'],

    })

    ci.upload({

      project,

      version,

      desc: `CI机器人于${dayjs().format('YYYY-MM-DD HH:mm:ss')}上传`,

      setting: {

        es6: true,

        es7: true,

        minify: true,

        // autoPrefixWXSS: true,

        minifyWXML: true,

        minifyJS: true,

      },

    }).then((res) => {

      console.log(res)

      console.log('上传成功')

      process.exit(0)

    }).catch((error) => {

      if (error.errCode === -1) {

        console.log('上传成功')

        process.exit(0)

      }

      console.log(error)

      console.log('上传失败')

      process.exit(-1)

    })

  })



program.parse(process.argv)

如果是原生微信小程序，且使用了npm依赖，只需要在upload之前执行一下构建命令即可：

// 在有需要的时候构建npm

const warning = await ci.packNpm(project, {

  ignores: [],

  reporter: (infos) => { console.log(infos) }

})

console.warn(warning)

// ci.upload()

在本地调试时，用以下命令即可模拟构建的完整操作了：

node deploy/deploy.js toggle --appid=小程序A

pnpm run build:mp-weixin:小程序A

node deploy/deploy.js upload --appid=小程序A

注意这里的build命令，对应package.json中脚本的写法为：

"build:mp-weixin:小程序A": "uni build -p mp-weixin --mode 小程序A",

传入mode参数时，执行时会读取.env.小程序A中定义的环境变量，从而实现一些定制化的操作。

可以将这组命令写成sh脚本，每个小程序一个，都放在deploy目录下，在Flow工作流中调用。

上传命令执行成功后，微信小程序后台版本管理中就可以看到这个版本了：

后续的提审、发布操作目前仍需人工操作。

配置云效Flow

本地调试正常后，最后来配置云效Flow。

前面的代码触发不变，后面的部署步骤可以直接删除。

构建脚本为：

npm i -g pnpm

pnpm config set registry https://registry.npmmirror.com

pnpm i

node deploy/deploy.js toggle --appid=小程序A

pnpm run build:mp-weixin:小程序A

node deploy/deploy.js upload --appid=小程序A

如果有多个小程序，可以配置多个并行步骤：

待优化

依赖应该只需要安装一次，即将安装依赖步骤与构建步骤分开。

(可选)配置通知机器人

在构建步骤窗口的底部，可以添加通知插件。

这里使用的是钉钉机器人，教程参考这里

大致步骤为：

此后每次发版，只需提版合并到master分支，等待片刻收到钉钉机器人的提示，就可以准备提审了。

参考来源：

• 微信小程序构建发布

前言

在B2C项目中，就以电商项目举例，都有前台与后台。并且这类项目的后台往往都会开放给公司内大部分人，甚至有些是将电商项目作为Saas服务提供给外部厂商的，这样后台中记录的用户数据就成为一个风险点，随着越来越多的人可以接触到后台系统，我们必须对用户的数据进行加密不仅限于在数据库层面加密存储，前端展示的时候也必须要对例如：手机号，地址，身-份-证号等等隐私数据进行脱敏处理。

实现方式

1.最容易想到的就是利用硬编码的形式，哪些接口中涉及到了隐私数据，我们就去接口中对隐私数据进行脱敏。（ps一开始我确实是这么做的）

2.但是我发现太多太多接口都需要使用用户隐私数据了，我人工一个一个手工改也太不优雅了！我就想到我们能不能在SpringMVC将数据写入response的时候就将他拦截住，然后我实现一个注解，其实这个注解也就是一个标识。我们通过反射对于被这个注解标注的字段进行脱敏处理，然后再写回对象中。

这样不就可以只对响应类中加一个注解，然后所有使用用户敏感数据的接口都直接脱敏了吗，而且我们也可以很方便的改变我们的脱敏策略！！！

代码

hutools工具依赖

最适合中国宝宝体质的中国工具包，虽然网上很多人喷他，但是我个人觉得还是挺好用的，可能是我段位还不够。

<dependency>

    <groupId>cn.hutool</groupId>

    <artifactId>hutool-all</artifactId>

    <version>5.8.11</version>

</dependency>

@Sensitive注解

/**

 * @projectName: BlossomKnowledge

 * @package: blossom.project.bk.common.annotaion

 * @className: Sensitive

 * @author: Link Ji

 * @description: GOGO

 * @VX: _Aeeee86

 * @date: 2024/9/28 16:36

 * @version: 1.0

 */

@Retention(java.lang.annotation.RetentionPolicy.RUNTIME)

@Target(ElementType.FIELD)

public @interface Sensitive {

    SensitiveDataType type() default SensitiveDataType.PASSWORD;



}

脱敏策略枚举类

/**

 * @projectName: BlossomKnowledge

 * @package: blossom.project.bk.common.enums

 * @className: SensitiveDataType

 * @author: Link Ji

 * @description: GOGO

 * @VX: _Aeeee86

 * @date: 2024/9/28 16:40

 * @version: 1.0

 */

public enum SensitiveDataType {

    //脱敏数据类型

    NAME("name"),

    ID_CARD("idCard"),

    PHONE("phone"),

    EMAIL("email"),

    BANK_CARD("bankCard"),

    ADDRESS("address"),

    PASSWORD("password"),

    ;



    SensitiveDataType(String type) {

        this.type = type;

    }

    @Getter

    private String type;

}

响应拦截器

这里就是最核心的代码了，利用了SpringMVC提供的钩子接口，ResponseBodyAdvice接口，其中提供了一个beforeBodyWrite方法，这个方法就可以在数据写入响应前可以对数据进行处理。

/**

 * @projectName: BlossomKnowledge

 * @package: blossom.project.bk.common.enums

 * @className: SensitiveDataType

 * @author: Link Ji

 * @description: GOGO

 * @VX: _Aeeee86

 * @date: 2024/9/28 16:40

 * @version: 1.0

 */

@ControllerAdvice

public class SensitiveDataAdvice implements ResponseBodyAdvice<Object> {



    private final ObjectMapper objectMapper = new ObjectMapper();



    @Override

    public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {

        // 拦截所有响应

        return true;

    }



    @Override

    public Object beforeBodyWrite(Object body, MethodParameter returnType, org.springframework.http.MediaType selectedContentType,

                                  Class<? extends HttpMessageConverter<?>> selectedConverterType,

                                  org.springframework.http.server.ServerHttpRequest request,

                                  org.springframework.http.server.ServerHttpResponse response) {

        // 如果返回类型是result

        if (body instanceof Result<?>){

            // 处理对象，进行脱敏操作

            handleSensitiveFields((Result<?>) body);

        }



        return body;

    }



    private void handleSensitiveFields(Result<?> res) {

        Object data = res.getData();

        //获取data的下的全部字段

        if (data == null) {

            return;

        }

        Field[] fields = data.getClass().getDeclaredFields();

        for (Field field : fields) {

            // 判断是否有 @SensitiveData 注解

            if (field.isAnnotationPresent(Sensitive.class)) {

                Sensitive annotation = field.getAnnotation(Sensitive.class);

                SensitiveDataType sensitiveDataType = annotation.type();

                field.setAccessible(true);

                try {

                    Object value = field.get(data);

                    if (value instanceof String) {

                        // 执行脱敏操作

                        String maskedValue = DesensitizationUtils.maskData((String) value, sensitiveDataType.getType());

                        field.set(data, maskedValue);

                    }

                } catch (IllegalAccessException e) {

                    e.printStackTrace();

                }

            }

        }

    }

}

脱敏工具类

这个工具类依赖于hutools提供的DesensitizedUtil

public class DesensitizationUtils {

    

    public static String maskData(String data, String type) {

        if (data == null) {

            return null;

        }

        //使用switch匹配SensitiveDataType枚举中的类型，并且使用hutool脱敏工具类进行脱敏

       return switch (type) {

           case "name" -> DesensitizedUtil.chineseName(data);

           case "idCard" -> DesensitizedUtil.idCardNum(data, 2, data.length() - 2);

           case "phone" -> DesensitizedUtil.mobilePhone(data);

           case "email" -> DesensitizedUtil.email(data);

           case "bankCard"-> DesensitizedUtil.bankCard(data);

           case "address" -> DesensitizedUtil.address(data, data.length() - 6);

           default -> data;

       };



    }

}

效果演示

你是否工作3~5年后，发现日常只做了CURD的简单代码。

你是否每次面试就会头疼，自己写的代码，除了日常CURD简历上毫无亮点可写

抱怨过苦恼过也后悔过，但是站在现在的时间点回想以前，发现有很多事情我们是可以做的更好的。

于是有了这篇文章。

小北将带大家从六个方面深入探讨如何在Java后台管理开发中不断进步，帮助你在职业道路上稳步前行

一、写优雅的代码

优雅代码的重要性

优雅的代码不仅易于阅读和维护，还能减少错误，提高开发效率。对于后台管理系统，代码的整洁与规范尤为重要，因为它们通常涉及复杂的业务逻辑和大量的数据处理。

我们看一个简单的案例，我们直观的感受下，需求如下：

用户可以通过银行网页转账给另一个账号，支持跨币种转账。

同时因为监管和对账需求，需要记录本次转账活动

拿到这个需求之后，一个开发可能会经历一些技术选型，最终可能拆解需求如下：

1、从MySql数据库中找到转出和转入的账户，选择用MyBatis的mapper实现DAO

2、从Yahoo（或其他渠道）提供的汇率服务获取转账的汇率信息（底层是http开放接口）

3、计算需要转出的金额，确保账户有足够余额，并且没超出每日转账上限

4、实现转入和转出操作，扣除手续费，保存数据库

5、发送Kafka审计消息，以便审计和对账用

而一个常规的代码实现如下：

public class TransferServiceImpl implements TransferService {

    private static final String TOPIC_AUDIT_LOG = "TOPIC_AUDIT_LOG";

    private AccountMapper accountDAO;

    private KafkaTemplate<String, String> kafkaTemplate;

    private YahooForexService yahooForex;



    @Override

    public Result<Boolean> transfer(Long sourceUserId, String targetAccountNumber, BigDecimal targetAmount, String targetCurrency) {

        // 1. 从数据库读取数据，忽略所有校验逻辑如账号是否存在等

        AccountDO sourceAccountDO = accountDAO.selectByUserId(sourceUserId);

        AccountDO targetAccountDO = accountDAO.selectByAccountNumber(targetAccountNumber);



        // 2. 业务参数校验

        if (!targetAccountDO.getCurrency().equals(targetCurrency)) {

            throw new InvalidCurrencyException();

        }



        // 3. 获取外部数据，并且包含一定的业务逻辑

        // exchange rate = 1 source currency = X target currency

        BigDecimal exchangeRate = BigDecimal.ONE;

        if (sourceAccountDO.getCurrency().equals(targetCurrency)) {

            exchangeRate = yahooForex.getExchangeRate(sourceAccountDO.getCurrency(), targetCurrency);

        }

        BigDecimal sourceAmount = targetAmount.divide(exchangeRate, RoundingMode.DOWN);



        // 4. 业务参数校验

        if (sourceAccountDO.getAvailable().compareTo(sourceAmount) < 0) {

            throw new InsufficientFundsException();

        }

        if (sourceAccountDO.getDailyLimit().compareTo(sourceAmount) < 0) {

            throw new DailyLimitExceededException();

        }



        // 5. 计算新值，并且更新字段

        BigDecimal newSource = sourceAccountDO.getAvailable().subtract(sourceAmount);

        BigDecimal newTarget = targetAccountDO.getAvailable().add(targetAmount);

        sourceAccountDO.setAvailable(newSource);

        targetAccountDO.setAvailable(newTarget);



        // 6. 更新到数据库

        accountDAO.update(sourceAccountDO);

        accountDAO.update(targetAccountDO);



        // 7. 发送审计消息

        String message = sourceUserId + "," + targetAccountNumber + "," + targetAmount + "," + targetCurrency;

        kafkaTemplate.send(TOPIC_AUDIT_LOG, message);



        return Result.success(true);

    }

}

我们可以看到，一段业务代码里经常包含了参数校验、数据读取存储、业务计算、调用外部服务、发送消息等多种逻辑。

在这个案例里虽然是写在了同一个方法里，在真实代码中经常会被拆分成多个子方法，但实际效果是一样的，而在我们日常的工作中，绝大部分代码都或多或少的接近于此类结构。

那么优雅的代码应该是什么样的？

public class TransferServiceImplNew implements TransferService {



    // 可以看出来，经过重构后的代码有以下几个特征：

    // 业务逻辑清晰，数据存储和业务逻辑完全分隔。

    // Entity、Domain Primitive、Domain Service都是独立的对象，没有任何外部依赖，

    // 但是却包含了所有核心业务逻辑，可以单独完整测试。

    // 原有的TransferService不再包括任何计算逻辑，仅仅作为组件编排，

    // 所有逻辑均delegate到其他组件。这种仅包含Orchestration（编排）的服务叫做Application Service（应用服务）。

    // 我们可以根据新的结构重新画一张图：



    private AccountRepository accountRepository;

    private AuditMessageProducer auditMessageProducer;

    private ExchangeRateService exchangeRateService;

    private AccountTransferService accountTransferService;



    @Override

    public Result<Boolean> transfer(Long sourceUserId, String targetAccountNumber, BigDecimal targetAmount, String targetCurrency) {

        // 参数校验

        Money targetMoney = new Money(targetAmount, new Currency(targetCurrency));



        // 读数据

        Account sourceAccount = accountRepository.find(new UserId(sourceUserId));

        Account targetAccount = accountRepository.find(new AccountNumber(targetAccountNumber));



        // 获取汇率

        ExchangeRate exchangeRate = exchangeRateService.getExchangeRate(

            sourceAccount.getCurrency(), targetMoney.getCurrency()

        );



        // 业务逻辑

        accountTransferService.transfer(sourceAccount, targetAccount, targetMoney, exchangeRate);



        // 保存数据

        accountRepository.save(sourceAccount);

        accountRepository.save(targetAccount);



        // 发送审计消息

        AuditMessage message = new AuditMessage(sourceAccount, targetAccount, targetMoney);

        auditMessageProducer.send(message);



        return Result.success(true);

    }

}

虽然功能都一样，但是在面试的时候写了上面的代码能得到了面试官的赞扬，而如果写成了上面的样子，估计不会有这种效果。

最近无意间获得一份阿里大佬写的刷题笔记，一下子打通了我的任督二脉，进大厂原来没那么难。这是大佬写的，[7701页的BAT大佬写的刷题笔记，让我offer拿到手软]

二、提升代码质量

如果说优雅的代码是我们程序员的里子，那代码质量就是我们的面子。

想象一下，如果你写的代码，提测后测试出来各种bug，上线后也出现bug，就算你代码写的再优雅也没用了。

如何提升代码质量

想提升代码质量，最理想的是靠 code review，但是实际上这玩意在大多数公司根本就推行不下去。

为什么呢？因为大家都很忙，忙着改上一个迭代的bug，忙着写下一个迭代的需求，忙着做各种性能优化，忙着做各种日报、周报、月报等等...

所以靠人不如靠己，我们在日常工作中要善于利用工具，来帮我们发现问题，解决问题。

例如以下实践方法：

三、关注业务

看到这里有的人不禁要问，我一个后端开发，写好代码就行了，还需要关注业务吗？

如果你有这样的想法，那就大错特错了。

中国的企业，90%的开发都是面向业务开发，纯做研究的公司少之又少。所以你想要在互联网行业走的更高，那就一定不能脱离业务。

而且只有深刻理解业务了，才能对系统有一个整体的规划意识，才能设计出一个好的系统。

实践方法

实践建议

四、培养架构思维

5年以上的程序员，就一定要培养自己的架构思维了，也就是要把自己的技术视角由自己的点扩展到线，再扩展到面。

从而对公司整体系统技术架构有一个整体的认知。

例如到一个公司之后，你一定要具有自我绘制如下技术架构图的能力。

架构思维的重要性

良好的架构设计是系统稳定、高效运行的基础。

培养架构思维，能够帮助你在项目初期做出合理的技术选型和系统设计，提升系统的可扩展性和维护性。

实践方法

最近无意间获得一份阿里大佬写的刷题笔记，一下子打通了我的任督二脉，进大厂原来没那么难。这是大佬写的，[7701页的BAT大佬写的刷题笔记，让我offer拿到手软]

五、关注源码

源码学习的价值

其实学习源码最市侩的价值那就是面试会问了，比如说 HashMap 的一些经典问题：

1、加载因子为什么是 0.75？

2、为什么链表改为红黑树的阈值是 8?

3、HashMap的底层数据结构是什么？

4、解决hash冲突的办法有哪些？

5、HashMap数组的长度为什么是 2 的幂次方？

6、HashMap 的扩容方式？

这些问题只有通过源码才能得出比较准确的回答。

但是我个人认为阅读源码对我们最大的价值其实是我们可以学习借鉴源码设计中的优秀思想。

想象一下，我们每天做着CURD的996工作，根本没有机会接触优秀的项目设计思想。而阅读源码是我们最容易接触到优秀项目设计核心思想的机会。

其次阅读源码也可以在系统出现棘手的问题时候，可以快速定位解决。大大提升自己在职场中的核心竞争力。

有个同学说过一句话，给我的印象特别深刻，就是“有啥解决不了的？只要你肯阅读源码。”

六、项目管理能力

实现一个软件系统的过程，不仅只有编码，还涉及到项目安排，团队协调等一系列非技术因素，如果想从一名程序员走向管理岗，成为 team leader 或者开发经理，软件工程方面的知识就必须得跟得上。

要想写出一个好而美的程序，需要经过三个阶段。

第一阶段：有扎实的基本功，简单点说，就是要做到语法熟练、框架熟练，成为一名能够完成开发任务的“码农”。

第二阶段：从“码农”到“工程师”，在局部上，不仅要能够实现功能，还能关注功能之外的维度，比如健壮性、低耦合、可扩展等指标。

第三阶段：从“工程师”到“架构师”，不仅在局部上追求一个模块的好坏，而且还要从整个系统层面去掌控，合理安排资源的优先级，保证整个系统不会出现腐败等等。

所以要想成为一名优秀的架构师，项目管理能力是必不可少的。

比如项目范围管理、质量管理、资源/成本管理、风险管理等一系列管理能力。有兴趣的同学可以学习PMP，提升一下自己的项目管理能力。

传统预测项目管理

敏捷开发项目管理

说在最后

学习的过程，就好像登山一样，大概有 80% 的人在这个过程中会掉队。要想成为一名优秀的架构师，除了自身的努力，也需要一点点运气。

那么请相信我，只要目标明确，努力加上坚持，再加上一点点好运气，你就能登顶！

免费看 500 套技术教程的网站，希望对你有帮助

程序员快看-教程，程序员编程资料站 | CXYKK.COM

*最近无意间获得一份阿里大佬写的刷题笔记，一下子打通了我的任督二脉，进大厂原来没那么难。这是大佬写的， *[7701页的BAT大佬写的刷题笔记，让我offer拿到手软]

求一键三连：点赞、分享、收藏

我的技术网站：cxykk.com 里面有，500套技术系列教程、1万+道，面试八股文、BAT面试真题、简历模版，工作经验分享、架构师成长之路，全部免费，欢迎收藏和转发。