Back-End Separation Calculator Programming

最新推荐文章于 2024-05-20 21:56:33 发布

CalMeRaymond

最新推荐文章于 2024-05-20 21:56:33 发布

阅读量39

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/m0_64256512/article/details/133886665

版权

1. Assignment Description

- Basic Calculator Functions

- Extended Function: Scientific calculator

2. Personal Software Process (PSP) Form

3. Problem-Solving Ideas

4. Design and Implementation Process

- Design Process

- Implementation Process

5. Code Description

Front - End Part

Backend - End Part

6. Result Displaying and Text Description

7. Summary

1. Assignment Description

In the last assignment, we have completed the most basic design of a calculator function, so now continue to achieve more perfect calculator function. Because we understand that everyone basically has a certain programming foundation, this assignment allows the use of any visualization technology: web, Android, applet of WeChat, etc., but to reflect the frontend and backend separation to achieve the following functions.

- Basic calculator functions

Function 1: addition, subtraction, multiplication, division, remainder

Basic +, -, *, /, %，operations, requiring the correct order of operations, the correct result, and store the input string and the result in a back-end database
Function 2: Read history
Can use the ans button to return the previous calculation result and view the history to read the last ten string formula and the corresponding calculation result, must be read from the back-end database, cannot use the cache.

- Extended function: Scientific calculator

Calculate radical sign, trigonometric function, log, scientific notation.
Implement bracket computation.
Better looking UI interface.

2. Personal Software Process (PSP) Form

Personal Software Process Stages	Estimated Time（/minutes）	Actual Time（/minutes）
Planning	60	50
Estimate	50	50
Analysis	40	40
Design Specification	60	50
Design Review	50	50
Coding Standard	40	50
Design	40	50
Coding	50	50
Code Review	30	40
Test	60	50
Reporting	60	60
Test Report	60	50
Size Measurement	30	60
Postmortem & Process Improvement Plan	30	50
Sum	660	700

3. Problem - Solving Ideas

We require to make a simple web calculator and utilize the back-end database to store figures and data. In this module, I use PyCharm and MySQL to realize the database. To solve the problem, I just utilize software WebStorm as front-end and PyCharm and MySQL as back-end to realize the interaction of the calculator.

4. Design and Implementation Process

Adjust the size of the calculator panel and the size of the button. Select text styles to modify.
If a number (0,1,2,3,4,5,6,7,8,9) and “(”, “)”, “.” is clicked, it will be displayed in the input text box above.
If an operator button (such as +, -, *, /, sin, cos, tan, e^x) is clicked, it will perform related operations and output results.
If the key “C” is clicked, the string content is cleared, and the output box is also cleared.
If you click “=”, the result of the calculation is displayed in the output box and the content is cleared.
If you click “ans”, it will return the last calculation result and if you click “history”, it will get the history data from database.

5. Code Description

