First Assignment: FrontEnd and BackEnd Separation Calculator System

Submitter: Wu JunJia
FZU ID: 832401223
MU ID: 24125181

---

Table of Contents

• 1. Assignment Overview
• 2. Project Design
• 3. Project Implementation Description
• 4. PSP Table
• 5. Project Demo Materials
• 6. GitHub Repository and Code Standards
• 7. Project Summary

---

1. Assignment Overview

The objective of this assignment is to build a web calculator system with a "separated frontend and backend architecture". The calculator supports multi-term four arithmetic operations. All calculation history is persistently saved in the backend H2 database. Each record includes record ID, expression, result, device information and complete timestamp. The frontend web page handles UI interaction independently. The SpringBoot backend provides RESTful APIs. Frontend and backend communicate with each other via JSON over HTTP.

---

2. Project Design

2.1 System Architecture

The project uses a separated frontend-backend architecture:

1. Frontend : Static HTML + CSS + JavaScript web page, placed in SpringBoot static resource folder. Responsible for page rendering and button interaction. It sends JSON requests through `fetch` to the backend and receives returned results.

2. Backend : SpringBoot framework with layered structure: Controller → Service → Entity → Repository.

3. Database : H2 file-based database for persistent storage. Data will not be lost after restarting the application.

Architecture Diagram:

Browser Frontend <--HTTP & JSON--> SpringBoot Backend API <--> H2 Database

 

2.2 Database Table Design

Table name: calc_history

Field Name	Type	Description
id	Long	Auto-increment record ID
expression	String	Calculation expression input by user
result	String	Calculation result
device_info	String	Client browser / device information
create_time	LocalDateTime	Calculation timestamp

 

2.3 API Design

Method	Endpoint	Request Body	Response	Function
POST	/api/calc	{expr:"1+2", deviceInfo:"xxx"}	{"result":"3"}	Calculate expression and save history record
GET	/api/history	-	List of history records	Query all calculation history
DELETE	/api/history	-	{"msg":"Cleared"}	Delete all history records

 

2.4 Calculator Interaction Logic

1. After calculation completes, the result "will NOT be cleared automatically". The result stays on the input box.

2. After finishing a calculation:

    - Press "number button" : Start a brand-new expression and discard the old result.

    - Press "operator (+ - * /)" : Use the previous result as the left operand to continue calculation.

3. If there is no expression OR the calculation is already finished, clicking the equal button will do nothing, and no new history record will be created.

---

3. Project Implementation Description

3.1 Development Environment

- JDK: 21

- Framework: Spring Boot 3.2.0

- Database: H2 Database 

- Build Tool: Maven

- Frontend: HTML, CSS, Vanilla JavaScript

- Version Control: Git + GitHub

 

3.2 Development Workflow

1. "Requirement Analysis" : Analyze assignment requirements, define calculator interaction rules, database fields and the boundary between frontend and backend.

2. "System Design" : Design layered backend structure, database tables, REST APIs and frontend state flag `isCalculated`.

3. "Backend Coding" :

    - Create entity class, Repository and Controller;

    - Implement Reverse Polish Notation algorithm in Service layer to parse mathematical expressions;

    - Configure H2 file database to enable data persistence.

4. "Frontend Coding" : Build web UI, implement button logic, add `isCalculated` state flag, send requests to backend and load history records.

5. "Test & Debug" : Test four arithmetic operations and edge cases (division by zero, repeated equal clicks), fix interaction bugs.

6. "Deployment & Verification" : Launch SpringBoot locally, access web page from browser and verify all functions.

7. "Accessibility Test" : Use Chrome Lighthouse to test web accessibility and optimize HTML ARIA attributes.

8. "Documentation" : Write README, create independent English code standard documents for frontend and backend, push source code to GitHub.

 

3.3 Problems and Solutions

1. "Problem" : Newer JDK removed Nashorn script engine. `eval()` cannot be used to evaluate expressions directly.

> "Solution": Implement Reverse Polish Notation algorithm to parse expressions manually on backend, without script engine.

2. "Problem" : H2 uses in-memory mode by default, all history data is lost after application shutdown.

> "Solution" : Modify `application.yml` configuration and switch to file storage mode for persistent data.

3. "Problem" : The interaction logic of equal button, number buttons and operator buttons does not meet requirements.

> "Solution" : Add `isCalculated` state flag to control button behavior after calculation completes.

---

4. PSP Table

Phase	Estimated Time (minutes)	Actual Time (minutes)
Requirement analysis	15	18
System design	30	34
Front-end development	180	192
Back-end development	180	147
Expression parser	150	135
Database design	60	23
History module	90	76
Front-end and back-end integration	75	41
Testing	120	115
Deployment	45	48
Blog writing	60	89
Other work	45	22

---

5. Project Demo Materials

Project directory structure screenshot

GitHub repository homepage screenshot (contains two English code standard files)

Calculator web interface screenshot

---

6. GitHub Repository and Code Standards

• Front-end repository: https://github.com/echo832401223/Calculator_frontend
• Back-end repository: https://github.com/echo832401223/Calculator_backend
• Front-end code standard: https://github.com/echo832401223/Calculator_frontend/blob/main/CONTRIBUTING.md
• Back-end code standard: https://github.com/echo832401223/Calculator_backend/blob/main/CONTRIBUTING.md

---

7. Project Summary

This project implements a web calculator with separated frontend and backend, fulfilling all required interaction functions and database persistence. During development, I learned SpringBoot layered development, REST API design and H2 database configuration. I also practiced Git version control, code standards and web accessibility testing. The project strictly follows the idea of frontend-backend separation. Frontend and backend have separate responsibilities to reduce coupling.