前后端分离的计算器

前后端分离计算器

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05?typeId=5171427
这个作业要求在那里	https://bbs.csdn.net/topics/617377308
课程目标	实现前后端分离计算器
其他参考文献	https://kaifa.baidu.com/searchPage?wd=CSS%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B&hmsr=aladdin

git仓库链接和代码规范链接

gitcode

PSP表格

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

成品展示

基本运算

科学运算

清零回退

查看历史记录

数据库

利息计算

设计实现过程

设计思想

因为上次作业没怎么准备，没有任何基础，做的不怎么样，这次就重写了所有部分，参照百度计算器做的ui和功能，主要就是通过原型设计完成，先把ui完成，然后再一步一步的完成各个功能

前端

前端就是参照百度计算器ui，使用html+css+javascript做的，因为在数据采集课上用的框架就是flask和XMLHttpRequest通信，所以前端基本就是这么做的。

后端

使用flask搭起一个框架，主要实现了连接数据库，存储历史记录，查找历史记录

数据库存储

数据库存储是使用mysl存储，用navicate可视化数据库。与接口是pymysql进行增删改查。

关键代码

前后端通信处理处理

@app.route("/")
def ui():
    return flask.render_template("cal.html")

@app.route('/save_history', methods=['POST'])
def save_history():
    data = request.get_json()
    expression = data['expression']
    result = data['result']
    time= datetime.now()
    # 插入数据
    cursor.execute("INSERT INTO calculator (time,expression, result) VALUES (%s, %s, %s)",
                   (time,expression, result))
    mydb.commit()

    return 'success'


@app.route('/get_calculator_data')
def get_calculator_data():
    cursor.execute("SELECT expression,result FROM calculator")
    results = cursor.fetchall()
    calculations = []
    for row in results:
        calculations.append(list(row))
    return jsonify({'data': calculations})


@app.route('/clear_table', methods=['POST'])
def clear_table():
    cursor.execute("DELETE FROM calculator")
    mydb.commit()
    return 'success'

存储数据处理

app = Flask(__name__,template_folder=r"D:\python代码\pythonProject\spider\selenium\templates")
CORS(app, supports_credentials=True)
# 连接MySQL数据库
mydb = pymysql.connect(
    host="127.0.0.1",
    port=3306,
    user="root",
    password="123456",
    database="crawl"
)
cursor = mydb.cursor()

cursor.execute('''CREATE TABLE IF NOT EXISTS calculator 
                 (time VARCHAR(255),
                  expression VARCHAR(255),
                  result VARCHAR(255),
                  created_at TIMESTAMP
                   )''')
mydb.commit()

数据存储指令

cursor.execute("INSERT INTO calculator (time,expression, result) VALUES (%s, %s, %s)",
                   (time,expression, result))
    mydb.commit()

前端几个比较好看的ui细节设计

格子对角灰暗对比

.calculator .op {
    background-image: linear-gradient(135deg, #D9DCE8, rgb(255 255 255 / 30%));
    box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.8),
    inset -1px -1px 1px 0px rgba(40, 49, 85, 0.3),
    1px 1px 3px 0px rgba(40, 49, 85, 0.1);
}

鼠标悬停时加个颜色

.buttons button:hover {
    background-color: grey;
}

按等于号后Ans上移动，input展示result

document.getElementById('result_show').value="Ans="+tempt_expr;
        document.getElementById('input_show').value = expr;

心路历程和收获

这次一个人完成前后端开发，学到了很多，知道了前后端通信接口一定要交流好，不然数据传输就可能出点问题，基本基础开始学习的，学到了很多前端html和css以及js。还需努力，继续学习