Front - End Part

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <style>
        .title-button {
            width: 350px; /* 设置按钮宽度 */
            height: 30px; /* 设置按钮高度 */
            font-size: 20px; /* 设置按钮文本字体大小 */
            margin: 5px; /* 设置按钮之间的间距 */
        }
        /* 定义按钮的样式 */
        .calculator-button {
            width: 60px; /* 设置按钮宽度 */
            height: 60px; /* 设置按钮高度 */
            font-size: 20px; /* 设置按钮文本字体大小 */
            margin: 5px; /* 设置按钮之间的间距 */
        }
         .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* 100%视口高度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Calculator</h1>
        <form name="Calculator">
            <input type="text" class="title-button"name="display" id="display" disabled>
            <input type="button"class="calculator-button" value="ans" onclick="">
            <br>
            <input type="button" class="calculator-button" value="7" onclick="addToDisplay('7')">
            <input type="button" class="calculator-button" value="8" onclick="addToDisplay('8')">
            <input type="button" class="calculator-button" value="9" onclick="addToDisplay('9')">
            <input type="button" class="calculator-button" value="/" onclick="addToDisplay('/')">
            <input type="button"class="calculator-button" value="sin" onclick="fSin()">
            <input type="button" class="calculator-button" value="C" onclick="clearDisplay()">
            <br>
            <input type="button" class="calculator-button" value="4" onclick="addToDisplay('4')">
            <input type="button" class="calculator-button" value="5" onclick="addToDisplay('5')">
            <input type="button" class="calculator-button" value="6" onclick="addToDisplay('6')">
            <input type="button" class="calculator-button" value="*" onclick="addToDisplay('*')">
            <input type="button" class="calculator-button" value="cos" onclick="fCos()">
            <input type="button"class="calculator-button" value="%" onclick="addToDisplay('%')">
            <br>
            <input type="button" class="calculator-button" value="1" onclick="addToDisplay('1')">
            <input type="button" class="calculator-button" value="2" onclick="addToDisplay('2')">
            <input type="button" class="calculator-button" value="3" onclick="addToDisplay('3')">
            <input type="button" class="calculator-button" value="-" onclick="addToDisplay('-')">
            <input type="button" class="calculator-button" value="tan" onclick="fTan()">
            <input type="button" class="calculator-button" value="(" onclick="addToDisplay('(')">
            <br>
            <input type="button" class="calculator-button" value="." onclick="addToDisplay('.')">
            <input type="button" class="calculator-button" value="0" onclick="addToDisplay('0')">
            <input type="button" class="calculator-button" value="=" onclick="calculate()">
            <input type="button" class="calculator-button" value="+" onclick="addToDisplay('+')">
            <input type="button" class="calculator-button" value="exp" onclick="fExp()">  
            <input type="button" class="calculator-button" value=")" onclick="addToDisplay(')')">
        </form>

        <script>
            function addToDisplay(value) {
                document.Calculator.display.value += value;

            }

            function clearDisplay() {
                document.Calculator.display.value = '';
            }

           function fSin() {
                
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                const result = Math.sin(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
           function fCos() {
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                const result = Math.cos(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
           function fTan() {
                const input = document.Calculator.display.value;
                const angle = parseFloat(input);
                if (input == 90|| input == 270||input == -90||input == -270){
	   document.Calculator.display.value = "Error!"
	   return
            }
                const result = Math.tan(angle * (Math.PI / 180)); // 将角度转换为弧度
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
           function fExp() {
                const input = document.Calculator.display.value;
                const exponent= parseFloat(input);
                const result = Math.exp(exponent); 
                document.Calculator.display.value = result.toFixed(5); // 保留5位小数
            }
            function calculate() {
                try {
                    const result = eval(document.Calculator.display.value);
 	    document.Calculator.display.value = result.toFixed(1);
	    if (isNaN(result) || !isFinite(result)) {
                        throw new Error("error");
                }
                }catch(err) {
                    document.Calculator.display.value = 'Error!';
                }
            }
        </script>
    </div>
</body>
</html>

First, I use < head > part to define the style and the size of the interface. In the < body > part, also define the button and connect them to the function constructed blow in logic. At the same time, make it possible to display in the screen.

Then for function part, I just import the Math () function to achieve the exponentiation and trigonometric operations. For basic calculation like plus or minus, it can be achieved by its original library.

Back - End Part

Just use python code and MySQL to create interfaces between the front and back end.

from flask import Flask,render_template,request
import pymysql

app = Flask(__name__)

@app.route("/add/user", methods=["GET","POST"])
def add_user(): //send GET request, return page, enter and POST to the website.
   if request.method == "GET":
       return render_template("add_user.html")
   calculation = request.form.get("calculation")
   result = request.form.get("result")

   conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', password="Asd12345.", charset='utf8', db='history')
   cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)

   sql = "insert into history(calculation, result) values(%s,%s)"
   cursor.execute(sql, [calculation, result])
   conn.commit()

   cursor.close()
   conn.close()
   return render_template("add_user.html")

@app.route("/show/user")
def show_user(): //show the data in database.
   conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', password="Asd12345.", charset='utf8', db='history')
   cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
   sql = "select * from history"
   cursor.execute(sql)
   data_list = cursor.fetchall()

   cursor.close()
   conn.close()

   print(data_list)

   return render_template("show_user.html",data_list=data_list)

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

Following codes are used to connect, execute and close port.

//创建链接
	conn = pymysql.connect(host, port, user, password, charset='utf8', db)
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
//执行命令
    sql = "The command to execute"
    cursor.execute()
//关闭接口
    cursor.close()
    conn.close()

These are some orders to add and search the historical figures for front end part.

add_user: send GET request, return page, enter and POST to the website.
show_user: show the data in database.
connecting_process: First, we need to make a connection, then execute the command in MySQL, finally close the connection.

6. Result Displaying and Text Description

Assignment2

Successfully displaying the calculator, we can get the history data from the database using MySQL. Having constructed the environment of database, we can get historical figures and equations.

figures in MySQL

7. Summary

To achieve a simple version of the web calculator, I just apply the HTML codes to construct the website. By adjust the interface to be more twinkle, I modify the head of the html codes like size and distance between them. Using CSDN to blog in order to record the development, I learn the complete progresses to create and achieve my own project.

In addition, I add the back-end part in this module. Having learned MySQL database, I achieve the interaction between front-end and back-end parts by using some orders.