Computer practice of front and back end separation

832101320郑建航

已于 2023-10-22 20:16:43 修改

阅读量73

点赞数

文章标签： python

于 2023-10-22 00:18:01 首次发布

本文链接：https://blog.csdn.net/2301_78276189/article/details/133967170

版权

1.introduction of the assignment

In this task, we need to improve the previous calculator, including adding the residual function and the way to view the history of the calculation, we use python for the back end, html for the front end

github here is the code of front-end and back end

the catalog of the assignment

1.introduction of the assignment
github [here is the code of front-end and back end](https://github.com/832101320/fanxiaoqin/tree/main)
- 2.1assignment table
- 2.2PSP table
3.Problem-solving ideas
4 code of the assignment
- 4.1Front-end code
- 4.2Back-end code
5. flow chart
6.display of the result
Summary

2.1assignment table

cause for this assignmet	https://bbs.csdn.net/forums/ssynkqtd-04
Assignment Requirements	https://bbs.csdn.net/topics/617378696
Objectives of This Assignment	Added new algorithms and history
MU STU ID and FZU STU ID	21124353(MU)832101320(FZU)

2.2PSP table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	20	15
Development
• Analysis	40	30
• Design Spec	20	20
• Design Review	15	15
• Coding Standard	20	20
• Design	15	15
• Coding	100	90
• Code Review	20	10
• Test	10	10
Reporting
• Test Repor	130	120
• Size Measurement	5	5
• Postmortem & Process Improvement Plan	15	15
Sum	410	365

3.Problem-solving ideas

In this assignment, we need to consider how to separate the front-end and back-end code, add the remainder operation to the quadratic operation, how to build and connect the database, and how to pass the history, which mainly involves the back end.
For front-end and back-end code separation, we need to use python and html methods to pass the arithmetic process of the calculator by using data in the front-end and back-end. Finally, the front end receives the information and the back end processes it and feeds it back to the front end, and saves the history to the database

For the data processing method, we need to process the input i.e. the calculation, and then display the result as the output.

Finally, calculators should have different functions to calculate data, such as addition, subtraction, multiplication, division, and taking the remainder and have history database.

4 code of the assignment

4.1Front-end code

This part deals with the frame and keys of the calculator。

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <style>
        .button {
            width: 50px;
            height: 50px;
            font-size: 20px;
        }
    </style>
    <script src="calculator.js"></script>
</head>
<body>
    <h1>Calculator</h1>
    <input type="text" id="result" disabled><br> <!-- 结果显示框，禁用输入 -->
    <table>
        <tr>
            <td><button class="button" onclick="appendValue(7)">7</button></td>
            <td><button class="button" onclick="appendValue(8)">8</button></td>
            <td><button class="button" onclick="appendValue(9)">9</button></td>
            <td><button class="button" onclick="appendValue('+')">+</button></td>
        </tr>
        <tr>
            <td><button class="button" onclick="appendValue(4)">4</button></td>
            <td><button class="button" onclick="appendValue(5)">5</button></td>
            <td><button class="button" onclick="appendValue(6)">6</button></td>
            <td><button class="button" onclick="appendValue('-')">-</button></td>
        </tr>
        <tr>
            <td><button class="button" onclick="appendValue(1)">1</button></td>
            <td><button class="button" onclick="appendValue(2)">2</button></td>
            <td><button class="button" onclick="appendValue(3)">3</button></td>
            <td><button class="button" onclick="appendValue('*')">*</button></td>
        </tr>
        <tr>
            <td><button class="button" onclick="appendValue(0)">0</button></td>
            <td><button class="button" onclick="appendValue('.')">.</button></td>
            <td><button class="button" onclick="appendValue('%')">%</button></td> <!-- 求余数运算符按钮 -->
            <td><button class="button" onclick="appendValue('/')">/</button></td>
        </tr>
        <tr>
            <td colspan="4"><button class="button" onclick="clearResult()">C</button></td> <!-- 清除按钮，占据4列 -->
        </tr>
        <tr>
            <td colspan="4"><button class="button" onclick="calculate()">=</button></td> <!-- 等号按钮，占据4列 -->
        </tr>
    </table>

    <h2>History</h2>
    <ul id="history"></ul> <!-- 历史记录列表 -->

    <script>
        // JavaScript代码
        // ...
    </script>
</body>
</html>

4.2Back-end code

interface plane :calculator.html

from flask import Flask, render_template, request

app = Flask(__name__)

history = []  # 存储历史记录的列表

@app.route('/')
def index():
    return render_template('calculator.html')

@app.route('/calculate', methods=['POST'])
def calculate():
    expression = request.form['expression']
    try:
        result = eval(expression)  # 使用eval函数计算表达式的结果
        history.append(f'{expression} = {result}')  # 将表达式和结果添加到历史记录
        if len(history) > 10:  # 保持历史记录最多10条
            history.pop(0)
        return {'result': result}
    except Exception as e:
        return {'error': str(e)}

@app.route('/history')
def get_history():
    return {'history': history}

if __name__ == '__main__':
    app.run(debug=True)

5. flow chart

请添加图片描述

6.display of the result

在这里插入图片描述

Summary

In this assignment,It is really much more difficult than the last experiment, which is not just visualization, but the separation of the front and back ends. Some students may use the database to store historical records, so the difficulty is much more complicated than the calculation results last time. Therefore, I learned a lot of knowledge in this task, including front-end construction and back-end editing, and interactive interaction between the two, so as to complete this task