Software Engineering Practice Second Assignment——Back-end separation calculator programming
Catalogue
Course for This Assignment | Software Engineering |
---|---|
Assignment Requirements | https://bbs.csdn.net/topics/617378696 |
Objectives of This Assignment | The connection of front-end and back-end |
Other References | https://b23.tv/QJmOz4u |
1 Introduction
- 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, can not use the cache. - Extended function: Scientific calculator
(1)Calculate radical sign, trigonometric function, log, scientific notation
(2)Implement bracket computation
(3)Better looking UI interface
2 PSP form
Personal Software Process Stages | Estimated Time(minutes) | Actual Time(minutes) |
---|---|---|
Planning | ||
• Estimate | 40 | 50 |
Development | ||
• Analysis | 30 | 35 |
• Design Spec | 20 | 40 |
• Design Review | 10 | 20 |
• Coding Standard | 40 | 50 |
• Design | 45 | 50 |
• Coding | 350 | 300 |
• Code Review | 40 | 45 |
• Test | 30 | 45 |
Reporting | ||
• Test Repor | 30 | 30 |
• Size Measurement | 30 | 30 |
• Postmortem & Process Improvement Plan | 30 | 30 |
Sum | 695 | 725 |
3 Description of problem-solving ideas
In the last blog, I used Front-end page visualization mainly consists of HTML, CSS, JavaScript. These components work together to realize the display of web content, the definition of style and the presentation of web interaction. In this task, HTML is responsible for building the page structure of the calculator, CSS is responsible for styling the appearance of the calculator, and JavaScript provides the interactive functions and calculation logic of the calculator, so as to realize the design and development of a simple visual calculator.
This episode introduces the need for a back-end database where I want to transfer data to IntelliJ IDEA and use Node.js on the front end to process and render the data.
4 Design and implementation process
HTML section:
I used the HTML markup language to create a page structure containing the calculator interface.
At <head>
tag. A style sheet file called style.css
is introduced in the tag to define the appearance style of the calculator.
At <body>
Tag, I creates a calculator container <div>
with a specific style class name that contains the display <input>
And a series of buttons.
CSS section:
I used CSS stylesheets to style the look of the calculator.
By styling the.Calculator
class, I arranged the internal elements in a grid layout and set other style properties such as color, background, and so on.
JavaScript section:
I’ve defined some functions in blocks of JavaScript code to handle the operations and logic of the calculator.
The append(value)
function appends the value of the button clicked by the user to the display.
The clearDisplay()
function is used to clear the display.
The calculate()
function is used to calculate the result of an expression and display it on the screen, while inserting the expression and result into the history of the database.
The calculateSquareRoot()
, calculateSine()
, calculateCosine()
, and calculateLogarithm()
functions are used to compute the results of the square root, sine, cosine, and logarithm, respectively, and are displayed on the screen.
The insertHistory(expression, result)
function is used to insert expressions and results into the history table in the database.
Back-end: Node.js Express framework:
I create an Express application called server.
The route /history
of a GET request is defined. When a client initiates a request for this route, the last 10 history records are queried from the MySQL database and the result is returned to the client as a JSON response.
IntelliJ IDEA Database:
I created a MySQL connection pool (pool) in the code, using the pool.query()
method to execute the SQL statement and handle the results returned.
The above logic loops until the user finishes the operation.
key step flow chart
5 Code description
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<div id="history-container" style="display: none;">
<h3>History</h3>
<ul id="history-list"></ul>
</div>
<input class="value" type="text" id="display" readonly>
<button class="clr" onclick="clearDisplay().value">AC</button>
<button onclick="deleteLastCharacter().value">←</button>
<button onclick="append('/').value">/</button>
<button onclick="append('7').value">7</button>
<button onclick="append('8').value">8</button>
<button onclick="append('9').value">9</button>
<button onclick="append('*').value">*</button>
<button onclick="append('4').value">4</button>
<button onclick="append('5').value">5</button>
<button onclick="append('6').value">6</button>
<button onclick="append('+').value">+</button>
<button onclick="append('1').value">1</button>
<button onclick="append('2').value">2</button>
<button onclick="append('3').value">3</button>
<button onclick="append('-').value">-</button>
<button class="zero" onclick="append('0').value">0</button>
<button onclick="append('.').value">.</button>
<button class="equal" onclick="calculate().value">=</button>
<button onclick="calculateSine()">sin</button>
<button onclick="calculateCosine()">cos</button>
<button onclick="calculateTan()">tan</button>
<button onclick="calculateLogarithm().value">log</button>
<button class="an" onclick="append('ans').value">ans</button>
<button onclick="calculateSquareRoot().value">√</button>
<div> <button class="history" onclick="insertHistory()">History</button></div>
</div>
</div>
<script src="script.js"></script>
<script src="server.js"></script>
</body>
</html>
CSS code
*
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins ' , sans-serif;
}
body{
display: flex;
justify-content: center;
align-items : center;
min-height: 100vh;
background: #7a929e;
}
.calculator {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 400px;
height: 425px;
}
.calculator .value {
grid-column: 1 / span 4;
height: 80px;
text-align: right;
padding: 15px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(3, 3, 3, 0.133);
}
.calculator button {
display: grid;
width: 100%;
height: 50px;
margin: auto;
color: #fff;
background-color: #1d5772;
place-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.calculator button:active {
color: #111;
background-color: #649e9b;
}
.calculator button.clr {
grid-column: 1 / span 2;
width: 100%;;
}
.calculator button.zero {
grid-column: 1 / span 2;
width: 100%;
}
.calculator button.an {
grid-column: 1 / span 2;
width: 100%;
}
.calculator button.equal {
background-color: #3bcbd5;
}
JS code
let expression = '';
function append(value) {
if (value === 'ans') {
expression += ans; // 如果是'ans',将上一次计算的结果追加到表达式中
} else {
expression += value;
}
document.getElementById('display').value = expression;
}
function clearDisplay() {
expression = '';
document.getElementById('display').value = '';
}
function calculate() {
const result = eval(expression);
document.getElementById('display').value = result;
//Insert history records into the database
insertHistory(expression, result);
expression = '';
}
function insertHistory(expression, result) {
// Perform the database insert operation
const query = `INSERT INTO history_table (expression, result) VALUES ('${expression}', '${result}')`;
//pool.query(query, (error, results) => {
if (error) {
console.error('Error inserting history:', error);
}
};
//}
function calculateSquareRoot() {
const operand = parseFloat(expression);
const result = Math.sqrt(operand);
document.getElementById('display').value = result;
expression = '';
}
function calculateSine() {
const operand = parseFloat(expression);
const angleInRadians = operand * Math.PI / 180; // Convert angles to radians
const result = Math.sin(angleInRadians);
document.getElementById('display').value = result.toFixed(4);
expression = '';
}
function calculateCosine() {
const operand = parseFloat(expression);
const angleInRadians = operand * Math.PI / 180;
const result = Math.cos(angleInRadians);
document.getElementById('display').value = result.toFixed(4);
expression = '';
}
function calculateLogarithm() {
const operand = parseFloat(expression);
const result = Math.log10(operand);
document.getElementById('display').value = result;
expression = '';
}
Node.js
const express = require('express');
const server = express();
const app = express();
const port = 3306;
var mysql = require('mysql');
const pool = mysql.createPool({
connectionLimit:10,
host: 'localhost',
user: 'mysql.infoschema',
password: '123456789',
database: 'history_table'
});
server.get('/history', (req, res) => {
var query = 'SELECT * FROM history_table';
pool.query('SELECT * FROM history_table ORDER BY id DESC LIMIT 10', (error, results) => {
if (error) {
console.error('Error fetching history:', error);
res.sendStatus(500);
} else {
res.json(results);
}
});
});
app.get('/history', (req, res) => {
const query = 'SELECT * FROM history_table ORDER BY id DESC LIMIT 10';
pool.query(query, (error, results) => {
if (error) {
console.error('Error fetching history:', error);
res.sendStatus(500);
} else {
res.json(results);
}
});
});
// Start the server
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
6 GitHub link
7 Display and description
This assignment adds trigonometric function and logarithm function, as well as buttons to view history:history
, and return the previous answer answer:ans
. These functions are shown in the demonstration video. We can get the following recorded results in the Intellij Idea database:
previous data in history_table
8 Conclusion
The second assignment required me to design a calculator by combining the front and back ends. During these weeks of learning, I have mastered the express framework of Node.js, the use of Intellij Idea database and the back-end data integration of MYSQL. It can make them run to achieve the purpose of simple calculation and historical query, and understand the process of the application and response of the whole program in the web page, which makes me have a deeper understanding of web development. I believe that with this progress of continuous learning, I will be able to continuously improve my computer-related skills in the future.