Back-end separation calculator programming

已于 2023-10-22 22:37:27 修改
阅读量53 收藏
点赞数
文章标签： java
于 2023-10-22 22:24:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyrene56/article/details/133976686
版权

目录

Introduction

Student’s information

PSP FORM

Description Of Problem-Solving Ideas

Code

front code

 back code

Flow chart

Operate video

Summary

                               

Introduction

In this blog post, I utilized HTML to create the user interface, and on the backend, I elevated my calculator with Java, enabling it to include features for reviewing previous calculation history and performing scientific computations. The following is an overview of the code design process and the ultimate outcome.

Student’s information

The Link Your Classhttps://bbs.csdn.net/forums/ssynkqtd-04
Link of Requirement of This Assignmenthttps://bbs.csdn.net/topics/617378696
The Aim of This AssignmentCreate a back-end separation calculator with a visual interface.
MU STU ID and FZU STU ID21126399/832101315

GitHub - Cyrene56/Back-end-separation-calculator

PSP FORM

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning2030
• Estimate3030
Development1015
• Analysis3035
• Design Spec3040
• Design Review3035
• Coding Standard6080
• Design30

35

• Coding4560
• Code Review2030
• Test4545
Reporting4045
• Test Report4545
• Size Measurement2025
• Postmortem & Process Improvement Plan3040
Sum485590

Description Of Problem-Solving Ideas

In this code, the frontend is built using HTML, CSS, and Vue.js to create the user interface and handle user input, while the backend utilizes Java to manage the calculation and data storage logic. Communication between the frontend and backend is facilitated through HTTP requests and responses. This results in the development of a basic calculator interface where users can input mathematical expressions and perform calculations. Additionally, it allows users to view their previous calculation history and offers scientific computation capabilities.

Code

front code

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CalBeta</title>

    <link rel="stylesheet" href="./cal.css">
    <style>
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

    <div class="calculator" id="app" style="background-color: green;">
        <input type="text" v-model="infos" class="display" disabled>

        <button @click="getNumber1('(')">(</button>
        <!-- ... (more HTML buttons and elements) ... -->
    </div>

    <script src="./calBeta.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                firstnum: "",
                endnum: "",
                operator: "",
                fscod: true,
                infos: "",
                listNum: 1
            },
            methods: {
                def() {
                    this.getList(this.listNum)
                },
                clearDisplay() {
                    this.infos = "";
                    this.firstnum = "";
                    this.endnum = ""
                },
                getNumber(e) {
                    // ...
                },
                getNumber1(e) {
                    // ...
                },
                getOperator(e) {
                    // ...
                },
                calculate() {
                    // ...
                },
                getList(str) {
                    // ...
                }
            }
        });
    </script>

</body>

</html>
<style>

    .calculator {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background: #ddd;
        border-radius: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }

    .display {
        grid-column: span 4;
        height: 50px;
        font-size: 20px;
        margin-bottom: 10px;
        padding: 5px;
        border: none;
        background: #fff;
        height: 120px;
    }

    button {
        width: 100%;
        height: 40px;
        font-size: 14px;
        margin: 5px;
        border-radius: 5px;
        border: none;
        background: #ffffff;
        cursor: pointer;
    }
</style>

 back code

package com.jisuanji.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jisuanji.config.jisuan;
import com.jisuanji.entity.JsjHistory;
import com.jisuanji.service.IJsjHistoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/jisuanji")
public class JsjHistoryController {
    @Autowired
    IJsjHistoryService iJsjHistoryService;

    @RequestMapping("/list")
    public JsjHistory list(String str){
        QueryWrapper<JsjHistory> queryWrapper = new QueryWrapper<>();
        QueryWrapper<JsjHistory> queryWrapper1 = queryWrapper.orderByDesc("id");
        List<JsjHistory> list = iJsjHistoryService.list(queryWrapper1);
        Map<String,JsjHistory> map = new HashMap<>();
        for (int i = 1; i <= list.size(); i++) {
            map.put(i+"",list.get(i-1));
        }
        JsjHistory jsjHistory = map.get(str);
        return  jsjHistory;
    }

