前后端分离实现计算器

1.html+css+javascript+flask+mysql实现前后端分离计算器

这个作业属于哪个课程	课程连接
这个作业要求在哪里	作业要求连接
这个作业的目标	完善现有的计算器功能实现一个前后端分离的计算器
其他参考文献	网络上的各种资源

2.PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	20
Estimate	估计这个任务需要多少时间	5	5
Development	开发	120	240
Analysis	需求分析 (包括学习新技术）	600	700
Design Spec	生成设计文档	40	40
Design Review	设计复审	5	5
Coding Standard	代码规范 (为目前的开发制定合适的规范)	20	20
Design	具体设计	300	400
Coding	具体编码	800	600
Code Review	代码复审	100	100
Test	测试（自我测试，修改代码，提交修改）	200	300
Reporting	报告	30	30
Test Repor	测试报告	120	120
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	30	30
	总计	2390	2610

3.gitcode项目链接与代码规范链接

前端代码
后端代码

成品展示

原型设计方面，稍微设计了一下，本次作业要求为：页面设计复现越接近现有的计算器页面，附加分越高。没有理解这边的现有计算器指代的是什么，是上次作业的计算器，还是市面上成熟的计算器产品？，总之如果上次设计的不够好看，这次改一改总不能不行吧。


由于设计的比较简单，最后可以说是像素级复刻了吧

ans功能、括号匹配及历史记录展示

科学计算展示，不要问为什么是这样，iPhone自带计算器的逻辑就是这样滴^ ^。

简单的除零报错，以及括号不匹配的问题

汇率计算方面

汇率更改

5.设计实现过程

功能结构图

上次作业中，已经使用（html+javascript+css）设计了一个简易的计算器，这次作业在上次的基础上，通过原型设计，改良了一下计算机的ui界面，效果还算ok,后端部分，也可以说是第一次写吧，使用flask框架链接mysql数据库实现数据处理以及存储的部件，python自带的数据库工具也可以实现数据库的可视化。

6.代码说明

前端代码的部分过于冗长，在此不做过多的展示，感兴趣的可以到gitcode仓库中查看前端代码。

前端调用接口的过程，都比较类似，使用JavaScript和jQuery，尤其是$.post方法来进行异步HTTP(Ajax)请求，感觉已经足够应付本次作业中的极大多数情况，感兴趣的同样可以在gitcode中找到相应的代码，在这里展示一下汇率计算时前端的调用情况。

    function up_data2() {
        cur = $('#currency').val();
        time = $('#time').val();
        mode = $('#select_mode').val()
        var pareams = {}
        pareams.cur = cur
        pareams.time = time
        pareams.mode = mode
        $.post('/sendmt', pareams,show_result)
    }
     function show_result(res) {
        var show = document.getElementById("show")
         show.value = res['results']
         console.log(res['results'])
     }

后端处理的过程，这边展示一下更改利率表的过程，通过对前端数据的接收处理，然后通过字符串拼接的方式，组成sql语句以操纵数据库，例如本代码中，获取了前端的，存贷模式，更改的日期，更改后的值实现对利率表的更新。

@app.route('/change_table',methods=['POST','GET'])@#改表
def change_table():
    res1 = request.form['data']
    res2 = request.form['value']
    res3 = request.form['mode']
    print(res3)
    print(res1,res2,res3)
    table_name = "loan"
    if(request.form['mode']=='0'):
        table_name ='deposit'
    connection = get_db_connection()
    try:
        with connection.cursor() as cursor:
            sql = "REPLACE INTO {}(time,rate) VALUES(%s,%s)".format(table_name)
            cursor.execute(sql,(res1,res2))
            connection.commit()
            # results = cursor.fetchall()
    finally:
        connection.close()
    data = {}
    return jsonify(data)

利率计算方面，要求中并没有明确的要求，因此，在汇率计算方面，存款时自动计算最优的存款方式，当然，实际情况当然复杂的多，设计起来比较复杂，此计算的思路为，优先选择时间最长的方式，对于溢出的部分，再次判断最优的投资方法。

def deposit_cul(money, years):#采用自动计算最优解的思路,不接受利滚利
    time_l = [5,3,2,1,0.5,0.25,0.01]
    table = ['五年','三年','两年','一年','半年','三个月','活期存款']
    k = 0
    results = 0
    for i,time in enumerate(time_l):
        cnt = math.floor(years/time)
        results += cnt*time *(money*get_rate(0,table[i])*0.01)
        years = years%time
    return results

贷款利率计算方面，这边一开始思路比较不清晰，写了一个区间计费，即根据欠费的不同时间区间，匹配不同的贷款利率，例如一个人贷款7年，那么6个月内的利率为0.5，随着时间的增加，利率不断递增，实际的贷款利率计算可能比这复杂（分期还款）等，但是这不是本次作业的重点，因此不做过多介绍。

def loan_cul(money,years):#要求中没有介绍计费方式，这边按阶梯计费的思路处理
    cul_years = years
    time_l =[0,0.5,1,3,5,1000]
    table = ['六个月','一年','一至三年','三至五年','五年']
    results = 0
    for i,time in enumerate(time_l):
        print(i,time)
        if(years>time):
            if(years>time_l[i+1]):
                results += (money*get_rate(1,table[i])*0.01*(time_l[i+1]-time_l[i]))
            else:
                results += (money*get_rate(1,table[i])*0.01*(years-time_l[i]))
                break
    return results

在以上的汇率计算代码中，都调用了一个封装好的select查询语句，以便于从对应的表得到相应的利率信息。

def get_rate(mode,time):#获取对应表单的数据
    connetion =get_db_connection()
    cursor = connetion.cursor()
    table_name = 'loan'
    if(mode == 0): table_name='deposit'
    sql = "SELECT rate FROM {} WHERE time=%s".format(table_name)
    cursor.execute(sql,time)
    res = cursor.fetchall()
    connetion.close()
    return res[0][0]

7.心路历程和收获

总结：

这次作业的任务是继续完善上次的简易计算器，实现一个计算器似乎确实不算是一个很难的项目（也确实不是很难对大佬来说），不过对于毫无开发经验的我来说，简直太难辣！！但是感觉对新手来说难度和重写差不多，当然也确实不能把小白当成保护伞（都是大一大二欠的债），不过作业还是要完成的，其实分解完一个计算器的功能，以及需要学习的知识，会发现其实还算不是那么“无从开始”。
通过一定的学习，打通了前后端与数据库的连接，完成一些demo案例，后面的开发过程还算顺利，都是对demo的复杂化以及复用，最终的实现效果还是差强人意的，但是同时也花了大量的时间（一开始周五完成对小白太不友好啦！！）。

通过这次作业，我不仅提高了自己的前端和后端开发能力，还学习了如何进行原型设计和改进UI界面。最重要的是，我学会了如何使用Flask框架和MySQL数据库实现数据处理和存储，这对于我未来的Web开发具有重要意义。同时，我也认识到了学习和实践的重要性，只有不断地学习和尝试，才能不断提高自己的能力，完成更多的挑战。