基于Spring+Vue的前后端分离的计算器

WuShF.top

已于 2024-06-15 14:10:08 修改

阅读量1.2k

点赞数 25

分类专栏：软件工程文章标签： spring vue.js java

于 2024-06-15 02:40:18 首次发布

本文链接：https://blog.csdn.net/m0_49303993/article/details/139692863

版权

软件工程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

麻雀虽小，五脏俱全

该项目已部署上线：http://calculator.wushf.top/
并通过Gitee Go流水线实现持续部署。

需求分析

表达式求值
- 支持加减乘除四则运算、支持高精度
获取日志

Api文档定义

前后端分离，人不分离

通过Apifox定义接口细节，协调前后端开发工作。

软件架构设计

Spring-MVC

把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

Controller起到不同层面间的组织作用，用于控制应用程序的流程。它处理事件并作出响应。本项目共定义了一个controller：

CalculateController：接收/calculate的请求，返回JSON

Model由实体Bean来实现，包括Pojo、Mapping和Service对象，在源代码/pojo目录下：

/pojo
- CalculateLogPojo：ORM技术，对象关系映射自数据库表项calculate_log。
- CalculateRequestPojo：DTO数据传输对象，封装发送到/calculate的POST请求。
- QueryPojo：DTO数据传输对象，封装发送到/calculate的GET请求。
- ResultPojo<T>：DTO数据传输对象，封装全局的请求返回对象。
/mapping
- LogMapper：持久层实现，负责面向本地文件的日志读写。
- LocalLogMapper：持久层实现，负责面向关系型数据MySql的日志读写。
/service
- CalculateService：计算服务，提供静态方法用于实现表达式求值
- LogService：日志服务，用于调用持久层方法，实现日志记录
- QueryService：日志服务，用于调用持久层方法，实现日志读取

View层通过Vue实现，前后端分离。

Vue-MVVM

Model–view–viewmodel：使用命令Command控制，使用Binding来绑定相关数据

Model在script标签下实现。
View视图层在template和style标签下实现。
本项目需求较简单，主要代码在App.vue中完成。

Vue端详细设计

声名响应式对象

history：日志列表
expression：输入的表达式
res：运算结果
queryFrom：查询操作的query参数，取值file或sql，表示从文件中读或数据库中读
queryPage：查询操作的query参数，值类型为数字，表示查询第几页，默认为0
querySize：查询操作的query参数，值类型为数字，每页的大小，默认为10

查询历史记录

该操作的query参数从全局的响应式对象中获取。
input标签可能会将用户输入的数据类型改为string，需要判断是否为数字，如果类型是字符串，通过正则表达式判断是否为整数字符串。

const getHistory = () => {

  if (queryFrom.value != "sql" && queryFrom.value != 'file') {
    Notification.error('sql or file');
    return;
  } else if ((typeof queryPage.value === 'number' || /^\d+$/.test(queryPage.value)) && queryPage.value % 1 === 0 && queryPage.value >= 0
             && (typeof querySize.value === 'number' || /^\d+$/.test(querySize.value)) && querySize.value % 1 === 0 && querySize.value > 0) {
    axios({
      method: "get",
      url: baseUrl + "/calculate",
      params: {
        from: queryFrom.value,
        page: queryPage.value,
        size: querySize.value
      }
    }).then(({data}) => {
      history.splice(0, history.length, ...data?.data);
    })
  } else {
    Notification.error('别搞');
  }
}

当用户输入内容非法时，通过arco.design提供的通知组件，告知用户错误原因。

发送计算请求

需要对用户输入的字符串进行预处理：

如果最后一个字符是运算符而非数字，那么递归地删除最后一个运算符字符

const calculate = () => {
  expression.value.replace(/([^+\-*v]|^)-/g, '$1+-');
  let expressionLength = expression.value.length;
  let lastChar = expressionLength > 0 ? expression.value[expressionLength - 1] : '';
  let prefixExpression = expressionLength == 0 ? expression.value.substring(0, expression.value.length - 1) : "";
  while (operatorSet.indexOf(lastChar) != -1) {
    expression.value = prefixExpression;
    expressionLength = expression.value.length;
    lastChar = expressionLength > 0 ? expression.value[expressionLength - 1] : '';
    prefixExpression = expressionLength == 0 ? expression.value.substring(0, expression.value.length - 1) : "";
  }
  axios({
    method: "post",
    url: baseUrl + "/calculate",
    data: {
      expression: expression.value
    }
  }).then(({data}) => {
    res.value = data?.data;
  }).catch(() => {
    res.value = "Error"
  })
}

输入操作

输入操作可能的输入比较多，包括数字、运算符、小数点.等，需要分别判断。