    @RequestMapping("/jisuan")
    public String jisuan(String number1, String number2, String type) throws Exception {
        jisuan js = null;
        if (type.equals("+")){
            js = new add();
        } else if (type.equals("-")) {
            js = new subtract();
        } else if (type.equals("*")) {
            js = new multiply();
        } else if (type.equals("/")){
            js = new divide();
        }
        else if (type.equals("%")){
            js = new yu();
        } else {
            throw new Exception("Invalid calculation method");
        }
        String jisuan = js.jisuan(number1, number2);
        JsjHistory jsjHistory = new JsjHistory();
        jsjHistory.setType(type);
        jsjHistory.setNumber1(number1);
        jsjHistory.setNumber2(number2);
        jsjHistory.setJg(jisuan);
        iJsjHistoryService.save(jsjHistory);
        return jisuan;
    }
}

class add implements jisuan{
    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.add(bigDecimal1);
        return add.toString();
    }
}

class subtract implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = a new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.subtract(bigDecimal1);
        return add.toString();
    }
}

class multiply implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.multiply(bigDecimal1);
        return add.toString();
    }
}

class divide implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.divide(bigDecimal1, 8, BigDecimal.ROUND_HALF_UP);
        return add.toString();
    }
}

class yu implements jisuan{

    @Override
     public String jisuan(String number1, String number2) {
       int a =  Integer.parseInt(number1) % Integer.parseInt(number2);
        return Integer.toString(a);
    }
}

total code

js:
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CalBeta</title>

    <link rel="stylesheet" href="./cal.css">
    <style>
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>


</head>

<body>

    <div class="calculator" id="app" style="background-color: green;">
        <input type="text" v-model="infos" class="display" disabled>

        <button @click="getNumber1('(')">(</button>
        <button @click="getNumber1(')')">)</button>
        <button @click="getOperator('%')">%</button>
        <button @click="clearDisplay()">C</button>

        <button @click="getNumber1('sin(')">sin</button>
        <button @click="getNumber1('cos(')">cos</button>
        <button @click="getNumber1('tan(')">tan</button>
        <button @click="def">deg</button>

        <button @click="getNumber('7')">7</button>
        <button @click="getNumber('8')">8</button>
        <button @click="getNumber('9')">9</button>
        <button @click="getOperator('/')">/</button>

        <button @click="getNumber('4')">4</button>
        <button @click="getNumber('5')">5</button>
        <button @click="getNumber('6')">6</button>
        <button @click="getOperator('*')">*</button>

        <button @click="getNumber('1')">1</button>
        <button @click="getNumber('2')">2</button>
        <button @click="getNumber('3')">3</button>
        <button @click="getOperator('-')">-</button>

        <button @click="getNumber('0')">0</button>
        <button @click="getNumber('.')">.</button>
        <button @click="calculate">=</button>
        <button @click="getOperator('+')">+</button>



    </div>

    <script src="./calBeta.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                firstnum: "",
                endnum: "",
                operator: "",
                fscod: true,
                infos:"",
                listNum:1

            },
            methods: {
                def(){
                    this.getList(this.listNum)
                },
                clearDisplay() {
                    this.infos = "";
                    this.firstnum = "";
                    this.endnum = ""
                },
                getNumber(e) {
                    if (this.fscod) {
                        this.firstnum += e+""
                        this.infos =  this.firstnum + ""
                    }else{
                        this.endnum += e+""
                        this.infos = this.firstnum+this.operator + ""+ this.endnum + ""
                    }

                    console.log("111", e)
                },
                getNumber1(e) {
                    console.log("222", e)
                },
                getOperator(e) {
                    this.fscod = false
                    this.operator = e
                    console.log("333", e)
                    this.infos =  this.firstnum+this.operator+""
                },


                calculate() {
                    var  that = this
                    $.ajax({
                        url: 'http://localhost:8081/jisuanji/jisuan',// 请求的URL
                        method: 'GET', // 请求方法（GET、POST等）
                        dataType: 'text',
                        async: "true",
                        data:{
                            number1:this.firstnum,
                            number2:this.endnum,
                            type:this.operator
                        },
                        success: function (response) {
                            that.infos = response// 请求成功时的回调函数
                            that.firstnum = ""
                            that.endnum = ""
                            that.operator = ""
                            that.fscod=true
                            that.listNum = 1
                            console.log(response); // 打印服务器返回的数据
                        },
                        error: function (xhr, status, error) { // 请求失败时的回调函数
                            console.log('请求失败');
                            console.log(xhr);
                            console.log(status);
                            console.log(error);
                        }
                    });

                },
                getList(str) {
                    var  that = this
                    $.ajax({
                        url: 'http://localhost:8081/jisuanji/list',// 请求的URL
                        method: 'GET', // 请求方法（GET、POST等）
                        dataType: 'json',
                        async: "true",
                        data:{
                            str:str
                        },
                        success: function (response) {
                            // 请求成功时的回调函数
                            that.fscod=true
                            that.listNum += 1
                            that.infos =response.jg + ""
                            console.log(that.infos); // 打印服务器返回的数据
                        },
                        error: function (xhr, status, error) { // 请求失败时的回调函数
                            console.log('请求失败');
                            console.log(xhr);
                            console.log(status);
                            console.log(error);
                        }
                    });

                }
            }
        });
    </script>

