前后端分离实现计算器

Calculator

Calculator
这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	继续完善计算器并且实现前后端分离
其他参考文献	无

源代码链接

0. PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	20
• Estimate	• 估计这个任务需要多少时间	15	10
Development	开发	630	610
• Analysis	• 需求分析 (包括学习新技术）	30	30
• Design Spec	• 生成设计文档	60	75
• Design Review	• 设计复审	30	45
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	20
• Design	• 具体设计	30	30
• Coding	• 具体编码	320	300
• Code Review	• 代码复审	60	60
• Test	• 测试（自我测试，修改代码，提交修改）	70	50
Reporting	报告	90	60
• Test Repor	• 测试报告	30	20
• Size Measurement	• 计算工作量	15	10
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	45	30
	合计	660	630

1. 设计实现过程

1. 功能结构图
   
2. 前端
   前端的实现基于前一次作业加一个页面和网络请求即可，网络请求直接用原生的 XMLHttpRequest 。工具：WebStorm
3. 后端
   后端实现的其实就是一个网络请求加数据库交互，用 Python 的 flask 和 pymysql 来实现这两个功能。工具：PyCharm
4. 数据库
   数据库存历史记录和利率，三个表就能搞定，用 mysql 来实现。工具：DataGrip
5. 总结
   整体的实现还是比较基础的，实现起来直接都用原生的就好，对学习比较有帮助。这种简单的功能个人感觉没有必要用什么比较厉害的框架。

2. 成品展示

1. 基础运算

2. 清零回退

3. 错误提示

4. 历史记录

5. 科学计算器

6. 利息计算

7. 修改利率

8. 原型设计

原型设计链接

3. 代码说明

1. 前端

前端这次主要加的就是网络请求部分
后端返回一个 json 包含 data

let xhr = new XMLHttpRequest();

function getFun(url, params, callback) {
    let new_url = url;
    if (params) {
        new_url += "?";
        for (let key in params) {
            new_url += key + "=" + params[key] + "&";
        }
        new_url = new_url.substring(0, new_url.length - 1);
    }
    // console.log(new_url);
    xhr.open("GET", new_url, true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                if (callback) {
                    let json = JSON.parse(xhr.responseText);
                    callback(json["data"]);
                }
            }
        }
    }
}

function postFun(url, params, callback) {
    let form = new FormData();
    // params -> map
    for (let key in params) {
        form.append(key, params[key]);
    }
    xhr.open("POST", url, true);
    xhr.send(form);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                if (callback) {
                    let json = JSON.parse(xhr.responseText);
                    callback(json["data"]);
                }
            }
        }
    }
}

function getDepositRate(time, callback) {
    return getFun(URL.get_deposit_rate, {"time": time}, callback);
}

   .......

callback 为函调函数，用于 get 后端返回的数据来更新 UI 界面

function getInterest() {
    let rateType = document.getElementById("rateType");
    let time = document.getElementById("getTimeInput").value;
    let money = document.getElementById("getMoneyInput").value;
    let resultElement = document.getElementById("rateResult");
    if (rateType.innerHTML === RATE_TYPE.DEPOSIT) {
        getDepositRate(time, (data) => {
            console.log(data)
            resultElement.innerHTML = data * money / 100;
        })
    } else {
        getLoanRate(time, (data) => {
            console.log(data)
            resultElement.innerHTML = data * money / 100;
        })
    }
}

code

2. 后端

后端使用 flask 和 pymysql 模块完成

1. flask 的使用，

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 解决跨域问题

@app.route("/")
def test():
    return "hello world"
if __name__ == "__main__":
    app.run()

2. pymysql 的使用

import pymysql
db = pymysql.connect(host="localhost", port=3306, user="root", password="balabala", db="calculator", charset="utf8")
cur = db.cursor()
sql = "....."
cur.execute(sql)
data = cur.fetchall()
# db.commit()   -->> update

3. example

from flask import Flask, request
import pymysql
from flask_cors import CORS
import json
import datetime

app = Flask(__name__)
CORS(app) # 解决跨域问题
db = pymysql.connect(host="localhost", port=3306, user="root", password="balabala", db="calculator", charset="utf8")
cur = db.cursor()

@app.route("/get_deposit_rate")
def get_deposit_rate():
    time = request.args.get("time")  # flask 中需要用 flask 来传参
    deposit_sql = f"select rate from deposit where time <= {time} order by time desc"
    cur.execute(deposit_sql)
    deposit_rate = cur.fetchone()
    if deposit_rate is None:
        deposit_rate = 0
    else:
        deposit_rate = deposit_rate[0]
    data = json.dumps({"data": deposit_rate})
    return data

code

3. 数据库

数据库操作比较简单，就建表然后查询、插入

create table deposit
(
    id int auto_increment primary key,
    time double not null,
    rate double not null
);

mysql 语句 :

select rate from deposit where time <= {time} order by time desc; // get_deposit_rate
select rate from loans where time <= {time} order by time desc; // get_loans_rate
update deposit set rate={rate} where time={time}; // set_deposit_rate
update loans set rate={rate} where time={time}; // set_loans_rate
select pro, ans from history order by time desc limit 10; // get_history
insert into history(time, pro, ans) values('{time}', '{pro}', '{ans}'); // save_history

code

4. 心路历程与收获

本次作业要求继续完善计算器并且实现前后端分离，包括前端页面、网络请求、数据库操作等等，还算基础，都使用原生的技术完成。对于这种较小、学习性的项目，一上来就 Vue、Sprin Boot 的其实不太好。对作业中要求绘原型比较疑惑，真全栈发展？这次作业复习了前后端分离、数据库操作的知识，算是有一定收获。