24127167-Wu Zhengyang-First Assignment-Front-End and Back-End Separation Calculator

[832402223吴正杨]

Assignment 1: Front-End and Back-End Separation Calculator System

Course for This Assignment	Software Engineering Practice
Assignment Requirements	Front-end / back-end separated calculator system
Objectives	Master front-end/back-end separation, API development, database persistence, system design, and technical blog writing
Name / Student ID	WU Zhengyang / 24127167

Repositories

• Frontend: https://github.com/Wzy13850918263/24127167_calculator_frontend
• Backend: https://github.com/Wzy13850918263/24127167_calculator_backend

1. PSP Table

PSP2.1	Stages	Estimated (min)	Actual (min)
Planning	Planning	30	25
Development	Development	320	360
· Analysis	· Requirements analysis	30	25
· Design	· System/API/DB design	40	45
· Coding	· Backend (RPN + DB)	90	110
· Coding	· Frontend page	60	70
· Test	· Test all features	30	35
Reporting	Reporting	150	160
Total	Total	500	545

2. Requirements Analysis

This assignment requires a strictly separated front-end / back-end calculator. All computation must run on the backend; the frontend only collects the expression and sends it via HTTP POST. History must persist in a backend database (no localStorage). Must support operator precedence, parentheses, decimals, unary minus. No eval/exec. Two independent GitHub repos, each with README.md and codestyle.md. Support deleting history by id.

Tech stack: Python + FastAPI, SQLite, plain HTML/CSS/JS, hand-written Reverse Polish Notation.

3. System Design

Browser (index.html)
   │ HTTP/JSON
   ▼
FastAPI (main.py)
   ├── Expression parser (tokenize → infix-to-postfix → evaluate)
   ├── History module (SQLAlchemy ORM)
   ▼
SQLite (calculator.db)

Endpoint	Method	Purpose
/api/calculate	POST	Calculate expression and save to history
/api/history	GET	Get all history (descending)
/api/history/{id}	DELETE	Delete a record by id

4. Feature Demonstration

Main Interface

Basic Arithmetic (12+8=20)

Decimal (2.5*4=10)

Parentheses ((1+2)*3=9)

Unary Minus (3*-2=-6)

Division by Zero

Invalid Expression

History List

Refresh Keeps History

Delete Record

5. Key Code

Frontend: submit expression

async function submitCalc(){
    const resp = await fetch(BACKEND_URL + "/api/calculate", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({expression: inputDom.value.trim()})
    });
    const data = await resp.json();
    resultDom.innerText = data.success ? "Result = " + data.result : "Error: " + data.message;
    loadHistory();
}

Backend: calculate API

@app.post("/api/calculate")
def calc(req: CalcRequest):
    db = SessionLocal()
    try:
        res = calculate_expression(req.expression)
        record = CalcHistory(expression=req.expression, result=res)
        db.add(record); db.commit()
        return {"success": True, "expression": req.expression, "result": res}
    except ZeroDivisionError:
        return {"success": False, "message": "Division by zero"}
    except Exception as e:
        return {"success": False, "message": "Invalid expression: " + str(e)}
    finally:
        db.close()

Unary minus tokenization

if c == "-":
    if i == 0 or expr[i-1] in "(+-*/":
        tokens.append("u-")   # unary minus
    else:
        tokens.append(c)      # binary subtraction

6. Summary

1. CORS: opened index.html via file:// blocked fetch; fixed with CORSMiddleware.
2. Unary minus was the hardest part — 3*-2 and leading -5 needed a separate u- token with highest precedence.
3. All errors caught at the API layer to avoid 500s.
4. History verified by refreshing and restarting the backend.
5. Key takeaway: frontend is dumb (display + request), backend is the brain (compute + store).