第二次作业--前后端交互计算器

已于 2023-10-22 23:47:33 修改
阅读量84 收藏
点赞数
文章标签： 交互 数据库 microsoft
于 2023-10-22 23:33:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cybysyh/article/details/133980169
版权

文章目录


作业基本信息…

这个作业属于哪个课程https://bbs.csdn.net/forums/ssynkqtd-05
这个作业要求在哪里https://bbs.csdn.net/topics/617377308
这个作业的目标实现一个前后端交互计算器
其他参考文献…

git仓库链接

gitcode

PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3030
• Estimate• 估计这个任务需要多少时间3030
Development开发14601805
• Analysis• 需求分析 (包括学习新技术）450600
• Design Spec• 生成设计文档3045
• Design Review• 设计复审3030
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)2020
• Design• 具体设计6090
• Coding• 具体编码750800
• Code Review• 代码复审60100
• Test• 测试（自我测试，修改代码，提交修改）60120
Reporting报告5565
• Test Repor• 测试报告3030
• Size Measurement• 计算工作量1015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1520
合计15451900

成品展示

  • 加减乘除、取余、括号运算
    在这里插入图片描述

  • 清零回退

在这里插入图片描述

  • 错误提示

在这里插入图片描述

  • 科学计算器（计算根号、三角函数、log）

在这里插入图片描述

  • 读取历史记录（能用ans按钮返回上一个计算结果，并且查看历史记录读取最后十个字符串式子和对应的计算结果）

在这里插入图片描述

在这里插入图片描述

  • 一开始以为能完成利率计算器就先写了个页面出来，然后发现实在来不及，后面再慢慢完善吧。。
    在这里插入图片描述

设计实现过程

  1. 前端使用html+javascript+css设计计算器，用XMLHttpRequest发送请求，实现数据交换。

  2. 后端使用Python的Flask框架，以及使用Python的pymysql连接数据库。

代码说明

  • 前端我写了一个函数test（）来获取button按钮对象
function test(btn){
    //获取button按钮对象
    var num = btn.value;  
    if(num>='0'&&num<='9'){
      document.getElementById("input").value+=num;
      return document.getElementById("input").value;
    }
    if(num=='ans') get();
    if(num=='tax'){
      document.querySelector(".base-calculator").style.display = "none";
      document.querySelector(".tax-calculator").style.display = "block";
    }
    if(num=='base'){
      document.querySelector(".tax-calculator").style.display = "none";
      document.querySelector(".base-calculator").style.display = "block";
    }
    if(num=='π'){
      document.getElementById("input").value+=Math.PI;
      return document.getElementById("input").value;
    }
    if(num=='e'){
      document.getElementById("input").value+=Math.E;
      return document.getElementById("input").value;
    }      
    if(num=='C') document.getElementById("input").value=""; 
    if(num=='+'||num=='-'||num=='*'||num=='/'||num=='.'||num=='%') op(num);
    if(num=='('||num==')') kuohao(num);
    if(num=='del') del();
    if(num=='sin') sin();
    if(num=='cos') cos();
    if(num=='tan') tan();
    if(num=='√') sqrt();
    if(num=='ln') ln();
    if(num=='=') res();
    return document.getElementById("input").value;
  }
  • 下面是一些计算功能实现的函数
  //括号
  function kuohao(num){
    document.getElementById("input").value+=num;
    return document.getElementById("input").value;
  }
  //删除一位
  function del(){
    var text = document.getElementById("input").value;
    len = text.length
    document.getElementById("input").value = text.substring(0,text.length-1)
  }
  function ln(){
    var exp='sin';
    exp+=document.getElementById("input").value;
    res=Math.log(document.getElementById("input").value);
    document.getElementById("input").value="";
    document.getElementById("input").value += res;
    post(exp,res);
  }
  //加减乘除
  function op(num){
    var text = document.getElementById("input").value;
    var len = text.length;
    if(text[len-1]=='+'||text[len-1]=='-'||text[len-1]=='*'||text[len-1]=='/'||text[len-1]=='.'||text[len-1]=='%'){
      document.getElementById("input").value = text.substring(0,text.length-1);
    }
    document.getElementById("input").value += num;
  }
  //三角函数
  function sin()
  {
    var exp='sin';
    exp+=document.getElementById("input").value;
    var res =  Math.sin(document.getElementById("input").value/180*Math.PI);
    res =res.toFixed(5);
    document.getElementById("input").value="";
    document.getElementById("input").value += res;
    post(exp,res);
  }
  function cos()
  {
    var exp='cos';
    exp+=document.getElementById("input").value;
    var res =  Math.cos(document.getElementById("input").value/180*Math.PI);
    res =res.toFixed(5);
    document.getElementById("input").value="";
    document.getElementById("input").value += res;
    post(exp,res);
  }
  function tan()
  {
    var exp='tan';
    exp+=document.getElementById("input").value;
    var res =  Math.tan(document.getElementById("input").value/180*Math.PI);
    res =res.toFixed(5);
    document.getElementById("input").value="";
    document.getElementById("input").value += res;
    post(exp,res);
  }
  //开方
  function sqrt()
  {
    var exp='√';
    exp+=document.getElementById("input").value;
    res=Math.sqrt(document.getElementById("input").value);
    document.getElementById("input").value="";
    document.getElementById("input").value += res;
    post(exp,res);
  }
  • 获取结果的函数