对输入事件只定义一个input函数，具体的内容通过函数传参输入，提高可重用性。
通过将编译器指定为typescript：<script setup lang="ts">，实现类型判断、语法检查等操作。确保数字字符在输入时，也是string类型，而非number。

const pointFlag = ref(false);
const input = (cmd: string) => {
  expression.value = String(expression.value);
  const expressionLength = expression.value.length;
  const lastChar = expressionLength > 0 ? expression.value[expressionLength - 1] : '';
  const prefixExpression = expressionLength > 1 ? expression.value.substring(0, expressionLength - 1) : "";
  if (res.value == "Calculating") {
    return;
  } else if (cmd == "C") {
    expression.value = res.value;
    res.value = "";
  } else if (cmd == "<-") {
    expression.value = prefixExpression;
  } else if (operatorSet.indexOf(cmd) != -1) {
    if (cmd != '-' && expressionLength == 0) {
      return;
    } else if (operatorSet.indexOf(lastChar) != -1 || lastChar == '.') {
      expression.value = prefixExpression + cmd;
    } else {
      expression.value = expression.value + cmd;
      pointFlag.value = false;
    }
  } else if (cmd == '=') {
    calculate();
    res.value = "Calculating"
    pointFlag.value = false;
  } else if (cmd == '.') {
    if (lastChar != '.' && !pointFlag.value && operatorSet.indexOf(lastChar) == -1) {
      expression.value = expression.value + cmd;
      pointFlag.value = true;
    }
  } else {
    expression.value = expression.value + cmd;
  }
}

当连续输入多个运算符时，需要判断运算符是否合法，比如，连续输入+和-时，应将上一步输入的+修改为-。
一个数字应当只有一个小数点，即两个运算符之间最多有一个。相关边界条件的处理操作，均在input中实现。

响应式字体

通过JS查询文本父元素的宽高，动态赋值，并添加监听器，在每次窗口大小变化时，更新文字大小。

const updateFontSize = () => {
  const root = document.documentElement;
  const controlDom = document.getElementById("control");
  const buttons = controlDom.querySelector("button");
  const buttonsHeight = buttons.clientHeight * 0.3;
  root.style.setProperty("--font-size-button", buttonsHeight + 'px');
  const screenDom = document.getElementById("screen");
  const screenHeight = screenDom.clientHeight;
  const expressionHeight = screenHeight * 0.2;
  root.style.setProperty("--font-size-expression", expressionHeight + 'px');
  const resHeight = screenHeight * 0.4;
  root.style.setProperty("--font-size-res", resHeight + 'px');
}
window.addEventListener("resize", updateFontSize);

更新文字大小操作，通过对CSS变量赋值实现，在需要使用响应式字体的地方，将font-size取值为CSS变量。

表达式溢出滚动

用户可能输入高精度表达式，溢出窗格时，需允许横向滚动。浏览器默认的横向滚动是shift + wheel。
通过CSS和JS实现鼠标滚轮控制表达式位置。

onMounted(() => {
  updateFontSize();
  const expressions = document.querySelectorAll('.expression, .res');
  expressions.forEach(expression => {
    expression.addEventListener("wheel", (event: WheelEvent) => {
      if (event.deltaY) {
        event.preventDefault();
        expression.scrollLeft += Number(event.deltaY);
      }
    })
  })
})

改操作通过对表达式DOM添加监听器实现，需要在Vue生命周期在Mounted时执行，通过组合式的onMounted方法，添加回调函数。

CSS细节处理

在实现业务逻辑之外，还为按钮、自定义组件添加了动画效果，在hover、active等状态下均有不同的显示效果，保证用户视觉体验。

Spring端详细设计

CalculateController

用于响应发送到/calculate下的GET和POST请求。根据请求内容，调用不同的Service对象：

QueryService：负责查询本地日志文件或数据库，通过@Autowired注解自动注入
CalculateService：负责表达式求值，由静态的工具方法实现。

对HTTP请求的参数进行封装：

@RequestBody用于映射请求体到对象CalculateRequestPojo中
@ModelAttribute用于映射Query参数到QueryPojo中。@RequestParam会将Query参数逐个映射到同名的函数入参中，不能直接映射到QueryPojo中。

@RestController
@RequestMapping("/calculate")
public class CalculateController {
    @Autowired
    QueryService queryService;

    @LogAnnotation
    @PostMapping
    public ResultPojo<Double> calculate(@RequestBody CalculateRequestPojo calculateRequestPojo) {
        double res = CalculateService.calculate(calculateRequestPojo.getExpression());
        return ResultPojo.success(res);
    }

