Vue + Springboot实现基础计算器和利率计算器

072103420卢成熙

已于 2023-10-23 08:25:44 修改

阅读量547

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-13 11:57:11 首次发布

本文链接：https://blog.csdn.net/m0_74545832/article/details/133805366

版权

功能1：加减乘除、取余、括号运算,并将输入的字符串和结果存储到后端数据库中

这个作业属于哪个课程	<班级链接>
这个作业要求在哪里	<作业要求的链接>
这个作业的目标	实现基础计算器和利率计算器,前后端分离
其他参考文献	解决跨域问题

代码链接

frontend

backend

阿里巴巴Java开发手册

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	40	30
- Estimate	估计这个任务需要多少时间	10	20
Development	开发	650	700
- Analysis	需求分析 (包括学习新技术）	40	50
- Design Spec	生成设计文档	80	60
- Design Review	设计复审	40	55
- Coding Standard	代码规范 (为目前的开发制定合适的规范)	30	25
- Design	具体设计	40	30
- Coding	具体编码	350	360
- Code Review	代码复审	40	60
- Test	测试（自我测试，修改代码，提交修改）	70	60
Reporting	报告	100	100
- Test Report	测试报告	30	25
- Size Measurement	计算工作量	20	20
- Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	25
合计		1570	1620

展示成品

基础计算器

界面展示

功能1：加减乘除、取余、括号运算,并将输入的字符串和结果存储到后端数据库中

基本的+,-.*,/ 使用JavaScript的eval函数即可完成

功能2：清零回退

back按键回退一格,C清空

功能3：错误提示

当0做为除数时,会提示"0不可以作为除数!",当运算符出错或者括号不匹配时会有相应提示

功能4：读取历史记录

ans会将上一次的结果显示在display中,并且返回10条历史记录

利率计算器

界面展示:

数据库信息

tb_interest和tb_loan

功能1：计算存款、贷款利息

扩展功能：前端修改存贷款利息

修改成功后,同时回显操作信息,判断是否操作成功

扩展功能：参数检测和单选框切换存款和贷款

当输入利率和时长本身利率一致时,提示无需修改,当存/贷时长不存在时提示不存在

通过存款和贷款单选框来选定查询存/贷,修改存/贷

设计实现过程

前端:html,css,JavaScript完成前端计算器页面的展示,在利率计算器的设计上使用Vue项目,使用了饿了么Element-ui组件库,主要是为了界面精美些

后端:使用springboot(虽然有点大材小用,但只会这个了(勿喷 ),三个Controller分别处理不同的请求,基础计算器,利率计算器存款/贷款

数据库:使用mysql,并使用mybatisplus操作数据库,可视化工具使用了Navicat16,保存三张表tb_calculator,tb_interest,tb_loan 分别是计算历史记录,存款利率表,贷款利率表

代码说明

前端

eval函数做基础运算,axios发送ajax请求后端将记录保存至数据库,错误提示

回退清零操作

读取历史记录,前端发送请求

查询存/贷利息,通过判断radio的值来发不同的请求

修改存/贷利率,通过判断radio的值来发不同的请求

解决跨域问题(我也不知道为什么,但是加上这个后ajax请求发送就成功)

后端

将前端发送过来的数据保存至数据库

ans按键触发的事件

getLast将最新一个数据回显给前端

history将最近的10条记录回显给前端,通过保存进去的时间来对查出来的数据进行排序,从而得到最近的10条记录

InterestController

compute从后端数据库读取表格并计算结果回显给前端

update接收前端数据并更新至数据库

LoanController

compute方法计算贷款的利息

由于贷款的时长是一个区间,所以用大于等于来判断,从而找到区间范围内的利率

update用于修改贷款的利率,对于区间的处理同compute方法

数据库

application.yml配置文件

三张表格

心路历程和收获

Vue+Springboot的技术有点大材小用了,可能有点繁琐,但是只会这些了,通过这次项目,我学到了做项目前不能着急要先想好自己的思路,否则很容易在写代码的时候出现高耦合度的代码,导致一处改,处处改的问题,Vue是新学的有所收获同时也知道了Element-UI组件库,让后端程序员也能有稍微精美一些的界面,也学到了axios是ajax请求的封装,发送请求更加方便,但中间出现了跨域问题,查询资料也是很好地解决,参考资料,此次也额外学习到了gif制作的软件LICEcap(大佬勿喷)