function res(){
    try{
        var exp = document.getElementById("input").value;       
        if(exp){
          if(exp=='Infinity'||exp=='-Infinity') document.getElementById("input").value='error';
          else document.getElementById("input").value = eval(exp);
        }
    }
    catch{
      document.getElementById("input").value = "error"
    }
    result=document.getElementById("input").value;
    post(exp,result);  
  }
  • 前端发出请求进行连接的代码
function post(calculation,result){
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/post_history', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    const data = {
      calculation: calculation,
      result: result
      };
    xhr.send(JSON.stringify(data));
  }

  function get(){
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:5000/history', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        Data = JSON.parse(xhr.responseText);
        array = Data['data'];
        let string="";
        for(let i=0;i<array.length;i++){
          string +=array[i][0]+" = "+array[i][1]+"\n";
        }
        document.getElementById("input").value = string;        
      }
    };
    xhr.send();
  }
  • 前端css部分
body {
    align-items: center;
    background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
    display: flex;
    height: 100vh;
    justify-content: center;
  }
  .base-calculator{
    border: solid 1px;
    border-radius: 20px;
    width: 350px;
    height: 470px;
    text-align: center;
    margin: auto;/*设置居中*/
    margin-top: 50x;
    background-color:white
  }
  .tax-calculator{
    border: solid 1px;
    border-radius: 20px;
    width: 350px;
    height: 470px;
    text-align: center;
    margin: auto;/*设置居中*/
    margin-top: 50x;
    background-color:white
  }

  .btn {
    outline: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    margin: 5px 0px 5px 10px;
    width: 50px;
    border-radius: 15px;
    color:#e667af;
  }
  .btn:hover {
  background-color:rgb(238, 212, 229);
}     

  #input {
    background-color:rgb(238, 212, 229);
    font-size: 20px;
    height: 46px;
    text-align: right;
    width: 290px;
    border-radius: 10px;
    padding-right: 10px;
    margin: 22px 5px;
    overflow:auto;
  }
  .choicebtn{
    outline: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    height: 40px;
    margin: 10px 0px 5px 10px;
    width: 200px;
    border-radius: 15px;
    color:#e667af;
  }
  .inputtxt{
    background-color:rgb(238, 212, 229);
    font-size: 20px;
    height: 23px;
    text-align: left;
    width: 200px;
    border-radius: 5px;
    padding-right: 10px;
    margin: 10px 5px;
  }
  .change{
    outline: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    margin: 10px 0px 5px 10px;
    width: 80px;
    border-radius: 15px;
    color:#e667af;
  }
  .title{
    font-size:30px;
    color:#690866;
    margin:20px;
  }
  • 后端代码（因为没有实现利率计算器所以很短）
from flask import Flask, jsonify, request
import pymysql
from datetime import datetime
from flask_cors import CORS
#连接mysql
con = pymysql.connect(
        host='localhost',
        port=3306,
        user='root',
        password='20030914',
        database='history'
)
app = Flask(__name__)
CORS(app)
cursor = con.cursor()

@app.route("/post_history",methods=['POST'])
def post_history():
    data = request.get_json()
    calculation = data.get('calculation')
    result = data.get('result')
    time = datetime.now()
    data = (time, calculation, result)
    sql = "INSERT INTO basehistory VALUES (%s, %s, %s)"
    cursor.execute(sql, data)
    con.commit()

@app.route('/history', methods=['GET'])
def history():
    sql="SELECT calculation, result FROM basehistory ORDER BY time DESC LIMIT 10"
    cursor.execute(sql)
    data = cursor.fetchall()
    return jsonify({"data": data})

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

心路历程和收获

