Back-end separation calculator

Github for the code:
Front end
back end

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.