用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,你将看到一个简单的计算器页面。在输入框中输入表达式,然后点击"计算"按钮,结果将显示在页面上。

相关推荐
蒋星熠19 小时前
深度学习实战指南:从神经网络基础到模型优化的完整攻略
人工智能·python·深度学习·神经网络·机器学习·卷积神经网络·transformer
m0_6161884919 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang19 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
烦躁的大鼻嘎19 小时前
【Linux】深入Linux多线程架构与高性能编程
linux·运维·服务器·开发语言·c++·ubuntu
野生的编程萌新19 小时前
【C++深学日志】C++编程利器:缺省参数、函数重载、引用详解
c语言·开发语言·c++
Slaughter信仰19 小时前
深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)第十三章知识点问答(15题)
java·开发语言·jvm
万粉变现经纪人19 小时前
如何解决pip安装报错ModuleNotFoundError: No module named ‘cuml’问题
python·scrapy·beautifulsoup·pandas·ai编程·pip·scipy
IT学长编程19 小时前
计算机毕业设计 基于Hadoop豆瓣电影数据可视化分析设计与实现 Python 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试
大数据·hadoop·python·django·毕业设计·毕业论文·豆瓣电影数据可视化分析
java1234_小锋19 小时前
Scikit-learn Python机器学习 - 分类算法 - K-近邻(KNN)算法
python·算法·机器学习
大翻哥哥19 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python