前后端分离计算器

291800137赵鑫

已于 2023-10-22 22:42:45 修改

阅读量108

点赞数

文章标签： html5 javascript css

于 2023-10-22 09:23:03 首次发布

本文链接：https://blog.csdn.net/ITzxc/article/details/133925413

版权

本文讲述了作者完成前后端分离计算器作业的过程，涉及HTML、CSS、JavaScript前端开发，Django后端，以及数据库MySQL的使用。作者分享了从无头绪到学习新技术的挑战，体会到基础薄弱和学习方法的问题。

摘要由CSDN通过智能技术生成

文章目录

作业基本信息

作业所属课程	软件工程实践
作业题目要求	https://bbs.csdn.net/topics/617377308
作业目标	实现前后端分离的计算器
其他参考文献	无

仓库链接

前端：https://gitcode.net/ITzxc/my-Calculator2
后端：https://gitcode.net/ITzxc/my-Calculator1

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	60	80
• Estimate	• 估计这个任务需要多少时间	30	15
Development	开发	900	1000
• Analysis	• 需求分析 (包括学习新技术）	100	200
• Design Spec	• 生成设计文档	100	120
• Design Review	• 设计复审	45	55
• Coding Standard	• 代码规范 (为目前的开发制定合适的规范)	30	20
• Design	• 具体设计	100	120
• Coding	• 具体编码	330	360
• Code Review	• 代码复审	60	50
• Test	• 测试（自我测试，修改代码，提交修改）	80	70
Reporting	报告	100	120
• Test Repor	• 测试报告	30	25
• Size Measurement	• 计算工作量	30	40
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	30	55
-	合计	2025	2330

成品展示

加减乘除括号运算

清零回退功能

错误提示
读取历史记录功能暂未实现

设计实现过程

前端使用：HTML，css，JavaScript
后端使用：django框架
数据库使用：MySQL

代码说明

前端页面按键设置

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="styles/style.css">
  <title>Calculator</title>
</head>
 
<body>
  <div class="container">
    <div class="calculator">
      <div class="output">
        <pre id="upper"></pre>
        <pre id="lower">0</pre>
      </div>
      <div class="input">
        <button onclick="pressAllClear()">AC</button>
        <button onclick="pressNum(this)">0</button>
        <button onclick="pressClear()">Back</button>
        <button onclick="pressOperator(this)">+</button>
        <button onclick="pressNum(this)">1</button>
        <button onclick="pressNum(this)">2</button>
        <button onclick="pressNum(this)">3</button>
        <button onclick="pressOperator(this)">-</button>
        <button onclick="pressNum(this)">4</button>
        <button onclick="pressNum(this)">5</button>
        <button onclick="pressNum(this)">6</button>
        <button onclick="pressOperator(this)">&times;</button>
        <button onclick="pressNum(this)">7</button>
        <button onclick="pressNum(this)">8</button>
        <button onclick="pressNum(this)">9</button>
        <button onclick="pressOperator(this)">&div;</button>
        <button onclick="pressDot()">.</button>
        <button onclick="pressBracket(this)">(</button>
        <button onclick="pressBracket(this)">)</button>
        <button onclick="pressEqual()">=</button>

      </div>
      <button onclick="pressAns()" class="but_ans">Ans</button>
    </div>
  </div>
  <script src="./scripts/main.js" defer></script>
</body>
 
</html>

页面渲染

body {
    margin: 0;
    box-sizing: border-box;
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fdfbfb;
  }

  .calculator {
    background: #746fdd;
    border-radius: 5px;
    padding: 5px;
    width: 300px;
    min-width: 300px;
  }

  .output {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    background: #ffffff;
    min-height: 50px;
    padding: 5px;
    margin: 0 1px 10px;
    border-radius: 0.25rem;
  }

  .output pre {
    text-align: right;
    font-size: 25px;
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    width: 288px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .output pre::-webkit-scrollbar {
    display: none;
  }

  .output #upper {
    color: #424242;
    font-size: 18px;
  }

  .input {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .input button {
    width: calc(25% - 24px);
    height: 50px;
    margin: 8px 12px;
    border-radius: 50%;
    background-color: #5d5fc0;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    border: none;
  }


  .input button:hover {
    background-color: #5b55b3;
  }

  .input button:active {
    box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
                inset -1px -1px 2px rgba(255, 255, 255, 0.3);
    color: #642929;
  }
  .but_ans{
    width: 90%;
    height: 50px;
    margin: 8px 12px;
    border-radius: 50%;
    background-color: #5d5fc0;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    border: none;
  }

功能实现

function pressNum(e) {
  if (outputLower.innerHTML === '0') {
    outputLower.innerHTML = e.innerHTML;
  } else {
    outputLower.innerHTML += e.innerHTML;
  }
}

// clear all
function pressAllClear() {
  outputUpper.innerHTML = '';
  outputLower.innerHTML = '0';
}

// clear one
function pressClear() {
  outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
}

// calculate button
function pressEqual() {
  let exp = outputLower.innerHTML;
  outputUpper.innerHTML = exp;
  exp = exp.replace(/×/g, '*').replace(/÷/g, '/');
  let result;
  try {
    result = eval(exp);
    // if decimal number more than 4 decimal places
    if (result.toString().indexOf('.') !== -1) {
      result = result.toFixed(4);
    }
  } catch (e) {
    result = 'Error';
  }
  outputLower.innerHTML = result;
  var xhr = new XMLHttpRequest();
  console.log('ss')
  xhr.open('get','http://127.0.0.1:8000/admins/first/',true)
  xhr.send()
}

//
function pressAns() {
  outputLower.innerHTML = pressEqual().result;
}

function pressOperator(e) {
  // check last operator
  let lastOperator = outputLower.innerHTML.slice(-1);
  if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {
    output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;
  } else {
    outputLower.innerHTML += e.innerHTML;
  }
}

function pressDot() {
  outputLower.innerHTML += '.';
}

function pressBracket(e) {
  outputLower.innerHTML += e.innerHTML;
}

心得体会

这次的前后端分离计算器作业由于个人水平原因没有完全完成。在完成第一次作业时我上网查教程最后采用了VS的MFC应用制作一个可视化计算器，没有应用到前后端的知识体系。再接收到本次作业任务后我又是眼前一黑，不知如何下手，不知从哪学起。我上网查了教程后发现需要前端技术，就要学习HTML，css和JavaScript三件套。于是我开启了漫长而错误的学习路线，学习了前端的部分知识，在上周看了时间后发现距离提交的时间已经所剩无几，于是请教同学时如何完成前后端的交互，于是我开始学习django框架，学习了一周框架知识，跟着教程敲，但却无法深入理解如何实现前后端的交互，最后也没有导入数据库。体会就是体会到了自己的基础薄弱，学习能力差，应该改变自己不适用于该课程的学习方法，不能按部就班，要融会贯通。