</body>

</html>
<style>

    .calculator {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background: #ddd;
        border-radius: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 5px;
    }

    .display {
        grid-column: span 4;
        height: 50px;
        font-size: 20px;
        margin-bottom: 10px;
        padding: 5px;
        border: none;
        background: #fff;
        height: 120px;
    }

    button {
        width: 100%;
        height: 40px;
        font-size: 14px;
        margin: 5px;
        border-radius: 5px;
        border: none;
        background: #ffffff;
        cursor: pointer;
    }
</style>





java:

package com.jisuanji.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jisuanji.config.jisuan;
import com.jisuanji.entity.JsjHistory;
import com.jisuanji.service.IJsjHistoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**

 */
@RestController
@RequestMapping("/jisuanji")
public class JsjHistoryController {
    @Autowired
    IJsjHistoryService iJsjHistoryService;
    @RequestMapping("/list")
    public JsjHistory list(String str){
        QueryWrapper<JsjHistory> queryWrapper = new QueryWrapper<>();
        QueryWrapper<JsjHistory> queryWrapper1 = queryWrapper.orderByDesc("id");
        List<JsjHistory> list = iJsjHistoryService.list(queryWrapper1);
        Map<String,JsjHistory> map = new HashMap<>();
        for (int i = 1; i <= list.size(); i++) {
            map.put(i+"",list.get(i-1));
        }
        JsjHistory jsjHistory = map.get(str);
        return  jsjHistory;
    }
    @RequestMapping("/jisuan")
    public String jisuan(String number1,String number2,String type) throws Exception {
        jisuan js = null;
        if (type.equals("+")){
            js = new add();
        } else if (type.equals("-")) {
            js = new subtract();
        } else if (type.equals("*")) {
            js = new multiply();
        }else if (type.equals("/")){
            js = new divide();
        }
        else if (type.equals("%")){
            js = new yu();
        }else {
            throw new Exception("计算方式输入错误");
        }
        String jisuan = js.jisuan(number1, number2);
        JsjHistory jsjHistory = new JsjHistory();
        jsjHistory.setType(type);
        jsjHistory.setNumber1(number1);
        jsjHistory.setNumber2(number2);
        jsjHistory.setJg(jisuan);
        iJsjHistoryService.save(jsjHistory);
        return jisuan;

    }
}
class add implements jisuan{
    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.add(bigDecimal1);
        return add.toString();
    }
}
class subtract implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.subtract(bigDecimal1);
        return add.toString();
    }
}
class multiply implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.multiply(bigDecimal1);
        return add.toString();
    }
}
class divide implements jisuan{

