用python+vue实现一个计算页面

要实现一个计算器页面,我们需要分别创建前端和后端部分。前端使用 Vue.js 框架,后端使用 Python 的 Flask 框架。

安装依赖

bash 复制代码
pip install flask
npm install -g vue
npm install -g @vue/cli
vue create calculator-frontend
cd calculator-frontend
npm run serve

在 calculator-frontend 目录下创建一个名为 src 的文件夹,并在其中创建一个名为 Calculator.vue 的文件。将以下代码粘贴到该文件中:

html 复制代码
<template>
  <div id="app">
    <h1>简易计算器</h1>
    <input type="text" v-model="expression" />
    <button @click="calculate">计算</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expression: "",
      result: "",
    };
  },
  methods: {
    calculate() {
      this.$axios.post("http://localhost:5000/calculate", {
        expression: this.expression,
      }).then((response) => {
        this.result = response.data.result;
      });
    },
  },
};
</script>

在项目根目录下创建一个名为 backend.py 的文件,将以下代码粘贴到该文件中:

python 复制代码
from flask import Flask, request, jsonify
import ast
import operator

app = Flask(__name__)

@app.route("/calculate", methods=["POST"])
def calculate():
    expression = request.json["expression"]
    try:
        result = eval_expr(expression)
        return jsonify({"result": result})
    except Exception as e:
        return jsonify({"error": str(e)})

def eval_expr(expr):
    ops = {ast.Add: operator.add, ast.Sub: operator.sub, ast.Mult: operator.mul, ast.Div: operator.truediv}
    node = ast.parse(expr, mode="eval")

    def _eval(node):
        if isinstance(node, ast.Expression):
            return _eval(node.body)
        elif isinstance(node, ast.Num):
            return node.n
        elif isinstance(node, ast.BinOp):
            left = _eval(node.left)
            right = _eval(node.right)
            return ops[type(node.op)](left, right)
        else:
            raise TypeError(node)

    return _eval(node.body)

if __name__ == "__main__":
    app.run(debug=True)

运行后端服务器

python 复制代码
python backend.py

访问 http://localhost:8080,你将看到一个简单的计算器页面。在输入框中输入表达式,然后点击"计算"按钮,结果将显示在页面上。

相关推荐
无尽的大道4 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
爱吃生蚝的于勒8 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
binishuaio17 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE19 分钟前
【Java SE】StringBuffer
java·开发语言
就是有点傻23 分钟前
WPF中的依赖属性
开发语言·wpf
洋24031 分钟前
C语言常用标准库函数
c语言·开发语言
进击的六角龙33 分钟前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
wrx繁星点点34 分钟前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
熊的猫42 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
NoneCoder1 小时前
Java企业级开发系列(1)
java·开发语言·spring·团队开发·开发