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

102101510梁菲汎

已于 2023-10-22 21:21:48 修改

阅读量264

点赞数

文章标签：前端 html

于 2023-10-22 21:21:20 首次发布

本文链接：https://blog.csdn.net/somebodyhm_123/article/details/133974649

版权

本文详细描述了一次前后端分离的科学计算器项目，涉及git仓库链接、代码规范、PSP阶段管理、前端HTML/CSS/JS实现、后端Python/Flask与MySQL的配合，以及设计和实现过程中的问题解决和反思。

摘要由CSDN通过智能技术生成

这个作业属于哪个课程	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()