前后端交互计算器

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	完成一个前后端交互计算器
其他参考文献	…

Gitcode仓库地址

Gitcode

PSP表格

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

成品展示

科学计算器

1、简单计算

进行简单的加减运算

2、科学计算

三角函数、对数、取余等运算

3、报错

4、清零

5、返回

6、历史记录

利率计算器

虽然做出了页面，代码也敲完了，但是得不出结果。

功能结构图

// An highlighted block
var foo = 'bar';

原型设计

设计实现过程

前端：html+css+js三件套，设计好页面
后端：数据库，使用python
设计好页面、按钮，实现基本的运算逻辑，过程中使用一些函数实现
后端使用python实现和数据库的数据的存取。前提是先在数据库建立好表。

代码展示

前端：

结果计算以及发送给数据库

function Calculate()
{  
    try
    {
        txt=document.getElementById('t1').value;
        temp=txt.replace(/sin/g, 'Math.sin');
        temp=temp.replace(/cos/g, 'Math.cos');
        temp=temp.replace(/tan/g, 'Math.tan');
        temp=temp.replace(/sqrt/g, 'Math.sqrt');
        temp=temp.replace(/lg/g, 'Math.log10');
        temp=temp.replace(/\^/g, '**');
        temp=temp.replace(/π/g, 'Math.PI');
        txt=eval(temp);
        if(isNaN(txt))
        {
            document.getElementById('t2').value ='除数不能为0';
        }
        else if(txt=='Infinity')
        { 
            document.getElementById('t2').value ='除数不能为0';

        }
        else
        {
            document.getElementById('t2').value = txt;
        }
    }
    catch
    {
        document.getElementById('t2').value = '输入错误';  
    }

    expression = document.getElementById('t1').value;
    result = document.getElementById('t2').value;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/to_history', true); 
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function () 
    {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
    };
    const data = {
        expression: expression,
        result: result
        };

        xhr.send(JSON.stringify(data));

    txt=document.getElementById('t1').value;
}

从数据库读取历史记录

function get()
{
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:5000/get_history', true);
    xhr.onreadystatechange = function () 
    {
      if (xhr.readyState === 4) 
      {
        if (xhr.status === 200) 
        {
            Data = JSON.parse(xhr.responseText);
            array = Data['data'];
            let string="";
            for(let i=0;i<array.length;i++)
            {
                string +=array[i][0];
                string+=" = ";
                string+=array[i][1]+"\n";
            }
            document.getElementById('t1').value = string;
        } else 
        {
            console.error('错误: ' + xhr.status);
        }
      }
    };
    xhr.send();
}

function SwitchRate() 
{
    document.querySelector(".calculator").style.display = "none";
    document.getElementById("RateCalculator").style.display = "block";
}

function SwithNormal() 
{
    document.getElementById("RateCalculator").style.display = "none";
    document.querySelector(".calculator").style.display = "block";
}

清零和返回

```function AC()
{
    txt=document.getElementById('t1').value;
    txt = '';
    document.getElementById('t1').value = '';
    document.getElementById('t2').value = '';
    txt=document.getElementById('t1').value;
}

function Delete() 
{
    txt=document.getElementById('t1').value;
    txt = txt.slice(0, -1);
    document.getElementById('t1').value = txt;
    txt=document.getElementById('t1').value;
}

后端代码

发送历史记录：

@app.route('/to_history', methods=['POST'])
def to_history(): 
    try:
        data = request.get_json() 
        expression = data.get('expression')
        result = data.get('result')
        time = datetime.datetime.now()
        data = (time, expression, result)
        insert = "INSERT INTO HISTORY VALUES (%s, %s, %s)" 
        cursor.execute(insert, data)
        conn.commit()
        response_message = "ok"
        return jsonify({"message": response_message})

    except Exception as e:
        return jsonify({"error"})

@app.route('/get_history', methods=['GET'])

读取历史记录：

@app.route('/get_history', methods=['GET'])
def get_history():
        cursor.execute("SELECT expression, result FROM HISTORY ORDER BY time DESC LIMIT 10")
        data = cursor.fetchall()
        return jsonify({"data": data})

税率计算器：
前端：

var money='';
var time='';
var rate='';
var type='';
var Data;

function Huo()
{
    type="Huo";
}

function Dead()
{
    type="Dead";
}

function Loan()
{
    type="Loan";
}

function money(){
    money = document.getElementById('money').value;
}

function time(){
    time = document.getElementById('time').value;
}

function Taxcalculate()
{
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/Taxcalculate', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) 
        {
            if (xhr.status === 200) 
            {
                Data = JSON.parse(xhr.responseText);
                document.getElementById('rate').value=Data["result"];
            } 
        }
    };

    const data = {
        time : time,
        money: money,
        type: type
    };
    xhr.send(JSON.stringify(data));
}

后端：

@app.route('/Taxcalculate', methods=['POST'])
def Taxcalculate():
        data = request.get_json()  
        money = data.get('money')
        time = data.get('time')
        type= data.get('type')
        time = int(time)
        insert = ""
        if type == "Huo":
            insert = "SELECT rate FROM Huo"
        if type == "Dead":
            if time <6:
                 month=3
            elif time <12:
                 month=6
            elif time <24:
                 month=12
            elif time <36:
                 month=24
            elif time < 60:
                month=36
            else:
                 month=60
        insert = "SELECT rate FROM Dead WHERE month = " + month
        if type == "Loan":
            
            if time < 6:
                month = 6
            elif time < 12:
                month = 12
            elif time < 36:
                month = 36
            elif time <60:
                month = 60
            else:
                 month=61;
            insert = "SELECT rate1 FROM l WHERE month = " + month

心路历程和收获

通过这次作业，我终于实现了前后端分离的计算器，提升了错误处理和异常处理的能力，最主要的是学习了很多的新的知识，有待进一步的提高。及时反思和总结经验，以便在未来的项目中能够更好地应用所学。