使用Vue和SpringBoot实现前后端分离的计算器

我骑着指针就跑了 2023-10-22 15:47:41
这个作业属于哪个课程https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里https://bbs.csdn.net/topics/617377308
这个作业的目标实现前后端分离计算器
其他参考文献无

GitHub地址

前端代码

后端代码

目录

PSP表格

成品展示

1.基本计算器功能

     基本计算和科学计算

     报错处理

     ans键读取上次计算结果

     后台数据库展示

2.利率计算器

 设计实现过程

前端

后端

关键代码说明

心得体会

PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3030
• Estimate• 估计这个任务需要多少时间3030
Development开发14001100
• Analysis• 需求分析 (包括学习新技术）6050
• Design Spec• 生成设计文档6075
• Design Review• 设计复审3045
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3020
• Design• 具体设计4030
• Coding• 具体编码1000800
• Code Review• 代码复审6060
• Test• 测试（自我测试，修改代码，提交修改）12080
Reporting报告11080
• Test Repor• 测试报告3020
• Size Measurement• 计算工作量2015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划6045
 合计15401210

成品展示

1.基本计算器功能

     基本计算和科学计算

 

     报错处理

 

     ans键读取上次计算结果

后台数据库展示

 

2.利率计算器

 设计实现过程

前端

前端使用Vue框架进行编写实现拟态计算器，其中基础计算器的计算通过调用eval函数计算，使用axios编写接口与后端传送每次按下等于号后的算式和计算结果并存入数据库，按下ans键时同样编写axios接口从后端数据库中获取最后计算所得的结果

在切换利率计算器后主要有两个接口解向后端，用来向后端传送输入的金额和时间，获取从后端计算得来的利息

后端

后端使用SpringBoot框架进行编写，使用Mybatis框架操作数据库

关键代码说明

页面主要元素和布局设置

<template>
  <div id="app">
    <button @click="change()">{{ up_btn }}</button>
    <div class="calculator" v-show="show1">
      <div class="result" style="grid-area: result">{{ equation }}</div>
      <button style="grid-area: s" @click="append('Math.sin(')">sin</button>
      <button style="grid-area: c" @click="append('Math.cos(')">cos</button>
      <button style="grid-area: t" @click="append('Math.tan(')">tan</button>
      <button style="grid-area: l" @click="append('(')">(</button>
      <button style="grid-area: r" @click="append(')')">)</button>
      <button style="grid-area: g" @click="append('Math.sqrt(')">√</button>
      <button style="grid-area: ans" @click="getLast()">ans</button>
      <button style="grid-area: del" @click="deleteLastCharacter()">DEL</button>
      <button style="grid-area: ac" @click="clear()">AC</button>
      <button style="grid-area: add" @click="append('+')">+</button>
      <button style="grid-area: subtract" @click="append('-')">-</button>
      <button style="grid-area: multiply" @click="append('*')">*</button>
      <button style="grid-area: divide" @click="append('/')">/</button>
      <button style="grid-area: equal" @click="calculate()">=</button>
      <button style="grid-area: number-1" @click="append('1')">1</button>
      <button style="grid-area: number-2" @click="append('2')">2</button>
      <button style="grid-area: number-3" @click="append('3')">3</button>
      <button style="grid-area: number-4" @click="append('4')">4</button>
      <button style="grid-area: number-5" @click="append('5')">5</button>
      <button style="grid-area: number-6" @click="append('6')">6</button>
      <button style="grid-area: number-7" @click="append('7')">7</button>
      <button style="grid-area: number-8" @click="append('8')">8</button>
      <button style="grid-area: number-9" @click="append('9')">9</button>
      <button style="grid-area: number-0" @click="append('0')">0</button>
      <button style="grid-area: dot" @click="append('.')">.</button>
    </div>
    <div class="rate_calculator" v-show="show2">
      <h3 class="text" style="grid-area: t1">输入存款金额</h3>
      <input class="textbox" style="grid-area: t2" type="number" placeholder="输入存款金额" v-model="dep_amount">
      <h3 class="text" style="grid-area: t3">输入存储时间（年）</h3>
      <input class="textbox" style="grid-area: t4" type="number" placeholder="输入存储时间（年）" v-model="dep_time">
      <button style="grid-area: t5" @click="cal1()">计算</button>
      <input class="textbox" style="grid-area: t6" type="number" placeholder="利息" v-model="dep_int">
      <h3 class="text" style="grid-area: t7">输入贷款金额</h3>
      <input class="textbox" style="grid-area: t8" type="number" placeholder="输入贷款金额" v-model="loan_amount">
      <h3 class="text" style="grid-area: t9">输入贷款时间（年）</h3>
      <input class="textbox" style="grid-area: t10" type="number" placeholder="输入贷款时间（年）" v-model="loan_time">
      <button style="grid-area: t11" @click="cal2()">计算</button>
      <input class="textbox" style="grid-area: t12" type="number" placeholder="贷款" v-model="loan_int">
    </div>
  </div>
</template>
.rate_calculator{
  display: grid;
  grid-template-areas:
    "t1 t2"
    "t3 t4"
    "t5 t6"
    "t7 t8"
    "t9 t10"
    "t11 t12";
}
.calculator {
  --button-width: 100px;
  --button-height: 80px;
  display: grid;
  grid-template-areas:
    "result result result result result"
    "s l r del ac"
    "c number-7 number-8 number-9 divide"
    "t number-4 number-5 number-6 multiply"
    "g number-1 number-2 number-3 subtract"
    "ans number-0 dot equal add";
  grid-template-columns: repeat(5, var(--button-width));
  grid-template-rows: repeat(6, var(--button-height));
  box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
    8px 8px 16px -10px rgba(0, 0, 0, 0.15);
  padding: 24px;
  border-radius: 20px;
}

前端axios接口展示

cal2(){
      axios({
        method:'post',
        url:'/api/cal2',
        data:{
          loan_amount:this.loan_amount,
          loan_time:this.loan_time,
        }
      }).then(res=>{
        console.log(res.data);
        this.loan_int=res.data;
      })
    },
    cal1(){
      axios({
        method:'post',
        url:'/api/cal1',
        data:{
          dep_amount:this.dep_amount,
          dep_time:this.dep_time,
        }
      }).then(res=>{
        console.log(res.data);
        this.dep_int=res.data;
      })
    },
 calculate() {
      try {
        const res = eval(this.equation);
        const result = res.toFixed(3);
        if (isNaN(result)) {
          throw new Error("Invalid expression");
        }

        axios({
          url:'http://localhost:8080/save',
          method:'post',
          data:{
            equation:this.equation,
            result:result.toString(),
          }
        }).then(res=>{
          console.log(res);
        })

        this.equation = result.toString();
      } catch (error) {
        console.error(error);
        axios({
          url:'http://localhost:8080/save',
          method:'post',
          data:{
            equation:this.equation,
            result:"Error",
          }
        }).then(res=>{
          console.log(res);
        })
        this.equation = "Error";
      }
    },
 getLast(){
      console.log(1);
      axios({
        method:'get',
        url:'/api/getLast',
      }).then(res=>{
        console.log(res.data)
        if(this.equation=="0"){
          this.equation=res.data.data.result;
        }
        else if(res.data.data.result=="Error"){
          this.equation="Error";
        }
        else{
          this.equation+=res.data.data.result;
        }
        
      
      })
      
    },

后端配置文件

#?????
spring.datasource.url=jdbc:mysql://localhost:3306/cal?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=1234

#??mybatis?????
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

#???????? ? ??????????
mybatis.configuration.map-underscore-to-camel-case=true
server.port=8080

后端主要controller类展示

@CrossOrigin
@Slf4j
@RestController
public class CalculatorController {
    @Autowired
    private CalculatorService calculatorService;
    @PostMapping("/save")
    public Result save(@RequestBody Calculator calculator){
        calculatorService.save(calculator);
        log.info("save success");
        return Result.success();
    }
    @GetMapping("/getLast")
    public Result getLast() {
        Calculator calculator = calculatorService.getLast();
        log.info("getLast success");
        return Result.success(calculator);
    }
}

@RestController
@CrossOrigin
public class DepController {
    @Autowired
    private DepService depService;
    @PostMapping("/cal1")
    public Float get_int(@RequestBody Dep dep){
        List<Float> rate = depService.get_rate();
        Float time = dep.getDep_time()*12;
        Float amount = dep.getDep_amount();
        Float count = time;
        Float dep_int = null;
        if(time<=3){
            dep_int = amount* rate.get(0)/100;
        } else if (time<=6) {
            dep_int = amount*rate.get(1)/100;
        } else if (time<=12) {
            dep_int=amount*rate.get(2)/100;
        } else if (time<=24) {
            dep_int=amount*rate.get(3)/100;
        } else if (time<=36) {
            dep_int=amount*rate.get(4)/100;
        } else {
            dep_int=amount*rate.get(5)/100;
        }
        return dep_int;
    }
}

@RestController
@CrossOrigin
public class LoanController {
    @Autowired
    private LoanService loanService;
    @PostMapping("/cal2")
    public Float get_int(@RequestBody Loan loan){
        List<Float> rate = loanService.get_rate();
        Float time = loan.getLoan_time()*12;
        Float amount = loan.getLoan_amount();
        Float loan_int = null;
        if(time<=6){
            loan_int = amount* rate.get(0)/100;
        } else if (time<=12) {
            loan_int = amount*rate.get(1)/100;
        } else if (time<=36) {
            loan_int=amount*rate.get(2)/100;
        } else if (time<60) {
            loan_int=amount*rate.get(3)/100;
        } else {
            loan_int=amount*rate.get(4)/100;

    } return loan_int;
}}

后端数据库操作代码

@Mapper
public interface CalculatorMapper {
    @Insert("insert into cal.res (equation, result) VALUES (#{equation},#{result})")
    void save(Calculator calculator);
    @Select("SELECT * FROM cal.res ORDER BY id DESC LIMIT 1;")
    Calculator getLast();
}

@Mapper
public interface DepMapper {
    @Select("select dep_rate from cal.dep")
    List<Float> get_rate();
}

@Mapper
public interface LoanMapper {
    @Select("select loan_rate from cal.loan")
    List<Float> get_rate();
}

心得体会

通过这次的作业，我系统性地学习了Vue框架相关的知识，学会了如何将前后端互联以实现数据互通，学习了axios编写接口的方法，同时也加深了我对SpringBoot框架的了解，强化了使用Mybatis框架操作数据库的方法，对web应用开发的理解更上一层楼

...全文
251 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
基于Vue+SpringBoot的计算器应用.zip
基于VueSpringBoot的计算器应用 项目概述 本项目是一个基于Vue和SpringBoot的前后端分离计算器应用，旨在实现更完善的计算器功能，并使用任意可视化技术实现一个前后端分离的计算器。项目包含了基础计算器功能、科学计算器功能以及利率计算器功能。 项目基本信息 这个作业属于哪个课程 [2301计算机学院软件工程](https:bbs.csdn.netforumsssynkqtd05) : : 这个作业要求在哪里 [第二次作业前后端交互计算器](https:bbs.csdn.nettopics617377308) 这个作业的目标 实现更完善的计算器功能，使用任意可视化技术实现一个前后端分离的计算器 其他参考文献 [vue帮助文档](https:v2.cn.vuejs.org)、[springboot帮助文档](https:docs.spring.iospringbootdocscurrentreferencehtmlindex.html) Github项目地址 PSP表格 PSP
(源码)基于Vue和Spring Boot的计算器系统.zip
# 基于Vue和Spring Boot的计算器系统 ## 项目简介 本项目是一个基于Vue和Spring Boot的前后端分离计算器系统。它不仅实现了基础的计算器功能，如加减乘除、取余、括号运算等，还扩展了科学计算器和利率计算器的功能。系统通过前后端分离的架构，前端使用Vue框架进行页面展示和用户交互，后端使用Spring Boot框架处理业务逻辑和数据存储。 ## 项目的主要特性和功能 1. 基础计算器功能 加减乘除、取余、括号运算。 清零回退、错误提示、读取历史记录。 2. 科学计算器功能 支持基本的数学函数，如平方、平方根、正弦、余弦、对数等。 历史记录功能，方便用户查看之前的计算结果。 3. 利率计算器功能 计算存款和贷款的利息。 支持定期存款和活期存款的利息计算。 前端修改存贷款利息，实现基础的增删改查功能。 4. 前后端分离
java大作业-前端用的是vue，后端springboot+mybatis.zip,BMI计算器
java大作业____前端用的是vue，后端springboot+mybatis.zip,BMI计算器
基于SpringBoot+vue 的母婴护理知识共享系统源码数据库文档.zip
基于SpringBoot+vue 的母婴护理知识共享系统源码数据库文档.zip
517-[springboot]智能健康饮食系统.zip
java+vue+springboot源代码+配套文档+教程
2301-计算机学院-软件工程

158

社区成员

364

社区内容

发帖
与我相关
我的任务
社区描述
FZU-CS-SE
软件工程 高校
社区管理员
  • LinQF39
  • Jcandc
  • chjinhuu
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章