    @Override
    public String jisuan(String number1, String number2) {
        BigDecimal bigDecimal = new BigDecimal(number1);
        BigDecimal bigDecimal1 = new BigDecimal(number2);
        BigDecimal add = bigDecimal.divide(bigDecimal1,8,BigDecimal.ROUND_HALF_UP);
        return add.toString();
    }
}
class yu implements jisuan{

    @Override
     public String jisuan(String number1, String number2) {
       int a =  Integer.parseInt(number1)%Integer.parseInt(number2);
        return a+"";
    }
}

Flow chart

Operate video

Summary

Through this assignment, I have learned how to use databases for data transmission and the development of both frontend and backend, as well as their interaction. I believe this assignment was more challenging than the previous one, but it also brought greater rewards. I have gained a deeper understanding of the Java programming language.

                               

832101315陈俪文
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
tang-boot is a front-end and back-end separation permission mana
06-27
tang-boot is a front-end and back-end separation permission management system based on Spring Boot 3 + Spring Security + MyBatis + Redis …
Guns-Separation源代码
03-18
Guns-Separation是Guns后台管理系统的前后端分离版本，项目采用前后端分离架构，代码简洁，功能丰富，开箱即用，开创快速开发平台新趋势。 Guns-Separation功能介绍： 1、主控面板：控制台页面，可进行工作台，分析...
Second assignment-- Back-end separation calculator programming
zyj6665666的博客
10-21 79
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 allow
Back-End Separation Calculator Programming
m0_64256512的博客
10-18 48
Back-End Separation Calculator Programming。
EE308FZ Assignment 2 Back-end separation calculator programming
molanaaa的博客
10-22 39
【代码】EE308FZ Assignment 2 Back-end separation calculator programming。
Back-end separation calculator
qing200301的博客
10-21 67
Back-end separation calculator。
EE301_A2_Back-end separation calculator programming
weixin_64012353的博客
10-22 67
【代码】EE301_A2_Back-end separation calculator programming。
Assignment 2 Back-end separation calculator
SC1025277117的博客
10-22 54
【代码】Assignment 2 Back-end separation calculator。
Back-end separation calculator based on QT and SQLite
我不是yao神的博客
10-18 75
【代码】Back-end separation calculator based on QT and SQLite。
A Back-end Separation Calculator
Adonnn的博客
10-22 46
【代码】A Back-end Separation Calculator。
Front-Backend separation calculator programming on Idea and Vscode
m0_65328667的博客
10-22 95
【代码】Front-Backend separation calculator programming on Idea and Vscode。
Guns-Separation-其他
06-12
Guns-Separation是Guns后台管理系统的前后端分离版本，项目采用前后端分离架构，代码简洁，功能丰富，开箱即用，开创快速开发平台新趋势。Guns-Separation功能介绍：1、主控面板：控制台页面，可进行工作台，分析页...
Lab 3-Privilege Separation
11-23
【标题】：“Lab 3-Privilege Separation”是一个关于权限分离技术的实验，它涵盖了在软件设计中如何实现安全性的关键概念。权限分离是一种安全策略，旨在限制单个进程或用户可以访问和操作的资源，以此降低系统被...
淘宝登录java源码-front-back-separation:基于node.js实现前后端分离讲稿
06-07
淘宝登录java源码 因为会上出了个意外，ppt图片全部丢失，只好对着白板跟大家交流了半个多小时。由于我做演讲不喜欢写太多的文字，没有图片的情况下讲漏了一些内容。这篇文章是我在会上分享内容对照ppt进行地整理。...
JAVA进阶补充
2301_80150315的博客
08-15 962
概念：把已经有的方法拿过来用，当作函数式接口中抽象方法的方法体条件：引用处必须是函数式接口被引用的方法需要已经存在被引用方法的形参和返回值需要跟抽象方法的形参和返回值保持一致被引用方法的功能需要满足当前需求：方法引用符意义：就是为让控制台的报错信息更加的见名知意自定义异常的步骤：定义异常类写继承关系空参构造带参构造​file对象就表示一个路径，可以是文件的路径、也可以是文件夹的路径；这个路径可以是存在的，也允许是不存在的构造方法描述根据文件路径创建对象。
Java基础之原反补码
u012135697的博客
08-14 466
整数类型数据在计算机底层进行存储或运算，以补码方式进行！ 正整数的原反补码，一模一样！
【Spring框架】
最新发布
m0_71941456的博客
08-18 643
Spring框架的功能远不止于此，它还包括Spring MVC、Spring Data、Spring Security等多个模块，每个模块都有其独特的应用场景。
进程间通信 ---共享内存
BUG制造机的博客
08-14 1106
在这篇文章中向大家介绍了共享内存的原理以及常用的指令函数，希望大家有所收获！😁。
Frontier technology of oil-water separation
08-11
### 回答1： 油水分离的前沿技术包括： 1. 超声波技术：通过高频声波在油水混合物中产生微小空泡，使油和水分离。 2. 动力学分离技术：通过油水混合物的物理性质，如密度、流动性等差异，将油和水分离。 3. 光学分离技术：利用油和水在光学特性上的差异，如光吸收、折射率等，将油和水分离。 4. 膜技术：通过膜的选择性透过性，将油和水分离。 5. 化学吸附技术：通过合适的化学吸附剂，吸附油，使油和水分离。 这些技术具有不同的优缺点，根据实际应用情况，应选择合适的技术。 ### 回答2： 油水分离的前沿技术是指在处理含油废水时使用的最新科技和方法。由于油污水的治理一直是一个全球性的环境问题，因此研究人员一直在努力开发更有效的方法来分离油水，以减少对环境的污染。 一种前沿技术是利用纳米材料进行油水分离。纳米材料具有大比表面积和特殊的化学和物理性质，可以吸附或分解油污染物。这种技术通过将纳米材料应用于分离设备中，可以高效地分离油水混合物。纳米材料的使用还可以提高设备的储油容量和改善处理效率。 另一种前沿技术是利用膜分离技术进行油水分离。膜分离技术利用特殊的膜材料将油和水分离开来。这种技术相对传统的方法具有更高的分离效率和选择性。同时，膜分离技术还可以实现连续操作和减少处理成本。 此外，一种新兴的技术是利用电化学方法进行油水分离。该方法通过电场效应使油和水分离开来。这种技术具有高效、环保和可控性的优势，可以有效地处理不同种类的油污染物。 总之，油水分离的前沿技术为解决油污染问题提供了新的方法和可能性。这些技术在提高分离效率、降低处理成本和减少环境污染方面具有重要意义，对于推动可持续发展和保护环境具有重要作用。 ### 回答3： 油水分离的前沿技术是一种用于将油和水分离的先进技术。油水分离是一项重要的环境工程技术，用于处理由油污染引起的水体和废水。过去，常用的油水分离方法包括重力分离、漂浮、离心分离等，但这些方法存在一些局限性。 随着科技的进步，油水分离的前沿技术不断涌现。一个前沿技术是电化学油水分离法。该技术利用电解作用将水中的油脂离子化，然后利用电极的特殊性质将油脂吸附并分离出来。这种方法具有高效、节能、环保等优点，可以有效地从废水中分离出油脂。 另一个前沿技术是膜分离技术。膜分离技术利用特殊的薄膜材料，如聚合物膜、陶瓷膜等，通过渗透、过滤和离子交换等机制实现油水分离。这种技术具有高效、节能、可持续等特点，可以有效地去除水中的油污染物。 此外，纳米技术也被应用于油水分离的前沿技术中。纳米材料具有巨大的比表面积和特殊的物理化学性质，可以用于油水分离膜、吸附材料等的制备。通过纳米材料的使用，油水分离的效率和效果能够得到显著提高。 总之，油水分离的前沿技术不断涌现，为处理油污染带来了新的可能性。电化学油水分离、膜分离技术和纳米技术等都是重要的前沿技术，将为环境保护和资源开发提供有力支持。随着科学技术的发展，我们可以期待更多创新的油水分离技术的出现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值