    @GetMapping
    public ResultPojo<List<CalculateLogPojo>> query(@ModelAttribute QueryPojo queryPojo) {
        if (queryPojo == null) return ResultPojo.success();
        return queryService.query(queryPojo);
    }
}

表达式求值

计算服务工具类

该工具类内实现了表达式求值的具体算法。
对外暴露calculate方法供调用，其他private私有变量和方法用于封装可重用的计算过程，简化代码设计，由类内成员函数调用。
synchronized关键字保证多线程环境下线程间数据的隔离。
使用Java自带的BigDecimal高精度类，简化高精度计算任务的代码设计。

public class CalculateService {
    private static final Map<Character, Integer> priority = new HashMap<>();
    private static StringBuilder stringBuilder = new StringBuilder();
    private static Stack<BigDecimal> num = new Stack<>();
    private static Stack<Character> op = new Stack<>();

    static {
        priority.put('(', 0);
        priority.put(')', 0);
        priority.put('+', 1);
        priority.put('*', 2);
        priority.put('/', 2);
        priority.put('-', 3);
    }

    private static void evaluate() {
        BigDecimal a = new BigDecimal(0);
        BigDecimal b = new BigDecimal(0);
        BigDecimal x = new BigDecimal(0);
        if (!num.empty()) a = num.pop();
        char c = op.pop();
        if (c == '-') {
            x = b.subtract(a);
        } else {
            if (!num.empty()) b = num.pop();
            if (c == '+') x = b.add(a);
            else if (c == '*') x = b.multiply(a);
            else if (c == '/') x = b.divide(a, 6, RoundingMode.HALF_UP);
        }
        num.push(x);
    }

    private static void flashStringBuilder() {
        if (stringBuilder == null || stringBuilder.isEmpty()) return;
        BigDecimal currentNum = BigDecimalParser.parse(stringBuilder.toString());
        num.push(currentNum);
        stringBuilder.setLength(0);
    }

    public static synchronized double calculate(String expression) {
        num.clear();
        op.clear();
        for (Character c : expression.toCharArray()) {
            if (Character.isDigit(c) || c == '.') {
                stringBuilder.append(c);
            } else {
                flashStringBuilder();
                if (c == '(') {
                    op.push(c);
                } else if (c == ')') {
                    while (op.peek() != '(') evaluate();
                    op.pop();
                } else {
                    while (!op.isEmpty() && priority.get(op.peek()) >= priority.get(c)) evaluate();
                    op.push(c);
                }
            }
        }
        if (!stringBuilder.isEmpty()) flashStringBuilder();
        while (!op.isEmpty()) evaluate();
        return num.pop().doubleValue();
    }
}

并发测试

由于精力有限，只设计了14条测试样例，涵盖：整数、浮点数、高精度、正负数、有括号等情况下的四则运算。

测试结果

本地日志读写

日志写入本地文件

写入本地日志操作，通过获取当前日期，创建并按时间命名日志文件，如果已经存在同日期的日志文件，那么在该文件后追加新的日志。
以JSON格式写入文件，方便读出、方便在程序外通过文件阅读工具阅读。