在此之前完全没有相关的知识储备，甚至由于上次作业是用windows窗体应用写的，无奈之下从头学习了html+javascript+css后重新写了一个计算器。关于后端的学习网上也是推荐了各式各样的框架，最后想着Python可能比较简单就选择了Python的Flask框架，然后还学习了MySQL的使用方法，花了大量的时间。在具体编码之前的各种环境配置也是十分繁琐，总之是非常痛苦的一次体验。最终的效果也差了一点，没能实现利率计算器，代码可能也不是很规范，后面也会找时间再继续完善。
同时这也是一次十分宝贵的经历，通过不断的学习和探索，我对前后端的知识都有了更深的了解，对后面的团队作业以及今后的学习工作应该都会有一定的帮助，希望以后也能时刻保持这种学习新知识的干劲。

102101206陈妍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
16软件1班安卓第二学期学习总结
howard2005的专栏
05-24 1023
1、刘茂安卓第二学期总结 这学期其实一直都在各种比赛中来回准备，移动开发竞赛是在大二上期开始准备和选拔，入选中的二十多位同学都是各方面都有闪光点的，这学期前一个月我们在4303、4209,、建筑系4楼、图书馆7楼从早上到晚上不停得做题，对接口，请求数据，那段时间眼睛度数感觉是猛增哈哈哈哈，竞赛完以后我们每一个人轮流上课讲了案例，将自己的知识分享给同学，一起交流，一起解决问题。其实我的编程能力还需要提升，就像刘利老师跟我说的一样，或者也是我的性格原因也会让接触过的人觉得我这个人在某些方面过于自我吧，所以我也是
从0开始，设计研发一个全功能通用大数据系统
热门推荐
GitChat
04-12 6万+
在计算机产业发展的70年时间里，每一次的 IT 革命，无不带来：更低廉的价格、更完善的功能、更便捷的使用、更广阔的市场！ 大数据经过10年发展，现在已经到了一个重要的分水岭阶段：通用性和兼容性能力成为大数据发展主流，运行的稳定可靠和使用的简捷、易开发、易维护成为产品发展的驱动力，而这正是 Hadoop/Spark 这类积木式模块框架无法满足的。 本 Chat 讲述这样一个通用大数据系统：系从0开始...
102102144郑荣城软工第二次作业----前后端分离计算器
m0_73762749的博客
10-19 225
后端原本想选择spring boot，最后选择 Flask 作为后端技术，因为简单易用，适合快速原型开发，并选用HTML+CSS+JS的组合快速构建前端。
第二次作业——前后端交互计算器
m0_62370131的博客
10-17 96
学习和探索： 在实现过程中，我学习了如何使用HTML和CSS来布局和样式化页面，了解并实践了JavaScript在浏览器中的应用，如操作DOM，事件处理等。处理表达式： 代码替换了 “Math.sin”, “Math.cos”, “Math.tan”, 和 “Math.log” 为 Python 的 math 模块对应的函数，以便可以正确计算。通过这个项目，我不仅实践了前后端开发的知识，也学到了很多项目管理和问题解决的方法，是一次非常宝贵的经验。一个简单的数据库模型被创建，用于存储计算表达式和它们的结果。
前后端交互计算器
m0_66808626的博客
10-16 238
通过阅读文档、观看教程视频和实践项目，我逐渐掌握了Vue的基本概念、指令、组件和路由等知识，并学会了如何使用Element UI构建漂亮的用户界面。我使用了Flask的路由功能来匹配不同的URL路径，并根据路径的不同执行不同的计算操作。我使用了Vue的数据绑定和事件处理功能来捕获用户的输入和点击操作，并根据用户的操作执行相应的计算逻辑。1. 熟悉了Vue.js和Element UI的使用：通过学习和实践，我对Vue.js和Element UI有了更深入的了解，掌握了它们的基本用法和常用功能。
实现一个前后端交互的计算器
qq_54850622的博客
03-31 581
开始这篇之前需要看一下我上一篇的最后运行servlet方法二（使用idea+tomcat运行） 在calc.html中写入 注意提交这块type是submit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="pos
liunx-基本指令集合--1
weixin_42914706的博客
04-11 814
一个文件修改，多个文件都会生效。是 shell 程序的一部分，其中包含的是一些比较简单的 Linux 系统命令，这些命令是写在bash源码的builtins里面的，由 shell 程序识别并在 shell 程序内部完成运行，通常在 Linux 系统加载运行时 shell 就被加载并驻留在系统内存中。这类文件其实非常类似于 Windows 里的快捷方式，这个软链接文件（假设叫 VA）的内容，其实是另外一个文件（假设叫 B）的路径和名称，当打开 A 文件时，实际上系统会根据其内容找到并打开 B 文件。
【Java设计模式】数据访问对象模式：简化数据库交互
道长的博客
08-31 651
数据访问对象（DAO）设计模式旨在将应用程序的业务逻辑与持久层（通常是数据库或任何其他存储机制）分离。通过使用DAO，应用程序可以访问和操作数据，而无需依赖于特定的数据库实现细节。
Redis基础命令和事务，redis持久化和主从复制
baomingshu的博客
08-31 743
nosql数据库介绍：解释为 non-relational(非关系型数据库)。在NoSQL 数据库中数据之间是无联系的数据的结构是松散的，可变的。优势：大数据量，高性能，灵活的数据模型，高可用，低成本劣势：（1）无关系，数据之间是无联系的。
redis能正常访问，但是springboot编译报错
生而为人我很抱歉
08-27 664
因为你在自定义的 @Configuration 类中没有明确指定配置属性的绑定，或者这个类的加载顺序影响了 Spring Boot 的属性绑定过程。你可以尝试在 MyConf 类上加上 @Order 注解来调整加载顺序，或者确保 MyConf 类不会干扰到 Redis 配置的加载。你可以在 MyConf 类上使用 @ConditionalOnProperty 注解，确保在特定条件下才加载这个配置类，以避免在 Redis 配置加载之前进行不必要的初始化。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
（1）Hilt的基本概念和使用
challenge51all的专栏
08-27 1575
Jetpack Hilt 是一个强大的依赖注入框架，它简化了 Android 应用中的依赖管理，提高了代码的可维护性和可测试性。通过使用注解和模块，开发人员可以轻松地管理应用中的依赖关系，并在不同的组件之间共享和注入依赖。在应用的 Application 类上使用这个注解，告诉 Hilt 这是一个使用 Hilt 进行依赖注入的应用。Jetpack Hilt 是一个用于 Android 的依赖注入框架，它建立在 Dagger 的基础上，旨在简化 Android 应用中的依赖注入过程。
数据库管理-第236期 数据库一体机的价值（20240829）
yhw1809的博客
08-29 1278
数据库一体机是硬件、操作系统和数据库之间的融合，利用更少的硬件实现小体积的高性能密度。
MYSQL数据库初体验
qq_63994746的博客
08-28 1732
面向Windows操作系统简单、易用华为：欧拉阿里：龙蜥腾讯：tencentOS麒麟：（银河麒麟、中标麒麟 – >centos 优麒麟 – > Ubuntu )统信：uos红旗深度：deepin。
SpringBoot项目初始化搭建
weixin_63405049的博客
08-30 1046
本章主要讲解了SpringBoot项目初始化搭建，编程事务的使用，分页依赖的使用，以及跨域问题如何解决，解决了轻量级项目构建初期遇到的一些问题，提供于前后端交互时产生的问题进行分析与解决
【MySQL】索引使用规则——（覆盖索引，单列索引，联合索引，前缀索引，SQL提示，数据分布影响，查询失效情况）
最新发布
YYDsis的博客
08-31 771
一.索引使用规则 ※.验证索引效率提升 1.覆盖索引——查询使用了索引，并且需要返回的列，在该索引中已经全部能够找到2.单列索引＆联合索引3.前缀索引——解决冗长字符串与索引问题【1】前缀索引＆索引选择性的介绍【2】前缀索引创建演示：5.SQL提示——指定某个索引/忽略索引/强制索引 6.数据分布影响——MySQL自我评估7.查询失效的几种情况【1】违背——最左前缀法则(联合索引)【2】范围查询右侧失效【3】用or分割开的条件，or后面没索引，所有索引失效【4】索引列上进行运算操作，索引
ASP.NET Core 入门教学四 集成Redis
Life is not divided
08-28 342
ASP.NET Core 项目中集成了 Redis 缓存。现在，你可以利用 Redis 的高性能缓存功能来提升你的应用程序性能。
基于协同过滤算法的电影推荐系统的设计与实现(论文+源码)_kaic
weixin_52720882的博客
08-30 961
2020年张志军在《基于协同过滤算法和强化学习的电影推荐系统》文章中提出了一种全新的电影推荐框架叫做CF-DQN推荐框架,它是基于协同过滤算法的改进的强化学习的电影推荐框架,用于实时的电影推荐。
FA-124程序链接工具：与计算器的数据交互指南
"FA-124中文说明书是一款针对FA-124 Ver.2.00软件的应用指南，主要用于帮助用户了解如何使用该软件与卡西欧图形科学计算器进行数据传输和程序开发。该说明书强调了FA-124支持与计算器相同命令的程序编写，并提供了在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值