HTML前端+flask后端实现前后端分离的科学计算器和税率计算器

目录

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

PSP表格

成品展示

设计实现过程

代码说明

---

这个作业属于哪个课程	https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里	https://bbs.csdn.net/topics/617377308
这个作业的目标	制作一个实现前后端交互的计算器

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

102101510梁菲汎 / 第二次软工作业：前后端分离的科学计算器 · GitCode

PSP表格

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

成品展示

以下是基本计算 

以下是科学计算 

以下是其他一些科学计算 

 展示历史记录

税率计算器 

数据库端接收到的东西 

设计实现过程

      我将在三个部分里详细叙述我的设计实现过程。

        一、界面设计。

原型设计参照了菜鸟教程里的“简单html计算器”的界面和百度计算器的界面。我并不太喜欢百度计算器的界面，太素了。基本功能，按钮样式以及页面布局参照了百度计算器。

        二、前端实现。

前端我使用了前端三件套。html+css+js。

        三、后端实现。

后端使用python编写main函数实现数据库部分的启动。使用MYSQL实现数据库的具体功能，利用python适配的pymysql实现了在main.py程序中对数据库进行操纵和编辑。

代码说明

function send_clear(){
    request=req("clear_table")
    request.send();
}
function get_history(){
    const res = new XMLHttpRequest();
    res.open('GET', 'http://localhost:5000/get_calculator_data', true);
    res.onreadystatechange = function () {
      if (res.readyState === 4) {
        if (res.status === 200) {
            Data = JSON.parse(res.responseText);
            array = Data['data'];
            let string="";
            for(let i=0;i<array.length;i++){
                string +=array[i][0]+" = "+array[i][1]+"\n";
            }
            document.getElementById('input_show').value = string;
        } else {
            console.error('获取数据出错: ' + res.status);
        }
      }
    };
    res.send();
}

在jss.js文件中我利用XMLHttp进行请求的发送。

import flask
from flask import Flask, request, jsonify
import json
from flask_cors import *
from datetime import datetime
from gevent import pywsgi
import pymysql

app = Flask(__name__)
CORS(app, supports_credentials=True)
# 连接MySQL数据库
mydb = pymysql.connect(
    host="127.0.0.1",
    port=3306,
    user="root",
    password="123456",
    database="penguin"
)
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()

@app.route("/")
def ui():
    return flask.render_template("frontend.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'



if __name__ == '__main__':
    server = pywsgi.WSGIServer(('127.0.0.1', 5000), app)
    server.serve_forever()

设计感想

第一次从0开始设计前后端结合，遇到的困难还是很多的。前端界面大一的时候接触过所以学起来不费力。

html和js衔接的时候，我发现如果把组件定义成box的话很多样式不能使用，形状不可调整。还是div好。

后端一开始尝试了springboot，但是因为没接触过java，配环境配得几乎要死掉了！超级难。

最终选择了使用python的flask框架进行和数据库的链接。还是python好啊（感慨

最后，编程过程中犯了一个很呆的问题。我写好了main.py里的数据库链接启动代码，启动之后一直显示“服务器强硬地拒绝了你的链接”。后面发现是MySQL没下，数据库都还没定义呢。。。。