@Override
public ResultPojo<String> save(Object object) {
    String date = calendar.get(Calendar.YEAR) + String.format("%02d%02d", calendar.get(Calendar.MONTH) + 1, calendar.get(Calendar.DAY_OF_MONTH));
    File file = new File("./calculator/" + date + ".log");
    try {
        if (!file.getParentFile().exists()) file.getParentFile().mkdirs();
        if (!file.exists()) file.createNewFile();
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
    try (FileOutputStream fileOutputStream = new FileOutputStream(file, true);) {
        String json = gson.toJson(object);
        fileOutputStream.write((json + "\n").getBytes());
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
    return ResultPojo.success();
}

从本地文件读出日志

日志按时间分文件存储，如果知道了具体的时间，那么可以通过读取以该日期格式化后命名的日志文件，获取当天的日志信息。
由于日志的追加方式是在文末，因此最新的日志记录是在文件末尾而非开头。
在接口定义上，允许求具体某一天的日志。
如果不指定日期，那么将合法的日期文件，按离当前时间的远近排序，递归地查询离当前时间较近的日志信息。
在接口文档中定义size参数，为查询的日志数。

如果当前日志文件的条数不足size，那么就递归查询离改日志文件较近的日期的日志文件。直到累计的日志条数达到size，或者无日志文件可读。
如果当前日志文件的条数超过size，那么可以通过滑动窗口的方式读取，滑动窗口的宽度为要查询的记录数。通过滑动窗口可以避免在内存受限条件下，直接读取大文件导致内存不足的潜在问题。

private ResultPojo<List<CalculateLogPojo>> queryFileByDate(QueryPojo queryPojo) {
    String filePath = "./calculator/" + queryPojo.getDate() + ".log";
    List<CalculateLogPojo> list = new LinkedList<>();
    File file = new File(filePath);
    if (!file.isFile()) return ResultPojo.success(list);
    int page = queryPojo.getPage() == null ? 0 : queryPojo.getPage();
    int size = queryPojo.getSize() == null || queryPojo.getSize() == 0 ? 10 : queryPojo.getSize();
    try (BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))) {
        String line = "";
        int sizeLimit = (page + 1) * size;
        for (int i = 0; (line = bufferedReader.readLine()) != null; i++) {
            CalculateLogPojo calculateLogPojo = gson.fromJson(line, CalculateLogPojo.class);
            list.add(calculateLogPojo);
            if (list.size() > sizeLimit) list.removeFirst();
        }
        list = list.subList(0, max(list.size() - page * size, 0));
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
    return ResultPojo.success(list.reversed());
}

@Override
public ResultPojo<List<CalculateLogPojo>> query(QueryPojo queryPojo) {
    if (queryPojo.getDate() != null) {
        return queryFileByDate(queryPojo);
    }
    File file = new File("./calculator/");
    if (!file.isDirectory()) return ResultPojo.success();
    List<Integer> logFilesName = new LinkedList<>();
    for (File logFile : Objects.requireNonNull(file.listFiles())) {
        if (Pattern.matches(regex, logFile.getName()) && logFile.isFile()) {
            String stringName = logFile.getName();
            stringName = stringName.substring(0, stringName.lastIndexOf("."));
            Integer name = Integer.parseInt(stringName);
            logFilesName.add(name);
        }
    }
    logFilesName.sort(Comparator.reverseOrder());
    List<CalculateLogPojo> list = new LinkedList<>();
    for (Integer i : logFilesName) {
        queryPojo.setDate(i);
        ResultPojo<List<CalculateLogPojo>> resultPojo = queryFileByDate(queryPojo);
        int need = queryPojo.getSize() - resultPojo.getData().size();
        list.addAll(resultPojo.getData());
        if (need > 0) {
            queryPojo.setSize(need);
        } else {
            break;
        }
    }
    return ResultPojo.success(list);
}

数据库日志读写

https://baomidou.com/getting-started/

数据库日志读写通过MyBatis-Plus实现，通过按照文档要求，定义LogMapper、LogService实现插件预定义的CRUD增删查改操作。

日志写入数据库

在LogService中，重载了save方法，在记录日志到数据库的同时记录到本地文件。

从数据库中读出日志

分页查询操作需要按MyBatis-Plus文档要求配置插件：https://baomidou.com/plugins/pagination/
查询操作的配置信息，在QueryService中实现：

@Service
public class QueryService {
    @Autowired
    LogMapper logMapper;
    @Autowired
    LocalLogMapper localLogMapper;

    public ResultPojo<List<CalculateLogPojo>> query(QueryPojo query) {
        String from = query.getFrom();
        if (from == null || from.equals("sql")) {
            QueryWrapper<CalculateLogPojo> queryWrapper = new QueryWrapper<>();
            queryWrapper.orderByDesc("date");
            if (query.getDate() != null) queryWrapper.eq("date", query.getDate());
            int queryPage = query.getPage() == null ? 0 : query.getPage();
            int querySize = query.getSize() == null ? 10 : query.getSize();
            Page<CalculateLogPojo> page = new Page<>(queryPage, querySize);
            logMapper.selectPage(page, queryWrapper);
            List<CalculateLogPojo> list = page.getRecords();
            return ResultPojo.success(list);
        }
        return localLogMapper.query(query);
    }
}

默认页数、页面大小可以写入配置文件，由于精力有限，在本项目中暂未实现。

AOP实现日志记录

创建LogAnnotation注解，将其添加到需要记录日志的地方。

@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.METHOD)
public @interface LogAnnotation {
}

整个LogAop类是一个切面。它被@Aspect注解标注，表示这是一个切面类。
定义切入点表达式@Around("@annotation(top.wushf.calculator.annotation.LogAnnotation)")，任何被@LogAnnotation注解标注的方法都会触发recordLog方法的执行。
recordLog是一个环绕通知Around advice，当匹配的切入点方法被调用时，这个方法会在目标方法执行前后运行，执行日志记录逻辑。

@Aspect
@Component
public class LogAop {
    @Autowired
    private LogService logService;

