目录
Description Of Problem-Solving Ideas
Introduction
In this blog post, I utilized HTML to create the user interface, and on the backend, I elevated my calculator with Java, enabling it to include features for reviewing previous calculation history and performing scientific computations. The following is an overview of the code design process and the ultimate outcome.
Student’s information
The Link Your Class | https://bbs.csdn.net/forums/ssynkqtd-04 |
Link of Requirement of This Assignment | https://bbs.csdn.net/topics/617378696 |
The Aim of This Assignment | Create a back-end separation calculator with a visual interface. |
MU STU ID and FZU STU ID | 21126399/832101315 |
Github Link
GitHub - Cyrene56/Back-end-separation-calculator
PSP FORM
Personal Software Process Stages | Estimated Time(minutes) | Actual Time(minutes) |
---|---|---|
Planning | 20 | 30 |
• Estimate | 30 | 30 |
Development | 10 | 15 |
• Analysis | 30 | 35 |
• Design Spec | 30 | 40 |
• Design Review | 30 | 35 |
• Coding Standard | 60 | 80 |
• Design | 30 | 35 |
• Coding | 45 | 60 |
• Code Review | 20 | 30 |
• Test | 45 | 45 |
Reporting | 40 | 45 |
• Test Report | 45 | 45 |
• Size Measurement | 20 | 25 |
• Postmortem & Process Improvement Plan | 30 | 40 |
Sum | 485 | 590 |
Description Of Problem-Solving Ideas
In this code, the frontend is built using HTML, CSS, and Vue.js to create the user interface and handle user input, while the backend utilizes Java to manage the calculation and data storage logic. Communication between the frontend and backend is facilitated through HTTP requests and responses. This results in the development of a basic calculator interface where users can input mathematical expressions and perform calculations. Additionally, it allows users to view their previous calculation history and offers scientific computation capabilities.
Code
front code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CalBeta</title>
<link rel="stylesheet" href="./cal.css">
<style>
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div class="calculator" id="app" style="background-color: green;">
<input type="text" v-model="infos" class="display" disabled>
<button @click="getNumber1('(')">(</button>
<!-- ... (more HTML buttons and elements) ... -->
</div>
<script src="./calBeta.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
firstnum: "",
endnum: "",
operator: "",
fscod: true,
infos: "",
listNum: 1
},
methods: {
def() {
this.getList(this.listNum)
},
clearDisplay() {
this.infos = "";
this.firstnum = "";
this.endnum = ""
},
getNumber(e) {
// ...
},
getNumber1(e) {
// ...
},
getOperator(e) {
// ...
},
calculate() {
// ...
},
getList(str) {
// ...
}
}
});
</script>
</body>
</html>
<style>
.calculator {
width: 400px;
margin: 0 auto;
padding: 20px;
background: #ddd;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
.display {
grid-column: span 4;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
padding: 5px;
border: none;
background: #fff;
height: 120px;
}
button {
width: 100%;
height: 40px;
font-size: 14px;
margin: 5px;
border-radius: 5px;
border: none;
background: #ffffff;
cursor: pointer;
}
</style>
back code
package com.jisuanji.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jisuanji.config.jisuan;
import com.jisuanji.entity.JsjHistory;
import com.jisuanji.service.IJsjHistoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/jisuanji")
public class JsjHistoryController {
@Autowired
IJsjHistoryService iJsjHistoryService;
@RequestMapping("/list")
public JsjHistory list(String str){
QueryWrapper<JsjHistory> queryWrapper = new QueryWrapper<>();
QueryWrapper<JsjHistory> queryWrapper1 = queryWrapper.orderByDesc("id");
List<JsjHistory> list = iJsjHistoryService.list(queryWrapper1);
Map<String,JsjHistory> map = new HashMap<>();
for (int i = 1; i <= list.size(); i++) {
map.put(i+"",list.get(i-1));
}
JsjHistory jsjHistory = map.get(str);
return jsjHistory;
}
@RequestMapping("/jisuan")
public String jisuan(String number1, String number2, String type) throws Exception {
jisuan js = null;
if (type.equals("+")){
js = new add();
} else if (type.equals("-")) {
js = new subtract();
} else if (type.equals("*")) {
js = new multiply();
} else if (type.equals("/")){
js = new divide();
}
else if (type.equals("%")){
js = new yu();
} else {
throw new Exception("Invalid calculation method");
}
String jisuan = js.jisuan(number1, number2);
JsjHistory jsjHistory = new JsjHistory();
jsjHistory.setType(type);
jsjHistory.setNumber1(number1);
jsjHistory.setNumber2(number2);
jsjHistory.setJg(jisuan);
iJsjHistoryService.save(jsjHistory);
return jisuan;
}
}
class add implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.add(bigDecimal1);
return add.toString();
}
}
class subtract implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = a new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.subtract(bigDecimal1);
return add.toString();
}
}
class multiply implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.multiply(bigDecimal1);
return add.toString();
}
}
class divide implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.divide(bigDecimal1, 8, BigDecimal.ROUND_HALF_UP);
return add.toString();
}
}
class yu implements jisuan{
@Override
public String jisuan(String number1, String number2) {
int a = Integer.parseInt(number1) % Integer.parseInt(number2);
return Integer.toString(a);
}
}
total code
js:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CalBeta</title>
<link rel="stylesheet" href="./cal.css">
<style>
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div class="calculator" id="app" style="background-color: green;">
<input type="text" v-model="infos" class="display" disabled>
<button @click="getNumber1('(')">(</button>
<button @click="getNumber1(')')">)</button>
<button @click="getOperator('%')">%</button>
<button @click="clearDisplay()">C</button>
<button @click="getNumber1('sin(')">sin</button>
<button @click="getNumber1('cos(')">cos</button>
<button @click="getNumber1('tan(')">tan</button>
<button @click="def">deg</button>
<button @click="getNumber('7')">7</button>
<button @click="getNumber('8')">8</button>
<button @click="getNumber('9')">9</button>
<button @click="getOperator('/')">/</button>
<button @click="getNumber('4')">4</button>
<button @click="getNumber('5')">5</button>
<button @click="getNumber('6')">6</button>
<button @click="getOperator('*')">*</button>
<button @click="getNumber('1')">1</button>
<button @click="getNumber('2')">2</button>
<button @click="getNumber('3')">3</button>
<button @click="getOperator('-')">-</button>
<button @click="getNumber('0')">0</button>
<button @click="getNumber('.')">.</button>
<button @click="calculate">=</button>
<button @click="getOperator('+')">+</button>
</div>
<script src="./calBeta.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
firstnum: "",
endnum: "",
operator: "",
fscod: true,
infos:"",
listNum:1
},
methods: {
def(){
this.getList(this.listNum)
},
clearDisplay() {
this.infos = "";
this.firstnum = "";
this.endnum = ""
},
getNumber(e) {
if (this.fscod) {
this.firstnum += e+""
this.infos = this.firstnum + ""
}else{
this.endnum += e+""
this.infos = this.firstnum+this.operator + ""+ this.endnum + ""
}
console.log("111", e)
},
getNumber1(e) {
console.log("222", e)
},
getOperator(e) {
this.fscod = false
this.operator = e
console.log("333", e)
this.infos = this.firstnum+this.operator+""
},
calculate() {
var that = this
$.ajax({
url: 'http://localhost:8081/jisuanji/jisuan',// 请求的URL
method: 'GET', // 请求方法(GET、POST等)
dataType: 'text',
async: "true",
data:{
number1:this.firstnum,
number2:this.endnum,
type:this.operator
},
success: function (response) {
that.infos = response// 请求成功时的回调函数
that.firstnum = ""
that.endnum = ""
that.operator = ""
that.fscod=true
that.listNum = 1
console.log(response); // 打印服务器返回的数据
},
error: function (xhr, status, error) { // 请求失败时的回调函数
console.log('请求失败');
console.log(xhr);
console.log(status);
console.log(error);
}
});
},
getList(str) {
var that = this
$.ajax({
url: 'http://localhost:8081/jisuanji/list',// 请求的URL
method: 'GET', // 请求方法(GET、POST等)
dataType: 'json',
async: "true",
data:{
str:str
},
success: function (response) {
// 请求成功时的回调函数
that.fscod=true
that.listNum += 1
that.infos =response.jg + ""
console.log(that.infos); // 打印服务器返回的数据
},
error: function (xhr, status, error) { // 请求失败时的回调函数
console.log('请求失败');
console.log(xhr);
console.log(status);
console.log(error);
}
});
}
}
});
</script>
</body>
</html>
<style>
.calculator {
width: 400px;
margin: 0 auto;
padding: 20px;
background: #ddd;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
.display {
grid-column: span 4;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
padding: 5px;
border: none;
background: #fff;
height: 120px;
}
button {
width: 100%;
height: 40px;
font-size: 14px;
margin: 5px;
border-radius: 5px;
border: none;
background: #ffffff;
cursor: pointer;
}
</style>
java:
package com.jisuanji.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jisuanji.config.jisuan;
import com.jisuanji.entity.JsjHistory;
import com.jisuanji.service.IJsjHistoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
*/
@RestController
@RequestMapping("/jisuanji")
public class JsjHistoryController {
@Autowired
IJsjHistoryService iJsjHistoryService;
@RequestMapping("/list")
public JsjHistory list(String str){
QueryWrapper<JsjHistory> queryWrapper = new QueryWrapper<>();
QueryWrapper<JsjHistory> queryWrapper1 = queryWrapper.orderByDesc("id");
List<JsjHistory> list = iJsjHistoryService.list(queryWrapper1);
Map<String,JsjHistory> map = new HashMap<>();
for (int i = 1; i <= list.size(); i++) {
map.put(i+"",list.get(i-1));
}
JsjHistory jsjHistory = map.get(str);
return jsjHistory;
}
@RequestMapping("/jisuan")
public String jisuan(String number1,String number2,String type) throws Exception {
jisuan js = null;
if (type.equals("+")){
js = new add();
} else if (type.equals("-")) {
js = new subtract();
} else if (type.equals("*")) {
js = new multiply();
}else if (type.equals("/")){
js = new divide();
}
else if (type.equals("%")){
js = new yu();
}else {
throw new Exception("计算方式输入错误");
}
String jisuan = js.jisuan(number1, number2);
JsjHistory jsjHistory = new JsjHistory();
jsjHistory.setType(type);
jsjHistory.setNumber1(number1);
jsjHistory.setNumber2(number2);
jsjHistory.setJg(jisuan);
iJsjHistoryService.save(jsjHistory);
return jisuan;
}
}
class add implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.add(bigDecimal1);
return add.toString();
}
}
class subtract implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.subtract(bigDecimal1);
return add.toString();
}
}
class multiply implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.multiply(bigDecimal1);
return add.toString();
}
}
class divide implements jisuan{
@Override
public String jisuan(String number1, String number2) {
BigDecimal bigDecimal = new BigDecimal(number1);
BigDecimal bigDecimal1 = new BigDecimal(number2);
BigDecimal add = bigDecimal.divide(bigDecimal1,8,BigDecimal.ROUND_HALF_UP);
return add.toString();
}
}
class yu implements jisuan{
@Override
public String jisuan(String number1, String number2) {
int a = Integer.parseInt(number1)%Integer.parseInt(number2);
return a+"";
}
}
Flow chart
Operate video
Summary
Through this assignment, I have learned how to use databases for data transmission and the development of both frontend and backend, as well as their interaction. I believe this assignment was more challenging than the previous one, but it also brought greater rewards. I have gained a deeper understanding of the Java programming language.