Back-end separation calculator programming

832101130魏灵菲 2023-10-22 12:14:55

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617378696
Objectives of This Assignment	Back-end separation calculator programming
Gitcode repository address for front-end and project result	https://github.com/weilff/Front-end-code.git
Gitcode repository address for back-end	https://github.com/weilff/back-end-code.git
MU STU ID and FZU STU ID	21125406 and 832101130

Catalogue

1. Introduction
2. PSP table
3. Presentation of the Finished Product
Implementation of basic functions:
Addition, subtraction, multiplication, division, remainder
Read history function
Extended function:
Scientific calculator
Power function calculation
4. Design process
5. Implementation process
A functional structure diagram
Text description
6. Code explanation
Front-end
Back-end
7. Summary

1. Introduction

Use HTML+CSS+JS to make a visual calculator to achieve 2 main functions. The first function are basic +, -, *, /, % (take the remainder) and other operations, as well as trigonometric functions, radical operations require correct operation order, correct results, and the input string and results are stored in the back-end database. The second function are using the ans button to return the previous calculation results and viewing the history of reading the last ten string formulas and corresponding calculation results, which must be read from the back-end database and cannot use the cache.

2. PSP table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	100	180
• Estimate	100	180
Development	875	960
• Analysis	20	20
• Design Spec	120	100
• Design Review	60	60
• Coding Standard	200	200
• Design	180	150
• Coding	120	180
• Code Review	60	60
• Test	30	40
Reporting	85	70
• Test Repor	60	50
• Size Measurement	10	10
• Postmortem & Process Improvement Plan	15	10
Sum	935	960

3. Presentation of the Finished Product

Implementation of basic functions:

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 databas.

Read history function

By pressing the ans button, you can call and read the result of the last calculation from the back end.

Extended function:

Scientific calculator

Calculate radical sign, trigonometric function, log, scientific notation.

Power function calculation

This calculator can quickly perform square calculations, as well as multiple power calculations.

4. Design process

First, for front-end development, I use VSCode to write and debug HTML, CSS, and JavaScript. Plug-ins can be installed to provide features such as code highlighting, code prompting, and code formatting. In addition, plugins can also be used for front-end framework development and debugging, such as Vue.js, React, etc. Then, for back-end development, VSCode can be used to write and debug server-side languages, such as Node.js, Python, etc. Plugins can also be installed to provide related functions and tools, such as debuggers, code formatting, and so on. In addition, VSCode can also be used for** front-end and back-end coordination**. By configuring related plug-ins and debuggers, you can debug and test the front and back end code in VSCode, convenient and quick development and debugging.
To sum up, the design idea of the front and back end using VSCode is mainly to install related plug-ins, configure the debugger, and carry out code writing, debugging and testing.

5. Implementation process

A functional structure diagram

Instructions: The process is to click a button on the front end, trigger an event, and send an http request through ajax to the back-end springboot interface within the time. Intra-interface processing reads data to mysql database through mybatis interface; Then read the data and call back to the front end through the interface, and then the front end gets the data rendering display.

Text description

Write HTML+CSS+JS code on the front-end development software VScode, and build the model and function of the calculator. The front-end refers to the back-end interface request made by jQuery using Ajax. This step makes the back-end connection and asynchronous request. Write code on the back-end development software idea to connect the front end to the database. The back-end technology frameworks springboot and mybatis are built. After the MySQL database is downloaded and installed, you need to configure the environment. The method is similar to that of configuring the idea environment. The data visualization tool used is DBeaver.

6. Code explanation

Front-end

Compared with the first calculator, this calculator has more ans function(JS).

function ans() {
  let param = {
    index: listIndex,
  }
  $.ajax({
    url: 'http://localhost:8088/calculator/getRecord',
    type: 'post',
    contentType: 'application/json',
    data: JSON.stringify(param),
    success: function (result) {
      document.getElementById('Screen').value = result.message
      if (listIndex < 9) {
        listIndex++
      } else {
        listIndex = 0
      }
    },
  })
}

This code block shows how the front end sends an http request backwards, and how many restriction code modules are stored in the history.

How do I write the results to the backend in JS:

function insertRecord(content) {
  let param = {
    content: content,
  }
  $.ajax({
    url: 'http://localhost:8088/calculator/insertRecord',
    type: 'post',
    contentType: 'application/json',
    data: JSON.stringify(param),
    success: function (result) {
      console.log(result)
    },
  })
}

Back-end

How to connect to the database

server:
  port: 8088
  servlet:
    context-path: /calculator/

spring:
  datasource:
    dynamic:
      hikari:
        connection-timeout: 30000
        max-lifetime: 1800000
        max-pool-size: 15
        min-idle: 5
        connection-test-query: select 1
        pool-name: FebsHikariCP
      primary: base
      datasource:
        base:
          driver-class-name: com.mysql.cj.jdbc.Driver
          username: root
          password: 123456
          url: jdbc:mysql://localhost:3306/calculator?useUnicode=true&characterEncoding=UTF-8&useSSL=true&serverTimezone=Asia/Shanghai&allowMultiQueries=true

7. Summary

In this assignment, I mainly realized the difference between front end and back end. A front-end is the content that users can browse and interact with directly on a web page or application. It is mainly responsible for the design and presentation of web pages, including page layout, style design, ICONS, buttons, pictures, etc. Front-end development also needs to consider user experience and interaction logic, such as touch gestures and animation effects that respond to users. Front-end development generally uses HTML, CSS, JavaScript and other technologies to achieve the visual effects and interactive functions of web pages.

The back-end refers to the function and processing logic of the web page or application background. It is mainly responsible for handling user requests and data storage and processing, as well as interaction with databases and other systems. Back-end development generally uses a variety of programming languages and frameworks to implement server-side logic and functionality. Back-end development needs to process the data submitted by users, perform data verification, business logic processing and data persistence operations. At the same time, the back-end also needs to consider the security and performance optimization of the web page.

The functional differences between front-end and back-end can be summarized as follows:
The front end is mainly responsible for the design and presentation of the web page, including layout, style and interactive effects.
The back-end is primarily responsible for handling user requests and data, as well as interacting with databases and other systems.
To sum up, the front end and the back end are responsible for different functions in the web development, the front end is mainly responsible for the visualization effect of the web page and user interaction, and the back end is mainly responsible for processing user requests and data storage and processing. The two work closely together to build a complete web application.

...全文