    @Around("@annotation(top.wushf.calculator.annotation.LogAnnotation)")
    public Object recordLog(ProceedingJoinPoint joinPoint) throws Throwable {
        Object[] args = joinPoint.getArgs();
        long beginTime = System.currentTimeMillis();
        ResultPojo resultPojo = (ResultPojo) joinPoint.proceed();
        long endTime = System.currentTimeMillis();
        long duration = endTime - beginTime;
        CalculateRequestPojo calculateRequestPojo = (CalculateRequestPojo) args[0];
        String expresstion = calculateRequestPojo.getExpression();
        double res = (double) resultPojo.getData();
        CalculateLogPojo calculateLogPojo = new CalculateLogPojo(null, new Timestamp(System.currentTimeMillis()), expresstion, res, duration);
        logService.save(calculateLogPojo);
        return resultPojo;
    }
}

在目标方法执行前后获取系统时间，做差求出计算用时。
通过joinPoint.getArgs()获得传入的参数，该方法的参数为DTO对象CalculateRequestPojo。
通过接收joinPoint.proceed()的返回指得到运算结果，运算结果封装在全局的返回结果类ResultPojo<T>中。
执行LogService的save方法，将信息写入日志。

跨域访问

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

在本地Debug的过程中，发现在Apifox中可以正常响应请求，在Vue的浏览器环境下就报错。原因是出现了跨域访问问题。
由于源Origin的端口是Vue3默认的5137，请求的端口的spring默认的8080，端口不一致，浏览器会发送CORS预检请求。预检请求会向该URL发送OPTIONS请求，响应中会携带有关跨域访问的信息。
如果要允许跨域访问，可以尝试在Controller上添加@CrossOrigin注解。但亲测，只在GET方法上成功生效，POST仍然访问失败。
本项目使用的解决方案是，通过配置WebMvcConfigurer，实现跨域资源访问。

package top.wushf.calculator.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/calculate").allowedOriginPatterns("*").allowCredentials(true).allowedHeaders("*").allowedMethods("*").maxAge(3600);
    }
}

DevOps开发实践

持续交付CD

本项目的前后端均托管在Gitee仓库，通过部署流水线，实现持续集成、持续部署。

配置文件分离

由于Spring配置文件会指定数据库用户名密码等敏感信息，在本项目中选择将其排除在版本控制之外。

在部署脚本中，通过主函数参数指定外部配置文件。

PID=$(ps -ef | grep calculator-0.0.1-SNAPSHOT.jar | grep -v grep | awk '{print $2}')

# 如果找到进程，则杀死该进程
if [ -n "$PID" ]; then
  echo "找到进程 ID: $PID，正在杀死该进程..."
  kill -9 $PID
  echo "进程已被杀死。"
else
  echo "没有找到正在运行的calculator-0.0.1-SNAPSHOT.jar的进程。"
fi

# 重新启动程序
echo "正在重新启动calculator-0.0.1-SNAPSHOT.jar..."
nohup java -jar /home/admin/calculator-server/target/calculator-0.0.1-SNAPSHOT.jar --spring.config.location=/root/calculator-server.yml > /home/admin/calculator-server/calculator.log 2>&1 &
echo "程序已重新启动。"

软件设计模式在本项目中的应用

Command命令

尝试以对象来代表实际行动。命令对象可以把行动action及其参数封装起来

input = (cmd: string) =>{}

根据输入的字符，执行不同的动作，而不必为每一种输入定义单独的函数。

RESTful Api

REST中使用HTTP动词来表示对资源的操作，这与命令模式相似，通过不同的命令执行不同的操作。

REST表现层状态转换，该设计风格体现在本项目Api文档的定义中。
本项目围绕计算需求，对于URL：/calculate

求值请求通过POST方法推送表达式
日志请求通过GET方法获取，并通过设置Query参数实现自定义查询

DAO数据访问对象

将数据访问逻辑从业务逻辑中分离出来，并将数据访问操作封装在一个专用的类中

为数据库表、HTTP请求等封装数据访问对象：

Proxy代理

代理者可以作任何东西的接口：网络连接、存储器中的大对象、文件或其它昂贵或无法复制的资源。

在Spring AOP中，通过代理模式创建目标对象的代理对象。这个代理对象控制对目标对象的访问，允许在方法调用之前和之后插入额外的行为。

Strategy策略

将每个算法封装起来，使它们可以互换使用

Spring端持久层有本地文件实现和数据库实现。在读日志时，对于“有指定日期”和“无指定日期”、“从数据库”和“从本地文件”，分别封装具体的方法，在QueryService中，有策略类负责调度，根据QueryPojo，执行不同的策略。

由于本项目较为简单，并没有为每个算法定义单独的类，而是封装在具有相近语义的类下。