Github for the code:
Front end
back end
Content
i.Assignment Description
The requirement of the homework is to separate the front and back ends, so I searched a lot of materials on Baidu, csdn, bilibili and other websites, and finally determined that the front-end should use html+js+css to complete the interface Settings. The back end uses srping boot’s java language to complete the programming (later I consulted an outstanding software schoolmate and know that spring boot is overqualified for this task).
ii.PSP table
Personal Software Process Stages | Estimated Time(minutes) | Actual Time(minutes) |
---|---|---|
Planning | 20 | 35 |
• Estimate | 35 | 50 |
Development | 40 | 55 |
• Analysis | 35 | 60 |
• Design Spec | 20 | 30 |
• Design Review | 20 | 35 |
• Coding Standard | 50 | 100 |
• Design | 30 | 35 |
• Coding | 400 | 550 |
• Code Review | 100 | 100 |
• Test | 30 | 60 |
Reporting | ||
• Test Report | ||
• Size Measurement | 20 | 50 |
• Postmortem & Process Improvement Plan | 20 | 45 |
Sum | 820 | 1205 |
iii.Access link
The Link Your Class | 链接: https://bbs.csdn.net/forums/ssynkqtd-04 |
---|---|
The Link of Requirement of This Assignment | 链接: https://bbs.csdn.net/topics/617378696 |
The Aim of This Assignment | Make a back-end separation calculator |
MU STU ID and FZU STU ID | 832101329_21126178 |
iv.design and implementation process
(i).Front end
1.Design the user interface of the calculator using HTML and CSS.
2.Implement UI elements such as buttons, input fields, and display areas.
3.Add an event listener to the button to capture user input and take appropriate action.
4.Use JavaScript to handle basic arithmetic operations (+, -, *, /, %).
5.Create a form to display and interact with the calculation history.
6.Implement the “ans” button function to retrieve previous calculation results.
7.Design UI styles to enhance visual appeal.
(ii).Back end
.1.Set up the backend server using the Java programming language.
2.Design a database schema to store input strings and corresponding results.
3.Implement server-side logic to handle incoming requests from the front end.
4.The input string and results are stored in the database after each calculation.
5.Retrieves the last ten formula strings and their results for the history feature from the database.
6.Using different controllers to tackle different request
(iii).Statistic figure
Using mysql and manipulating the database with mybatisplus, the visualization tool uses Navicat16 and saves the table tb_calculator to record the calculation history
(iv).functional structure diagram
v.Code explanation
For Front end:
Use the eval function built into the vs code library function to do the basic arithmetic, send the ajax request through axios, and then the back end saves the record to the database:
2.An operation symbol used to implement a clear digit and a clear zero:
3.The front end sends requests to read the history to the back end:
4.Other codes like set button and appearance of the calculator are includeed in assignment1.
For back end:(.js file)
1.Receives the data sent by the front end and saves it to the database:
2.First, it is triggered by pressing the ans button
“getLast” then echoes the latest data back to the front end
Therefore, the last 10 records are displayed back to the front end through history, and the data is sorted according to the time saved in, so as to get the last 10 records:
vi.extra additon.
As I have little experience in software programming, I am not very familiar with the algorithm part, so I tried to optimize the interface, although it is not comparable to the interface of many outstanding students, but I really have tried my best.
Here is my style.css:
<style>
/* Basic Reset */
* {
border: none;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
/* body {} */
.center {
background-color: #ffffff;
border-radius: 50%;
height: 600px;
margin: auto;
width: 600px;
}
h1 {
color: #495678;
font-size: 30px;
margin-top: 20px;
padding-top: 50px;
display: block;
text-align: center;
text-decoration: none;
}
form {
background-color: #495678;
box-shadow: 4px 4px #3d4a65;
margin: 40px auto;
padding: 20px 5px 20px 20px;
width: 350px;
}
.btn {
outline: none;
cursor: pointer;
font-size: 20px;
height: 45px;
margin: 5px 0 5px 10px;
width: 45px;
}
.btn:first-child {
margin: 5px 0 5px 10px;
}
.btn,
#display,
form {
border-radius: 25px;
}
#display {
outline: none;
background-color: #98d1dc;
box-shadow: inset 6px 6px 0px #3facc0;
color: #dededc;
font-size: 20px;
height: 47px;
text-align: right;
width: 180px;
padding-right: 10px;
margin-left: 10px;
}
#history {
outline: none;
background-color: #ffffff;
box-shadow: inset 6px 6px 0px #e4e1e1;
border-radius: 10px;
color: #dededc;
font-size: 20px;
height: 47px;
text-align: right;
width: 300px;
padding-right: 10px;
margin-left: 10px;
}
.number {
background-color: #72778b;
box-shadow: 0 5px #5f6680;
color: #dededc;
}
.number:active {
box-shadow: 0 2px #5f6680;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.operator {
background-color: #dededc;
box-shadow: 0 5px #bebebe;
color: #72778b;
}
.operator:active {
box-shadow: 0 2px #bebebe;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.other {
background-color: #e3844c;
box-shadow: 0 5px #e76a3d;
color: #dededc;
}
.other:active {
box-shadow: 0 2px #e76a3d;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.el-textarea__inner::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.el-textarea__inner::-webkit-scrollbar-thumb {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #c3c3c3;
}
.el-textarea__inner::-webkit-scrollbar-track {
background-color: transparent;
}
</style>
vii.Presentation
Only front end(Early stage):
add back end to request:
Make history:
Click ans to access the history:
viii.Summary
After more study, I learned from my classmates that there are many easy ways to complete this assignment, such as using python, unity to automatically separate the front and back ends, and using Android system. Since I decided to use spring boot at the beginning of the task, I took many detours, searched a lot of materials and made reference. As a beginner, it laid a solid foundation for the research and development of our later team projects. Thanks to the excellent students and teaching assistants who provided me with learning materials and programs, I will continue to learn in this direction in the future, and try to add functions such as trigonometric functions and exponents to make the calculator more perfect.